Merge pull request #12 from acdvs/url-param-fixes

Toggle settings with initial checkbox
omegastreamtv · Mar 23, 2022 · 1cf5978 · 1cf5978
2 parents 90f04e4 + 45d50b9
commit 1cf5978
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/src/components/Home/Settings.jsx b/src/components/Home/Settings.jsx
@@ -2,30 +2,31 @@ import { useReducer } from 'react';
 import { Form } from 'react-bootstrap';
 
 import settingsReducer, {
-  loadSettings,
+  defaultSettings,
 } from '../../util/hooks/useHomeSettings';
 import emoteGroups from '../../util/emoteGroups';
 
-const defaults =
-  loadSettings() ||
-  emoteGroups.reduce(
-    (obj, val) => ({
-      ...obj,
-      [val.paramKey]: val.home.default,
-    }),
-    {}
-  );
-
 const Settings = ({ visible, show }) => {
-  const [settings, update] = useReducer(settingsReducer, defaults);
+  const [settings, update] = useReducer(settingsReducer, defaultSettings);
+
+  const toggleSettings = () => {
+    show((x) => !x);
+
+    // Reverse condition, state hasn't switched yet
+    if (!visible) {
+      localStorage.setItem('groups', JSON.stringify(defaultSettings));
+    } else {
+      localStorage.removeItem('groups');
+    }
+  };
 
   return (
     <>
       <Form.Check
         type="switch"
         label="Preselect emotes by group"
         checked={visible}
-        onChange={() => show((x) => !x)}
+        onChange={toggleSettings}
         className="mb-2"
       />
       {visible && (

diff --git a/src/util/hooks/useHomeSettings.js b/src/util/hooks/useHomeSettings.js
@@ -1,3 +1,5 @@
+import emoteGroups from '../emoteGroups';
+
 const homeSettingsReducer = (state, group) => {
   const newState = {
     ...state,
@@ -8,7 +10,7 @@ const homeSettingsReducer = (state, group) => {
   return newState;
 };
 
-export const loadSettings = () => JSON.parse(localStorage.getItem('groups'));
+const loadSettings = () => JSON.parse(localStorage.getItem('groups'));
 
 export const getParamString = () => {
   const settings = loadSettings();
@@ -23,4 +25,14 @@ export const getParamString = () => {
   }, '');
 };
 
+const initialSettings = emoteGroups.reduce(
+  (obj, val) => ({
+    ...obj,
+    [val.paramKey]: val.home.default,
+  }),
+  {}
+);
+
+export const defaultSettings = loadSettings() || initialSettings;
+
 export default homeSettingsReducer;