From aee92cf9456376428e5a14786a196560e9ab5f65 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 21:24:31 -0400 Subject: [PATCH 01/31] start Dropdown --- src/components/Dropdown.jsx | 15 +++++++++++++++ src/components/index.js | 1 + 2 files changed, 16 insertions(+) create mode 100644 src/components/Dropdown.jsx diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx new file mode 100644 index 0000000..64d0671 --- /dev/null +++ b/src/components/Dropdown.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { Select, MenuItem } from "@material-ui/core"; + +const Dropdown = ({ menuItems }) => { + console.log("Heres Dropdown"); + return ( + + ); +}; + +export default Dropdown; diff --git a/src/components/index.js b/src/components/index.js index 81ed4d3..1627738 100644 --- a/src/components/index.js +++ b/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 } from "./Dropdown"; From f5c5ff163e32e5e88180545d44888333bf760c1f Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 21:35:50 -0400 Subject: [PATCH 02/31] add useChartReducer --- src/utils/useChartReducer.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/utils/useChartReducer.js diff --git a/src/utils/useChartReducer.js b/src/utils/useChartReducer.js new file mode 100644 index 0000000..c1c7b54 --- /dev/null +++ b/src/utils/useChartReducer.js @@ -0,0 +1,34 @@ +import { createContext, useReducer } from "react"; + +const ChartContext = createContext(); + +export const CHART_STATES = { + DEFAULT: "DEFAULT", + REWIND: "REWIND", +}; + +export const CHART_ACTIONS = { + UPDATE_STATE: "UPDATE_STATE", +}; + +const initialState = { + chartState: CHART_STATES.DEFAULT, +}; + +const reducer = (state = initialState, action) => { + switch (action.type) { + case CHART_ACTIONS.UPDATE_STATE: + return { + ...state, + chartState: action.payload.chartState, + }; + default: + return state; + } +}; + +const useChartReducer = () => { + return [...useReducer(reducer, initialState), ChartContext]; +}; + +export default useChartReducer; From 05e5bee5198d86e75aaf7a64e5793481a5d00931 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 22:17:52 -0400 Subject: [PATCH 03/31] start StatefulChart --- src/containers/StatefulChart.jsx | 10 ++++++++++ src/containers/index.js | 1 + 2 files changed, 11 insertions(+) create mode 100644 src/containers/StatefulChart.jsx diff --git a/src/containers/StatefulChart.jsx b/src/containers/StatefulChart.jsx new file mode 100644 index 0000000..d770c34 --- /dev/null +++ b/src/containers/StatefulChart.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import { Chart } from "../components"; + +const StatefulChart = ({ state, ...props }) => { + console.log("stateful chart", state); + + return ; +}; + +export default StatefulChart; diff --git a/src/containers/index.js b/src/containers/index.js index cfd2c46..bbbb9f6 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -3,3 +3,4 @@ export { default as Filter } from "./Filter"; export { default as Footer } from "./Footer"; export { default as Localizer } from "./Localizer"; export { default as Title } from "./Title"; +export { default as StatefulChart } from "./StatefulChart"; From e85588577ca8dfcad1ce5a5fd528b555a9d5b57a Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 22:18:07 -0400 Subject: [PATCH 04/31] reduce the reducer --- src/utils/index.js | 1 + src/utils/useChartReducer.js | 31 ++++++++++++------------------- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/utils/index.js b/src/utils/index.js index 2cf4679..1b28e44 100644 --- a/src/utils/index.js +++ b/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 useChartReducer } from "./useChartReducer"; diff --git a/src/utils/useChartReducer.js b/src/utils/useChartReducer.js index c1c7b54..3330751 100644 --- a/src/utils/useChartReducer.js +++ b/src/utils/useChartReducer.js @@ -1,34 +1,27 @@ -import { createContext, useReducer } from "react"; - -const ChartContext = createContext(); +import { useReducer } from "react"; export const CHART_STATES = { DEFAULT: "DEFAULT", REWIND: "REWIND", }; -export const CHART_ACTIONS = { - UPDATE_STATE: "UPDATE_STATE", -}; - const initialState = { chartState: CHART_STATES.DEFAULT, + indexInHistory: null, // will be integer representing index in user input array }; -const reducer = (state = initialState, action) => { - switch (action.type) { - case CHART_ACTIONS.UPDATE_STATE: - return { - ...state, - chartState: action.payload.chartState, - }; - default: - return state; - } -}; +const reducer = (state = initialState, action) => ({ + ...state, + ...action.payload, +}); const useChartReducer = () => { - return [...useReducer(reducer, initialState), ChartContext]; + const [state, dispatch] = useReducer(reducer, initialState); + return { + state, + dispatch, + chartStates: CHART_STATES, + }; }; export default useChartReducer; From 7b6f44266807e1df41717e6765e5e94b7e817203 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 22:23:16 -0400 Subject: [PATCH 05/31] move StatefulChart into Chart --- src/components/Chart.jsx | 13 +++++++++++++ src/components/index.js | 2 +- src/containers/StatefulChart.jsx | 10 ---------- src/containers/index.js | 1 - 4 files changed, 14 insertions(+), 12 deletions(-) delete mode 100644 src/containers/StatefulChart.jsx diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx index c905b25..e9ea0d0 100644 --- a/src/components/Chart.jsx +++ b/src/components/Chart.jsx @@ -15,6 +15,13 @@ const createGenerteData = (t) => ({ quantiles, }) => { const minMaxData = zip(...minMaxPattern); + console.log({ + filters, + minMaxPattern, + minWeekValue, + quantiles, + }); + console.log({ minMaxData }); return [ { @@ -180,6 +187,7 @@ const ChartComponent = ({ return; } // regerates chart in the new + console.log({ datasets }); merge(chart.current.data.datasets, datasets); chart.current.data.datasets.length = datasets.length; @@ -236,6 +244,11 @@ const ChartComponent = ({ ); }; +export const StatefulChart = ({ state, ...props }) => { + console.log("stateful chart", state); + return ; +}; + ChartComponent.propTypes = { filters: arrayOf(number).isRequired, minMaxPattern: arrayOf(arrayOf(number)), diff --git a/src/components/index.js b/src/components/index.js index 1627738..7fd4043 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,5 +1,5 @@ export { Button, ClearButton, useButtonStyles } from "./Button"; -export { default as Chart } from "./Chart"; +export { default as Chart, StatefulChart } from "./Chart"; export { Dialog, ClearDataDialog, ShareDialog } from "./Dialog"; export { default as Table } from "./Table"; export { default as Dropdown } from "./Dropdown"; diff --git a/src/containers/StatefulChart.jsx b/src/containers/StatefulChart.jsx deleted file mode 100644 index d770c34..0000000 --- a/src/containers/StatefulChart.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { Chart } from "../components"; - -const StatefulChart = ({ state, ...props }) => { - console.log("stateful chart", state); - - return ; -}; - -export default StatefulChart; diff --git a/src/containers/index.js b/src/containers/index.js index bbbb9f6..cfd2c46 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -3,4 +3,3 @@ export { default as Filter } from "./Filter"; export { default as Footer } from "./Footer"; export { default as Localizer } from "./Localizer"; export { default as Title } from "./Title"; -export { default as StatefulChart } from "./StatefulChart"; From 2e3fb774f50c8a7a1871898ed86fa7df5082c8a6 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Mon, 25 May 2020 23:19:31 -0400 Subject: [PATCH 06/31] swap filters based on if rewind is enabled --- src/containers/App.jsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 2ed4b68..de8b174 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -7,9 +7,10 @@ import { theme, useShare, useCalculation, + useChartReducer, } from "../utils"; import { Title, Filter, Footer } from "../containers"; -import { ShareDialog, Chart, Table } from "../components"; +import { ShareDialog, Table, Dropdown, StatefulChart } from "../components"; const App = () => { useTitle(); @@ -21,7 +22,20 @@ const App = () => { shareFilters, } = useShare(filters); - const result = useCalculation({ filters }); + const [state] = useChartReducer(); + const { rewindEnabled, rewindFilters } = state; + + // Get prediction/minMax values based on rewindFilters + // if rewindEnabled is true + let result = useCalculation({ + filters: rewindEnabled ? rewindFilters : filters, + }); + 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 ( @@ -35,7 +49,8 @@ const App = () => { onChange={saveFilters} openShareDialog={openShareDialog} /> - + +
From 6782f18b4bda9d94d5e5e23595473bcc4e4a25e1 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:05:26 -0400 Subject: [PATCH 07/31] more work on Dropdown --- src/components/Dropdown.jsx | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 64d0671..c231ddf 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -1,14 +1,21 @@ import React from "react"; -import { Select, MenuItem } from "@material-ui/core"; +import { Select, MenuItem, InputLabel } from "@material-ui/core"; -const Dropdown = ({ menuItems }) => { - console.log("Heres Dropdown"); +const Dropdown = ({ menuItems, onChange, label, labelId, selectId }) => { return ( - + <> + {label} + + ); }; From 8273aaeccb09d6a34d0e3c643d1d4e097223a085 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:06:41 -0400 Subject: [PATCH 08/31] use dispatch, useWeekDays, built-out Dropdown --- src/containers/App.jsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index de8b174..3943daf 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -8,6 +8,7 @@ import { useShare, useCalculation, useChartReducer, + useWeekDays, } from "../utils"; import { Title, Filter, Footer } from "../containers"; import { ShareDialog, Table, Dropdown, StatefulChart } from "../components"; @@ -22,7 +23,7 @@ const App = () => { shareFilters, } = useShare(filters); - const [state] = useChartReducer(); + const [state, dispatch] = useChartReducer(); const { rewindEnabled, rewindFilters } = state; // Get prediction/minMax values based on rewindFilters @@ -37,6 +38,8 @@ const App = () => { result.filters = filters; } + const { weekDaysCombined } = useWeekDays(); + return ( @@ -49,7 +52,24 @@ const App = () => { onChange={saveFilters} openShareDialog={openShareDialog} /> - + ({ + text: wd, + value: idx, + }))} + onChange={(e) => { + dispatch({ + payload: { + rewindEnabled: true, + indexInHistory: e.target.value, + filters, + }, + }); + }} + />
From 305a37bce186246f999c4224a7c0c52ee0480e29 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:07:08 -0400 Subject: [PATCH 09/31] build out useChartReducer --- src/utils/useChartReducer.js | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/utils/useChartReducer.js b/src/utils/useChartReducer.js index 3330751..eb688be 100644 --- a/src/utils/useChartReducer.js +++ b/src/utils/useChartReducer.js @@ -1,27 +1,29 @@ import { useReducer } from "react"; -export const CHART_STATES = { - DEFAULT: "DEFAULT", - REWIND: "REWIND", -}; - const initialState = { - chartState: CHART_STATES.DEFAULT, + rewindEnabled: false, indexInHistory: null, // will be integer representing index in user input array + rewindFilters: [].fill(null), }; -const reducer = (state = initialState, action) => ({ - ...state, - ...action.payload, -}); +const reducer = (state = initialState, action) => { + const { rewindEnabled, filters, indexInHistory } = action.payload; + if (rewindEnabled) { + return { + ...state, + rewindEnabled: true, + rewindFilters: filters.map((filter, idx) => { + if (typeof indexInHistory === "number" && idx > indexInHistory) { + return null; + } + return filter; + }), + }; + } -const useChartReducer = () => { - const [state, dispatch] = useReducer(reducer, initialState); - return { - state, - dispatch, - chartStates: CHART_STATES, - }; + return initialState; }; +const useChartReducer = () => [...useReducer(reducer, initialState)]; + export default useChartReducer; From eacad842e3dd1376400dcf86237afcad170ba92c Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:09:32 -0400 Subject: [PATCH 10/31] remove StatefulChart --- src/components/Chart.jsx | 5 ----- src/components/index.js | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx index e9ea0d0..9375af0 100644 --- a/src/components/Chart.jsx +++ b/src/components/Chart.jsx @@ -244,11 +244,6 @@ const ChartComponent = ({ ); }; -export const StatefulChart = ({ state, ...props }) => { - console.log("stateful chart", state); - return ; -}; - ChartComponent.propTypes = { filters: arrayOf(number).isRequired, minMaxPattern: arrayOf(arrayOf(number)), diff --git a/src/components/index.js b/src/components/index.js index 7fd4043..1627738 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,5 +1,5 @@ export { Button, ClearButton, useButtonStyles } from "./Button"; -export { default as Chart, StatefulChart } from "./Chart"; +export { default as Chart } from "./Chart"; export { Dialog, ClearDataDialog, ShareDialog } from "./Dialog"; export { default as Table } from "./Table"; export { default as Dropdown } from "./Dropdown"; From ecf14d3e12e591209cd0c832d9c195a3e5bb606b Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:21:39 -0400 Subject: [PATCH 11/31] delete console.log --- src/components/Chart.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx index 9375af0..c905b25 100644 --- a/src/components/Chart.jsx +++ b/src/components/Chart.jsx @@ -15,13 +15,6 @@ const createGenerteData = (t) => ({ quantiles, }) => { const minMaxData = zip(...minMaxPattern); - console.log({ - filters, - minMaxPattern, - minWeekValue, - quantiles, - }); - console.log({ minMaxData }); return [ { @@ -187,7 +180,6 @@ const ChartComponent = ({ return; } // regerates chart in the new - console.log({ datasets }); merge(chart.current.data.datasets, datasets); chart.current.data.datasets.length = datasets.length; From b91526cf50b356dd05a7e20c90716cfc6bb23542 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:42:06 -0400 Subject: [PATCH 12/31] remove last remnants of StatefulChart, adjust Dropdown values --- src/containers/App.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 3943daf..fd82c54 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -11,7 +11,7 @@ import { useWeekDays, } from "../utils"; import { Title, Filter, Footer } from "../containers"; -import { ShareDialog, Table, Dropdown, StatefulChart } from "../components"; +import { ShareDialog, Table, Dropdown, Chart } from "../components"; const App = () => { useTitle(); @@ -53,24 +53,25 @@ const App = () => { openShareDialog={openShareDialog} /> ({ text: wd, - value: idx, + value: idx + 1, // The days/times start at index 1 in the "filters" array }))} onChange={(e) => { + const { value } = e.target; dispatch({ payload: { - rewindEnabled: true, - indexInHistory: e.target.value, + rewindEnabled: typeof value === "number", + indexInHistory: value, filters, }, }); }} /> - +
From f33f3a877eadee5f8be007d4787641aba47aa83e Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:47:26 -0400 Subject: [PATCH 13/31] remove loose state --- src/containers/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index fd82c54..c65af15 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -71,7 +71,7 @@ const App = () => { }); }} /> - +
From 5cba001bdae5239ec3c4275a89ec683b93abe256 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:56:40 -0400 Subject: [PATCH 14/31] add prop-types to dropdown --- src/components/Dropdown.jsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index c231ddf..f17be0c 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -1,5 +1,6 @@ import React from "react"; import { Select, MenuItem, InputLabel } from "@material-ui/core"; +import { string, arrayOf, shape, number, func } from "prop-types"; const Dropdown = ({ menuItems, onChange, label, labelId, selectId }) => { return ( @@ -19,4 +20,24 @@ const Dropdown = ({ menuItems, onChange, label, labelId, selectId }) => { ); }; +Dropdown.propTypes = { + menuItems: arrayOf( + shape({ + text: string, + value: number, + }) + ).isRequired, + onChange: func, + label: string, + labelId: string, + selectId: string, +}; + +Dropdown.defaults = { + onChange: () => {}, + label: "", + labelId: "", + selectId: "", +}; + export default Dropdown; From bd3626d5ce11993fd274d384683b72358ff9c9b2 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 00:57:39 -0400 Subject: [PATCH 15/31] clean up useChartReducer --- src/utils/useChartReducer.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/utils/useChartReducer.js b/src/utils/useChartReducer.js index eb688be..7df545a 100644 --- a/src/utils/useChartReducer.js +++ b/src/utils/useChartReducer.js @@ -2,8 +2,7 @@ import { useReducer } from "react"; const initialState = { rewindEnabled: false, - indexInHistory: null, // will be integer representing index in user input array - rewindFilters: [].fill(null), + rewindFilters: [], }; const reducer = (state = initialState, action) => { @@ -11,9 +10,9 @@ const reducer = (state = initialState, action) => { if (rewindEnabled) { return { ...state, - rewindEnabled: true, + rewindEnabled, rewindFilters: filters.map((filter, idx) => { - if (typeof indexInHistory === "number" && idx > indexInHistory) { + if (idx > indexInHistory) { return null; } return filter; From 6c15b6389084526ac12549ec9dfe7188fedf916d Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 01:17:12 -0400 Subject: [PATCH 16/31] move Dropdown, add Box styling --- src/containers/App.jsx | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index c65af15..6c92ea6 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -52,26 +52,28 @@ const App = () => { onChange={saveFilters} openShareDialog={openShareDialog} /> - ({ - text: wd, - value: idx + 1, // The days/times start at index 1 in the "filters" array - }))} - onChange={(e) => { - const { value } = e.target; - dispatch({ - payload: { - rewindEnabled: typeof value === "number", - indexInHistory: value, - filters, - }, - }); - }} - /> + + ({ + text: wd, + value: idx + 1, // The days/times start at index 1 in the "filters" array + }))} + onChange={(e) => { + const { value } = e.target; + dispatch({ + payload: { + rewindEnabled: typeof value === "number", + indexInHistory: value, + filters, + }, + }); + }} + /> +
From 2d434b8159107a36f796875d84a52eec6e99140f Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 19:09:23 -0400 Subject: [PATCH 17/31] add FormControl, styles --- src/components/Dropdown.jsx | 44 +++++++++++++++++++++++-------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index f17be0c..1d3cd76 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -1,24 +1,34 @@ import React from "react"; -import { Select, MenuItem, InputLabel } from "@material-ui/core"; +import { + Select, + MenuItem, + InputLabel, + FormControl, + makeStyles, +} from "@material-ui/core"; import { string, arrayOf, shape, number, func } from "prop-types"; -const Dropdown = ({ menuItems, onChange, label, labelId, selectId }) => { - return ( - <> - {label} - + + Clear Selection + + {menuItems.map((item) => ( + + {item.text} - {menuItems.map((item) => ( - - {item.text} - - ))} - - - ); -}; + ))} + + +); Dropdown.propTypes = { menuItems: arrayOf( From 3fec31582bc81be702283be0c381d36835de54f8 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 19:27:33 -0400 Subject: [PATCH 18/31] move logic to hook --- src/containers/App.jsx | 23 ++++------------------- src/utils/useChartReducer.js | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 6c92ea6..8bb6110 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -6,7 +6,6 @@ import { useTitle, theme, useShare, - useCalculation, useChartReducer, useWeekDays, } from "../utils"; @@ -23,21 +22,7 @@ const App = () => { shareFilters, } = useShare(filters); - const [state, dispatch] = useChartReducer(); - const { rewindEnabled, rewindFilters } = state; - - // Get prediction/minMax values based on rewindFilters - // if rewindEnabled is true - let result = useCalculation({ - filters: rewindEnabled ? rewindFilters : filters, - }); - 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; - } - + const [, dispatch, result] = useChartReducer(filters); const { weekDaysCombined } = useWeekDays(); return ( @@ -52,14 +37,13 @@ const App = () => { onChange={saveFilters} openShareDialog={openShareDialog} /> - ({ - text: wd, + menuItems={weekDaysCombined.map((weekday, idx) => ({ + text: weekday, value: idx + 1, // The days/times start at index 1 in the "filters" array }))} onChange={(e) => { @@ -74,6 +58,7 @@ const App = () => { }} /> +
diff --git a/src/utils/useChartReducer.js b/src/utils/useChartReducer.js index 7df545a..6453356 100644 --- a/src/utils/useChartReducer.js +++ b/src/utils/useChartReducer.js @@ -1,4 +1,5 @@ import { useReducer } from "react"; +import { useCalculation } from "./index"; const initialState = { rewindEnabled: false, @@ -23,6 +24,21 @@ const reducer = (state = initialState, action) => { return initialState; }; -const useChartReducer = () => [...useReducer(reducer, initialState)]; +const useChartReducer = (filters) => { + const [state, dispatch] = useReducer(reducer, initialState); + // Get prediction/minMax values based on rewindFilters + // if rewindEnabled is true + const calcInput = state.rewindEnabled ? state.rewindFilters : filters; + const result = useCalculation({ filters: calcInput }); + + if (state.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 [state, dispatch, result]; +}; export default useChartReducer; From d24e479e8d35c5fedce019cb35eda4ed63c1c5f8 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 19:30:00 -0400 Subject: [PATCH 19/31] rename to useTimeTravel --- src/containers/App.jsx | 4 ++-- src/utils/index.js | 2 +- src/utils/{useChartReducer.js => useTimeTravel.js} | 0 3 files changed, 3 insertions(+), 3 deletions(-) rename src/utils/{useChartReducer.js => useTimeTravel.js} (100%) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 8bb6110..9e60831 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -6,7 +6,7 @@ import { useTitle, theme, useShare, - useChartReducer, + useTimeTravel, useWeekDays, } from "../utils"; import { Title, Filter, Footer } from "../containers"; @@ -22,7 +22,7 @@ const App = () => { shareFilters, } = useShare(filters); - const [, dispatch, result] = useChartReducer(filters); + const [, dispatch, result] = useTimeTravel(filters); const { weekDaysCombined } = useWeekDays(); return ( diff --git a/src/utils/index.js b/src/utils/index.js index 1b28e44..af8c048 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -5,4 +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 useChartReducer } from "./useChartReducer"; +export { default as useTimeTravel } from "./useTimeTravel"; diff --git a/src/utils/useChartReducer.js b/src/utils/useTimeTravel.js similarity index 100% rename from src/utils/useChartReducer.js rename to src/utils/useTimeTravel.js From 66d6f7ddd3c2cced0e9f9da5b18128d25f286754 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 19:35:27 -0400 Subject: [PATCH 20/31] destructure state --- src/containers/App.jsx | 2 +- src/utils/useTimeTravel.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 9e60831..70bfc50 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -22,7 +22,7 @@ const App = () => { shareFilters, } = useShare(filters); - const [, dispatch, result] = useTimeTravel(filters); + const [dispatch, result] = useTimeTravel(filters); const { weekDaysCombined } = useWeekDays(); return ( diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index 6453356..e1768cb 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -25,20 +25,24 @@ const reducer = (state = initialState, action) => { }; const useChartReducer = (filters) => { - const [state, dispatch] = useReducer(reducer, initialState); + const [{ rewindEnabled, rewindFilters }, dispatch] = useReducer( + reducer, + initialState + ); + // Get prediction/minMax values based on rewindFilters // if rewindEnabled is true - const calcInput = state.rewindEnabled ? state.rewindFilters : filters; + const calcInput = rewindEnabled ? rewindFilters : filters; const result = useCalculation({ filters: calcInput }); - if (state.rewindEnabled) { + 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 [state, dispatch, result]; + return [dispatch, result]; }; export default useChartReducer; From 6d679cc5dbd5bd055aa76c51cce20d37269da134 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 20:17:27 -0400 Subject: [PATCH 21/31] add TimeTravelDropdown --- src/components/Dropdown.jsx | 48 ++++++++++++++++++++++++++++++++++--- src/components/index.js | 2 +- src/containers/App.jsx | 34 ++++---------------------- 3 files changed, 50 insertions(+), 34 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 1d3cd76..39b75e0 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -4,18 +4,29 @@ import { MenuItem, InputLabel, FormControl, + FormHelperText, makeStyles, } from "@material-ui/core"; -import { string, arrayOf, shape, number, func } from "prop-types"; +import { string, arrayOf, shape, number, func, bool } from "prop-types"; +import { useWeekDays } from "../utils/"; const useDropdownStyles = makeStyles({ formControl: { width: "100%", + maxWidth: "575px", }, }); -const Dropdown = ({ menuItems, onChange, label, labelId, selectId }) => ( - +const Dropdown = ({ + menuItems, + onChange, + label, + labelId, + selectId, + helperText, + disabled, +}) => ( + {label} + {helperText && {helperText}} ); @@ -41,6 +53,8 @@ Dropdown.propTypes = { label: string, labelId: string, selectId: string, + helperText: string, + disabled: bool, }; Dropdown.defaults = { @@ -48,6 +62,34 @@ Dropdown.defaults = { label: "", labelId: "", selectId: "", + helperText: "", + disabled: false, +}; + +export const TimeTravelDropdown = ({ filters, dispatch }) => { + const { weekDaysCombined } = useWeekDays(); + return ( + ({ + text: weekday, + value: idx + 1, // The days/times start at index 1 in the "filters" array + }))} + onChange={(e) => { + const { value } = e.target; + dispatch({ + payload: { + rewindEnabled: typeof value === "number", + indexInHistory: value, + filters, + }, + }); + }} + /> + ); }; export default Dropdown; diff --git a/src/components/index.js b/src/components/index.js index 1627738..e7a808c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,4 +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 } from "./Dropdown"; +export { default as Dropdown, TimeTravelDropdown } from "./Dropdown"; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 70bfc50..9c435a4 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,16 +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, - useTimeTravel, - useWeekDays, -} from "../utils"; +import { useFilters, useTitle, theme, useShare, useTimeTravel } from "../utils"; import { Title, Filter, Footer } from "../containers"; -import { ShareDialog, Table, Dropdown, Chart } from "../components"; +import { ShareDialog, Table, TimeTravelDropdown, Chart } from "../components"; const App = () => { useTitle(); @@ -23,7 +16,6 @@ const App = () => { } = useShare(filters); const [dispatch, result] = useTimeTravel(filters); - const { weekDaysCombined } = useWeekDays(); return ( @@ -37,26 +29,8 @@ const App = () => { onChange={saveFilters} openShareDialog={openShareDialog} /> - - ({ - text: weekday, - value: idx + 1, // The days/times start at index 1 in the "filters" array - }))} - onChange={(e) => { - const { value } = e.target; - dispatch({ - payload: { - rewindEnabled: typeof value === "number", - indexInHistory: value, - filters, - }, - }); - }} - /> + +
From 180aaf0f1b4b626cc759d748a94ec003dfd7e42a Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 20:43:24 -0400 Subject: [PATCH 22/31] only show days with values --- src/components/Dropdown.jsx | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 39b75e0..97711c7 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -32,11 +32,14 @@ const Dropdown = ({ Clear Selection - {menuItems.map((item) => ( - - {item.text} - - ))} + {menuItems.map((item) => { + if (!item) return null; + return ( + + {item.text} + + ); + })} {helperText && {helperText}} @@ -68,16 +71,26 @@ Dropdown.defaults = { export const TimeTravelDropdown = ({ filters, dispatch }) => { const { weekDaysCombined } = useWeekDays(); + return ( ({ - text: weekday, - value: idx + 1, // The days/times start at index 1 in the "filters" array - }))} + 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; dispatch({ From be5df67a065bec5e3e42b3d8d765edcccd7bbd5f Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 20:44:50 -0400 Subject: [PATCH 23/31] change name in hook --- src/utils/useTimeTravel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index e1768cb..10c8eb7 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -24,7 +24,7 @@ const reducer = (state = initialState, action) => { return initialState; }; -const useChartReducer = (filters) => { +const useTimeTravel = (filters) => { const [{ rewindEnabled, rewindFilters }, dispatch] = useReducer( reducer, initialState @@ -45,4 +45,4 @@ const useChartReducer = (filters) => { return [dispatch, result]; }; -export default useChartReducer; +export default useTimeTravel; From 3e2d385d3d6fa81fcdaa1d661977a76bca4af4df Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 21:04:07 -0400 Subject: [PATCH 24/31] spread initialState --- src/utils/useTimeTravel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index 10c8eb7..c02db1a 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -21,7 +21,7 @@ const reducer = (state = initialState, action) => { }; } - return initialState; + return { ...initialState }; }; const useTimeTravel = (filters) => { From c7d89ea4161c464f6075709b9c956e9252bc174c Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 21:04:39 -0400 Subject: [PATCH 25/31] resetTimeTravel --- src/containers/App.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 9c435a4..9c47727 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -16,6 +16,10 @@ const App = () => { } = useShare(filters); const [dispatch, result] = useTimeTravel(filters); + const resetTimeTravel = (array) => { + saveFilters(array); + dispatch({ payload: { rewindEnabled: false } }); + }; return ( @@ -26,7 +30,7 @@ const App = () => { From d658ff1d7aaee5c042411ccc956a73f6d9592b10 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 21:07:02 -0400 Subject: [PATCH 26/31] change wording --- src/components/Dropdown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 97711c7..0eac58e 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -74,7 +74,7 @@ export const TimeTravelDropdown = ({ filters, dispatch }) => { return ( Date: Tue, 26 May 2020 21:12:55 -0400 Subject: [PATCH 27/31] add translations --- src/components/Dropdown.jsx | 8 ++++++-- src/locales/en/translation.json | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index 0eac58e..bf2c56c 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -8,6 +8,7 @@ import { makeStyles, } from "@material-ui/core"; import { string, arrayOf, shape, number, func, bool } from "prop-types"; +import { useTranslation } from "react-i18next"; import { useWeekDays } from "../utils/"; const useDropdownStyles = makeStyles({ @@ -71,13 +72,16 @@ Dropdown.defaults = { export const TimeTravelDropdown = ({ filters, dispatch }) => { const { weekDaysCombined } = useWeekDays(); + const { t } = useTranslation(); return ( { const indexInFilters = idx + 1; diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 3d1dbd1..e7fcd06 100644 --- a/src/locales/en/translation.json +++ b/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." } From ed71b1a2f17d44e0f12c4dc8246ece3a93d8a3c6 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 21:40:17 -0400 Subject: [PATCH 28/31] fix uncontrolled component error --- src/components/Dropdown.jsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx index bf2c56c..00fb7f9 100644 --- a/src/components/Dropdown.jsx +++ b/src/components/Dropdown.jsx @@ -7,7 +7,15 @@ import { FormHelperText, makeStyles, } from "@material-ui/core"; -import { string, arrayOf, shape, number, func, bool } from "prop-types"; +import { + string, + arrayOf, + shape, + number, + func, + bool, + oneOfType, +} from "prop-types"; import { useTranslation } from "react-i18next"; import { useWeekDays } from "../utils/"; @@ -26,10 +34,11 @@ const Dropdown = ({ selectId, helperText, disabled, + value, }) => ( {label} - Clear Selection @@ -59,6 +68,7 @@ Dropdown.propTypes = { selectId: string, helperText: string, disabled: bool, + value: oneOfType([number, string]), }; Dropdown.defaults = { @@ -68,14 +78,17 @@ Dropdown.defaults = { selectId: "", helperText: "", disabled: false, + value: "", }; export const TimeTravelDropdown = ({ filters, dispatch }) => { + const [value, setValue] = React.useState(""); const { weekDaysCombined } = useWeekDays(); const { t } = useTranslation(); return ( { })} onChange={(e) => { const { value } = e.target; + setValue(value); dispatch({ payload: { rewindEnabled: typeof value === "number", From 12fdd82f25c0207e7e2681e5857e255533fa10d5 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 21:42:39 -0400 Subject: [PATCH 29/31] add comment --- src/utils/useTimeTravel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index c02db1a..cd10800 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -14,6 +14,7 @@ const reducer = (state = initialState, action) => { rewindEnabled, rewindFilters: filters.map((filter, idx) => { if (idx > indexInHistory) { + // Ignore values beyond the selected point in history return null; } return filter; From 764573ca9805db139e0e7a2ed9df9302a3b3a601 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 22:18:06 -0400 Subject: [PATCH 30/31] return state --- src/utils/useTimeTravel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index cd10800..4d50b84 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -22,7 +22,7 @@ const reducer = (state = initialState, action) => { }; } - return { ...initialState }; + return state; }; const useTimeTravel = (filters) => { From 5555b6a0423a007cc5baba8fdd2cfafd404d6c47 Mon Sep 17 00:00:00 2001 From: SHewitt95 Date: Tue, 26 May 2020 22:24:40 -0400 Subject: [PATCH 31/31] whoops, return initialState --- src/utils/useTimeTravel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/useTimeTravel.js b/src/utils/useTimeTravel.js index 4d50b84..807c738 100644 --- a/src/utils/useTimeTravel.js +++ b/src/utils/useTimeTravel.js @@ -22,7 +22,7 @@ const reducer = (state = initialState, action) => { }; } - return state; + return initialState; }; const useTimeTravel = (filters) => {