chore: Refactor user settings slice

Author: marcustyphoon

src/components/nav/NavSettings.tsx

@@ -41,6 +41,7 @@ import {
   changeGameMode,
   getExpertMode,
   getGameMode,
+  useSaveUserSettingsOnChange,
 } from '../../state/slices/userSettings';
 import LanguageSelection from '../baseComponents/LanguageSelection';
 import Settings from '../baseComponents/Settings';
@@ -52,8 +53,6 @@ const useStyles = makeStyles()((theme) => ({
   },
 }));
 
-const SETTINGS_STORAGE_KEY = 'globalSettings';
-
 export const GAME_MODES = (t: TFunction) => [
   { value: 'fractals', label: t('Fractals') },
   { value: 'raids', label: t('Raids/Strikes') },
@@ -65,9 +64,6 @@ export default function NavSettings() {
   const dispatch = useAppDispatch();
   const { classes } = useStyles();
 
-  const { i18n } = useTranslation();
-  const { language } = i18n;
-
   const expertMode = useSelector(getExpertMode);
   const gameMode = useSelector(getGameMode);
   const defaultStatInfusions = useSelector(getDefaultStatInfusions);
@@ -84,13 +80,7 @@ export default function NavSettings() {
     setOpen(false);
   };
 
-  // save user settings to localStorage
-  React.useEffect(() => {
-    const settings = JSON.stringify({ expertMode, gameMode, language });
-    console.log(`saving... ${settings}`);
-
-    localStorage.setItem(SETTINGS_STORAGE_KEY, settings);
-  }, [expertMode, gameMode, language]);
+  useSaveUserSettingsOnChange();
 
   const { error: hwThreadsError } = parseHwThreads(hwThreadsString);
 

src/state/slices/localUserSettings.ts

@@ -2,29 +2,18 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { reduxSideEffect } from '../redux-hooks';
 import type { RootState } from '../store';
+import { getLocalStorageObject } from '../../utils/usefulFunctions';
 
 // this slice is for settings which should not be loaded from URLs;
 // it has no changeAll reducer case
 
 const UNSHARED_SETTINGS_STORAGE_KEY = 'localUserSettings';
 
-function getLocalStorageState(): object {
-  try {
-    const stored = localStorage.getItem(UNSHARED_SETTINGS_STORAGE_KEY);
-    if (stored) {
-      return JSON.parse(stored) as object;
-    }
-  } catch {
-    return {};
-  }
-  return {};
-}
-
 const defaultState = { defaultStatInfusions: '' };
 
 export const loadedLocalUserSettings = {
   ...defaultState,
-  ...getLocalStorageState(), // override default state with potentially saved localStorage variables
+  ...getLocalStorageObject(UNSHARED_SETTINGS_STORAGE_KEY), // override default state with potentially saved localStorage variables
 };
 
 const getSliceState = (state: RootState) => state.optimizer.localUserSettings;

src/state/slices/userSettings.ts

@@ -1,32 +1,25 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import { PARAMS, setQueryParm, useQueryParam } from '../../utils/queryParam';
+import { getLocalStorageObject } from '../../utils/usefulFunctions';
 import type { RootState } from '../store';
 import { changeAll } from './controlsSlice';
 
 export type GameMode = 'fractals' | 'raids' | 'wvw';
 
-function getLocalStorageState(): object {
-  try {
-    const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
-    if (stored) {
-      return JSON.parse(stored) as object;
-    }
-  } catch {
-    return {};
-  }
-  return {};
-}
-
 const SETTINGS_STORAGE_KEY = 'globalSettings';
 
 const defaultState = { expertMode: true, gameMode: 'fractals', language: 'en' };
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const gameModeParam = useQueryParam({ key: PARAMS.GAMEMODE });
 
+// language is included here for historical reasons; src/utils/i18n.js imports this
 export const loadedSettings = {
   ...defaultState,
-  ...getLocalStorageState(), // override default state with potentially saved localStorage variables
+  ...getLocalStorageObject(SETTINGS_STORAGE_KEY), // override default state with potentially saved localStorage variables
   ...(gameModeParam && { gameMode: gameModeParam }), // gameMode from query param takes priority
 } as {
   expertMode: boolean;
@@ -37,18 +30,31 @@ export const loadedSettings = {
 // append the gamemode to the query param if no query param is present
 if (!gameModeParam) setQueryParm({ key: PARAMS.GAMEMODE, value: loadedSettings.gameMode });
 
+// save user settings to localStorage (as a react hook, to access react-i18next language)
+const getSliceState = (state: RootState) => state.optimizer.userSettings;
+export const useSaveUserSettingsOnChange = () => {
+  const { i18n } = useTranslation();
+  const { language } = i18n;
+  const sliceState = useSelector(getSliceState);
+
+  React.useEffect(() => {
+    const settings = JSON.stringify({ ...sliceState, language });
+    console.log(`saving... ${settings}`);
+
+    localStorage.setItem(SETTINGS_STORAGE_KEY, settings);
+  }, [sliceState, language]);
+};
+
 export const userSettingsSlice = createSlice({
   name: 'userSettings',
 
   initialState: {
     expertMode: loadedSettings.expertMode,
     gameMode: loadedSettings.gameMode,
+    // language is excluded from this redux slice; react-i18next has its own mutable state
   },
 
   reducers: {
-    changeAllUserSettings: (state, action) => {
-      return { ...state, ...action.payload?.userSettings };
-    },
     changeExpertMode: (state, action: PayloadAction<boolean>) => {
       state.expertMode = action.payload;
     },
@@ -74,7 +80,6 @@ export const userSettingsSlice = createSlice({
 export const getExpertMode = (state: RootState) => state.optimizer.userSettings.expertMode;
 export const getGameMode = (state: RootState) => state.optimizer.userSettings.gameMode;
 
-export const { changeAllUserSettings, changeExpertMode, changeGameMode } =
-  userSettingsSlice.actions;
+export const { changeExpertMode, changeGameMode } = userSettingsSlice.actions;
 
 export default userSettingsSlice.reducer;

src/utils/usefulFunctions.ts

@@ -9,6 +9,18 @@ export function firstUppercase(text: string | undefined | null): string {
   return text.split(' ').map(toUpper).join(' ').trim();
 }
 
+export function getLocalStorageObject(key: string): object {
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored) {
+      return JSON.parse(stored) as object;
+    }
+  } catch {
+    return {};
+  }
+  return {};
+}
+
 /*
  * Parses a string to a number, treating non-parsable strings like empty inputs but indicating an
  * error so text boxes can display the error validation state