useLocalStorage for persistant values from Reducer

webapp/src/App.js

@@ -7,12 +7,11 @@ import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
 
-import { pollingReducer, pollingDefaults } from './reducer/polling';
+import Polling from './reducer/polling';
 
 function App() {
-  const [polling, dispatchPolling] = useReducer(pollingReducer, pollingDefaults)
+  const [polling, dispatchPolling] = useReducer(Polling.reducer, Polling.initialState)
 
-  console.log('polling', polling)
   return <div className="App">
     <BrowserRouter>
       <Header polling={polling} dispatchPolling={dispatchPolling} />

webapp/src/reducer/polling.js

@@ -1,32 +1,49 @@
-export function pollingReducer(polling, action) {
+import { useLocalStorage } from './util/PersistentStorage'
-  switch (action.type) {
+
+const Persistent = (() => {
+  const [getEnabled, setEnabled] = useLocalStorage('polling.enabled', true);
 
-    case "toggleOnOff":
   return {
-        ...polling,
+    getEnabled,
-        enabled: !polling.enabled
+    setEnabled
+  }
+})(); // <<--- execute
+
+export const pollingGetInitialState = () => {
+  return {
+    enabled: Persistent.getEnabled() === 'true',
+
+    games: false,
+    leaderboard: false
+  }
 };
 
-    case "games":
+export function pollingReducer(state, action) {
-      return {
+  switch (action.type) {
-        ...polling,
+
+    case 'toggleOnOff': return {
+      ...state,
+      enabled: Persistent.setEnabled(!state.enabled)
+    };
+
+    case 'games': return {
+      ...state,
       games: action.value
     };
 
-    case "leaderboard":
+    case 'leaderboard': return {
-      return {
+      ...state,
-        ...polling,
       leaderboard: action.value
     };
 
     default:
-      throw Error("Unknown action: " + action.type);
+      throw Error('Unknown action:' + action.type);
   }
 }
 
-export const pollingDefaults = {
+const Polling = {
-  enabled: true,
+  initialState: pollingGetInitialState(), // <<--- execute
+  reducer: pollingReducer
+}
 
-  games: false,
+export default Polling
-  leaderboard: false,
-};

webapp/src/util/PersistentStorage.js

@@ -0,0 +1,31 @@
+export function useLocalStorage(name, initialValue) {
+
+    const get = () => localStorage.getItem(name);
+    const del = () => localStorage.removeItem(name);
+    const set = (value) => { 
+        localStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}
+
+export function useSessionStorage(name, initialValue) {
+
+    const get = () => sessionStorage.getItem(name);
+    const del = () => sessionStorage.removeItem(name);
+    const set = (value) => { 
+        sessionStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}