Add support for rewinding the chart's prediction while viewing current data

src/components/Dropdown.jsx

@@ -0,0 +1,126 @@
+import React from "react";
+import {
+  Select,
+  MenuItem,
+  InputLabel,
+  FormControl,
+  FormHelperText,
+  makeStyles,
+} from "@material-ui/core";
+import {
+  string,
+  arrayOf,
+  shape,
+  number,
+  func,
+  bool,
+  oneOfType,
+} from "prop-types";
+import { useTranslation } from "react-i18next";
+import { useWeekDays } from "../utils/";
+
+const useDropdownStyles = makeStyles({
+  formControl: {
+    width: "100%",
+    maxWidth: "575px",
+  },
+});
+
+const Dropdown = ({
+  menuItems,
+  onChange,
+  label,
+  labelId,
+  selectId,
+  helperText,
+  disabled,
+  value,
+}) => (
+  <FormControl className={useDropdownStyles().formControl} disabled={disabled}>
+    <InputLabel id={labelId}>{label}</InputLabel>
+    <Select value={value} labelId={labelId} id={selectId} onChange={onChange}>
+      <MenuItem value="">
+        <em>Clear Selection</em>
+      </MenuItem>
+      {menuItems.map((item) => {
+        if (!item) return null;
+        return (
+          <MenuItem value={item.value} key={item.value}>
+            {item.text}
+          </MenuItem>
+        );
+      })}
+    </Select>
+    {helperText && <FormHelperText>{helperText}</FormHelperText>}
+  </FormControl>
+);
+
+Dropdown.propTypes = {
+  menuItems: arrayOf(
+    shape({
+      text: string,
+      value: number,
+    })
+  ).isRequired,
+  onChange: func,
+  label: string,
+  labelId: string,
+  selectId: string,
+  helperText: string,
+  disabled: bool,
+  value: oneOfType([number, string]),
+};
+
+Dropdown.defaults = {
+  onChange: () => {},
+  label: "",
+  labelId: "",
+  selectId: "",
+  helperText: "",
+  disabled: false,
+  value: "",
+};
+
+export const TimeTravelDropdown = ({ filters, dispatch }) => {
+  const [value, setValue] = React.useState("");
+  const { weekDaysCombined } = useWeekDays();
+  const { t } = useTranslation();
+
+  return (
+    <Dropdown
+      value={value}
+      label={t("Rewind to a day and time")}
+      labelId="rewind-label"
+      selectId="rewind-select"
+      helperText={t(
+        "Use this dropdown to see how the chart evolved as you filled out the prices above."
+      )}
+      menuItems={weekDaysCombined.map((weekday, idx) => {
+        const indexInFilters = idx + 1;
+
+        if (!filters[indexInFilters]) {
+          // Ignore values left blank by the user
+          return null;
+        }
+
+        return {
+          text: weekday,
+          value: indexInFilters,
+        };
+      })}
+      onChange={(e) => {
+        const { value } = e.target;
+        setValue(value);
+        dispatch({
+          payload: {
+            rewindEnabled: typeof value === "number",
+            indexInHistory: value,
+            filters,
+          },
+        });
+      }}
+    />
+  );
+};
+
+export default Dropdown;

src/components/index.js

@@ -2,3 +2,4 @@ export { Button, ClearButton, useButtonStyles } from "./Button";
 export { default as Chart } from "./Chart";
 export { Dialog, ClearDataDialog, ShareDialog } from "./Dialog";
 export { default as Table } from "./Table";
+export { default as Dropdown, TimeTravelDropdown } from "./Dropdown";

src/containers/App.jsx

@@ -1,15 +1,9 @@
 import React from "react";
 import { CssBaseline, ThemeProvider, Container, Box } from "@material-ui/core";
 import { ThemeProvider as StyledComponentsThemeProvider } from "styled-components";
-import {
-  useFilters,
-  useTitle,
-  theme,
-  useShare,
-  useCalculation,
-} from "../utils";
+import { useFilters, useTitle, theme, useShare, useTimeTravel } from "../utils";
 import { Title, Filter, Footer } from "../containers";
-import { ShareDialog, Chart, Table } from "../components";
+import { ShareDialog, Table, TimeTravelDropdown, Chart } from "../components";
 
 const App = () => {
   useTitle();
@@ -21,7 +15,11 @@ const App = () => {
     shareFilters,
   } = useShare(filters);
 
-  const result = useCalculation({ filters });
+  const [dispatch, result] = useTimeTravel(filters);
+  const resetTimeTravel = (array) => {
+    saveFilters(array);
+    dispatch({ payload: { rewindEnabled: false } });
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -32,9 +30,12 @@ const App = () => {
           <Box mx={[-1.5, 0]}>
             <Filter
               filters={inputFilters}
-              onChange={saveFilters}
+              onChange={resetTimeTravel}
               openShareDialog={openShareDialog}
             />
+            <Box p={[0.5, 1, 2]} mt={2}>
+              <TimeTravelDropdown filters={filters} dispatch={dispatch} />
+            </Box>
             <Chart {...result} />
             <Table {...result} />
             <Footer />

src/locales/en/translation.json

@@ -33,5 +33,7 @@
   "Chance": "Chance",
   "Pattern": "Pattern",
   "patternNames": "Fluctuating_High Spike_Decreasing_Small Spike",
-  "All Patterns": "All Patterns"
+  "All Patterns": "All Patterns",
+  "Rewind to a day and time": "Rewind to a day and time",
+  "Use this dropdown to see how the chart evolved as you filled out the prices above.": "Use this dropdown to see how the chart evolved as you filled out the prices above."
 }

src/utils/index.js

@@ -5,3 +5,4 @@ export { default as useShare } from "./useShare";
 export { default as useTitle } from "./useTitle";
 export { default as useWeekDays } from "./useWeekDays";
 export { default as useCalculation } from "./useCalculation";
+export { default as useTimeTravel } from "./useTimeTravel";

src/utils/useTimeTravel.js

@@ -0,0 +1,49 @@
+import { useReducer } from "react";
+import { useCalculation } from "./index";
+
+const initialState = {
+  rewindEnabled: false,
+  rewindFilters: [],
+};
+
+const reducer = (state = initialState, action) => {
+  const { rewindEnabled, filters, indexInHistory } = action.payload;
+  if (rewindEnabled) {
+    return {
+      ...state,
+      rewindEnabled,
+      rewindFilters: filters.map((filter, idx) => {
+        if (idx > indexInHistory) {
+          // Ignore values beyond the selected point in history
+          return null;
+        }
+        return filter;
+      }),
+    };
+  }
+
+  return initialState;
+};
+
+const useTimeTravel = (filters) => {
+  const [{ rewindEnabled, rewindFilters }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
+
+  // Get prediction/minMax values based on rewindFilters
+  // if rewindEnabled is true
+  const calcInput = rewindEnabled ? rewindFilters : filters;
+  const result = useCalculation({ filters: calcInput });
+
+  if (rewindEnabled) {
+    // Draw "Daily Price" based on the user's actual input.
+    // This allows the user to see their actual turnip prices graphed
+    // compared to past projections as they evolved.
+    result.filters = filters;
+  }
+
+  return [dispatch, result];
+};
+
+export default useTimeTravel;