Convert to Zustand state management

package.json

@@ -27,7 +27,8 @@
     "react-scripts": "^4.0.3",
     "react-test-renderer": "^16.0.0",
     "svg-loaders-react": "^2.2.1",
-    "url-join": "^2.0.2"
+    "url-join": "^2.0.2",
+    "zustand": "^4.4.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/controls/DatasetSelector/DatasetSelector.js

@@ -1,30 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import flow from 'lodash/fp/flow';
 import keys from 'lodash/fp/keys';
 import map from 'lodash/fp/map';
 
 import DatasetLabel from '../../datasets/DatasetLabel';
 import RadioButtonSelector from '../RadioButtonSelector';
-import { useConfigContext } from '../../main/ConfigContext';
+import { useStore } from '../../../state-store';
 
 
-function DatasetSelector(props) {
-  const config = useConfigContext();
+export default function DatasetSelector(props) {
+  const config = useStore(state => state.config);
+
+  // TODO: Memoize
   const options = flow(
     keys,
     map(dataset =>
         ({ value: dataset, label: <DatasetLabel dataset={dataset}/> })
     ),
   )(config.datasets);
+
+  const dataset = useStore(state => state.dataset);
+  const setDataset = useStore(state => state.setDataset);
+
   return (
-    <RadioButtonSelector name="dataset" options={options} {...props}/>
+    <RadioButtonSelector
+      name="dataset"
+      options={options}
+      value={dataset}
+      onChange={setDataset}
+      styling={config.ui.datasetSelector.styling}
+      {...props}
+    />
   );
 }
-
-DatasetSelector.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default DatasetSelector;

src/components/controls/MonthIncrementDecrement/MonthIncrementDecrement.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import IncrementDecrement from '../../controls/IncrementDecrement';
+import { useStore } from '../../../state-store';
+
+export default function MonthIncrementDecrement(props) {
+  const config = useStore(state => state.config);
+  const incrementMonth = useStore(state => state.incrementMonth);
+  const isDataLoading = useStore(state => state.isDataLoading());
+
+  return (
+    <IncrementDecrement
+      id="month-increment-decrement"
+      disabled={isDataLoading}
+      defaultBy={config.ui.monthIncrementDecrement.defaultBy}
+      bys={config.ui.monthIncrementDecrement.by}
+      onIncrement={incrementMonth}
+      styling={config.ui.monthIncrementDecrement.styling}
+    />
+
+  )
+}

src/components/controls/MonthIncrementDecrement/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "MonthIncrementDecrement",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./MonthIncrementDecrement.js"
+}

src/components/controls/MonthSelector/MonthSelector.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import ThrottledInputRange from '../ThrottledInputRange';
+import { useStore } from '../../../state-store';
 
 const monthNames = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ');
 const formatLabel = value => monthNames[value];
 
-function MonthSelector(props) {
+export default function MonthSelector(props) {
+  const date = useStore(state => state.date);
+  const setMonth = useStore(state => state.setMonth);
+  const isDataLoading = useStore(state => state.isDataLoading());
+
   return (
     <ThrottledInputRange
       minValue={0}
       maxValue={11}
       formatLabel={formatLabel}
+      disabled={isDataLoading}
+      value={date.month()}
+      onChange={setMonth}
       {...props}
     />
   );
 }
-
-export default MonthSelector;

src/components/controls/ThrottledInputRange/ThrottledInputRange.js

@@ -7,6 +7,8 @@ import InputRange from 'react-input-range';
 function ThrottledInputRange({ value, onChange, ...rest }) {
   const [intermediateValue, setIntermediateValue] = useState(value);
 
+  // TODO: This is probably better as useMemo.
+  // Update intermediate value whenever external value changes.
   useEffect(() => {
     setIntermediateValue(value);
   }, [value]);

src/components/controls/VariableSelector/VariableSelector.js

@@ -1,33 +1,38 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Tooltip } from 'react-bootstrap';
 import keys from 'lodash/fp/keys';
 
-import { useConfigContext } from '../../main/ConfigContext';
 import RadioButtonSelector from '../RadioButtonSelector';
 import VariableLabel from '../../variables/VariableLabel';
+import { useStore } from '../../../state-store';
 
 
 function VariableSelector(props) {
-  const config = useConfigContext();
+  const config = useStore(state => state.config);
+
+  // TODO: Memoize variableOptions
   const variableKeys = keys(config?.variables);
   const variableOptions = variableKeys.map(
     value => ({ value, label: <VariableLabel variable={value}/> })
   );
+
+  const variable = useStore(state => state.variable);
+  const setVariable = useStore(state => state.setVariable);
+  const isDataLoading = useStore(state => state.isDataLoading());
+
   return (
-    <RadioButtonSelector options={variableOptions} name="variable" {...props} />
+    <RadioButtonSelector
+      options={variableOptions}
+      name="variable"
+      disabled={isDataLoading}
+      value={variable}
+      onChange={setVariable}
+      styling={config.ui.variableSelector.styling}
+      {...props}
+    />
   );
 }
 
-VariableSelector.propTypes = {
-  disabled: PropTypes.bool,
-  // Is control disabled
-  value: PropTypes.string,
-  // Current value of control
-  onChange: PropTypes.func,
-  // Callback when new option selected
-};
-
 VariableSelector.tooltips = {
   precip: <Tooltip id="precip">Monthly total precipitation</Tooltip>,
   tmin: <Tooltip id="tmin">Monthly average of daily minimum

src/components/controls/YearIncrementDecrement/YearIncrementDecrement.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import IncrementDecrement from '../../controls/IncrementDecrement';
+import { useStore } from '../../../state-store';
+
+export default function YearIncrementDecrement(props) {
+  const config = useStore(state => state.config);
+  const incrementYear = useStore(state => state.incrementYear);
+  const isDataLoading = useStore(state => state.isDataLoading());
+
+  return (
+    <IncrementDecrement
+      id="year-increment-decrement"
+      disabled={isDataLoading}
+      defaultBy={config.ui.monthIncrementDecrement.defaultBy}
+      bys={config.ui.monthIncrementDecrement.by}
+      onIncrement={incrementYear}
+      styling={config.ui.monthIncrementDecrement.styling}
+    />
+
+  )
+}

src/components/controls/YearIncrementDecrement/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "YearIncrementDecrement",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./YearIncrementDecrement.js"
+}

src/components/controls/YearSelector/YearSelector.js

@@ -1,9 +1,21 @@
 import React from 'react';
 import ThrottledInputRange from '../ThrottledInputRange';
+import { latestPossibleDataDate, useStore } from '../../../state-store';
 
 function YearSelector(props) {
+  const date = useStore(state => state.date);
+  const setYear = useStore(state => state.setYear);
+  const isDataLoading = useStore(state => state.isDataLoading());
+
   return (
-    <ThrottledInputRange {...props} />
+    <ThrottledInputRange
+      disabled={isDataLoading}
+      minValue={1970}
+      maxValue={latestPossibleDataDate.year()}
+      value={date.year()}
+      onChange={setYear}
+      {...props}
+    />
   );
 }
 

src/components/datasets/DatasetLabel/DatasetLabel.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useConfigContext } from '../../main/ConfigContext';
+import { useStore } from '../../../state-store';
 
 export default function DatasetLabel({ dataset }) {
-  const config = useConfigContext();
+  const config = useStore(state => state.config);
   return (
     <span dangerouslySetInnerHTML={{
       __html: config?.datasets?.[dataset]?.label ?? dataset