Merge pull request #23 from sohebmahmood-madetech/persist-radar

Persist radar choices

Author: struds

src/components/RadarProvider.js

@@ -4,6 +4,8 @@ import { roles } from "../utils/data/roles";
 
 const RadarContext = React.createContext();
 
+const lsKeyData = "youData";
+
 function radarReducer(state, action) {
   switch (action.type) {
     case "upload": {
@@ -23,8 +25,25 @@ function radarReducer(state, action) {
       return { ...state, data };
     }
     case "update": {
+      localStorage.setItem(lsKeyData, JSON.stringify(state.data.datasets[state.data.you].data));
       return { ...state, data: state.data };
     }
+    case "loadFromLocalStorage": {
+      const storageData = JSON.parse(localStorage.getItem(lsKeyData));
+      if (!storageData || !Array.isArray(storageData)) {
+        return state;
+      }
+
+      const updatedDatasets = state.data.datasets.map((dataset, index) => 
+        index === state.data.you ? { ...dataset, data: storageData } : dataset
+      );
+
+      return {
+        ...state,
+        data: { ...state.data, datasets: updatedDatasets}
+      };
+    }
+
     default: {
       throw new Error(`Unhandled action type: ${action.type}`);
     }

src/components/SkillsSelector.js

@@ -3,9 +3,21 @@ import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
-import { RadarConsumer } from "./RadarProvider";
+import { RadarConsumer, useData } from "./RadarProvider";
+import { useEffect } from "react";
 
 const SkillsSelector = () => {
+  
+  const ctx = useData();
+
+  useEffect(() => {
+    ctx.dispatch({type: "loadFromLocalStorage"});
+  },
+  // Intentionally disabling the warning here because we want to load data only once 
+  // when the component mounts
+  // eslint-disable-next-line
+  []);
+  
   return (
     <RadarConsumer>
       {({ state, dispatch }) => (