squash: feat(config): add options to select traffic chart style

1 files changed, 37 insertions, 5 deletions

diff --git a/src/components/Config.js b/src/components/Config.js
index 01bc4bd..f937692 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -3,15 +3,24 @@ import PropTypes from 'prop-types';
 import { useStoreState, useActions } from 'm/store';
 
 import { getConfigs, fetchConfigs, updateConfigs } from 'd/configs';
-import { clearStorage } from 'd/app';
+import {
+  clearStorage,
+  selectChartStyleIndex,
+  getSelectedChartStyleIndex
+} from 'd/app';
 
 import ContentHeader from 'c/ContentHeader';
 import Switch from 'c/Switch';
 import ToggleSwitch from 'c/ToggleSwitch';
 import Input from 'c/Input';
 import Button from 'c/Button';
+import Selection from 'c/Selection';
+import TrafficChartSample from 'c/TrafficChartSample';
+
 import s0 from 'c/Config.module.css';
 
+const propsList = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
+
 const optionsRule = [
   {
     label: 'Global',
@@ -51,11 +60,14 @@ const optionsLogLevel = [
 ];
 
 const actions = {
+  selectChartStyleIndex,
   fetchConfigs,
   updateConfigs
 };
 
-const mapStateToProps = s => ({ configs: getConfigs(s) });
+const mapStateToProps = s => ({
+  configs: getConfigs(s)
+});
 
 export default function ConfigContainer() {
   const { fetchConfigs } = useActions(actions);
@@ -66,8 +78,13 @@ export default function ConfigContainer() {
   return <Config configs={configs} />;
 }
 
+const mapStateToProps2 = s => ({
+  selectedChartStyleIndex: getSelectedChartStyleIndex(s)
+});
+
 function Config({ configs }) {
-  const { updateConfigs } = useActions(actions);
+  const { updateConfigs, selectChartStyleIndex } = useActions(actions);
+  const { selectedChartStyleIndex } = useStoreState(mapStateToProps2);
   // configState to track component internal state
   // prevConfigs to track external props.configs
   const [configState, _setConfigState] = useState(configs);
@@ -129,6 +146,10 @@ function Config({ configs }) {
     }
   }
 
+  function handleChartStyleIndexOnChange(idx) {
+    selectChartStyleIndex(idx);
+  }
+
   return (
     <div>
       <ContentHeader title="Config" />
@@ -198,8 +219,19 @@ function Config({ configs }) {
       </div>
 
       <div className={s0.section}>
-        <div className={s0.label}>Actions</div>
-        <Button label="Log out" onClick={clearStorage} />
+        <div>
+          <div className={s0.label}>Chart Style</div>
+          <Selection
+            OptionComponent={TrafficChartSample}
+            optionPropsList={propsList}
+            selectedIndex={selectedChartStyleIndex}
+            onChange={handleChartStyleIndexOnChange}
+          />
+        </div>
+        <div>
+          <div className={s0.label}>Action</div>
+          <Button label="Log out" onClick={clearStorage} />
+        </div>
       </div>
     </div>
   );