Settings now sync with browser local storage

package.json

@@ -20,6 +20,7 @@
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.10",
     "@tanstack/react-query": "^4.35.3",
+    "@uidotdev/usehooks": "^2.3.1",
     "axios": "^1.5.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",

src/modules/Settings/components/FontSelector/FontSelector.tsx

@@ -21,6 +21,7 @@ const FontSelector = () => {
         options={FONTS}
         id={t('label')}
         onChange={handleChange}
+        isOptionEqualToValue={(a, b) => a.slug === b.slug}
         getOptionLabel={option => t(`names.${option.slug}`)}
         renderInput={(params => <TextField {...params} label={params.id} />)}
       />

src/modules/Settings/components/LanguageControls/LanguageControls.tsx → src/modules/Settings/components/LanguageSelector/LanguageSelector.tsx

@@ -1,4 +1,4 @@
-import styles from './LanguageControls.module.scss'
+import styles from './LanguageSelector.module.scss'
 import { useTranslation } from "react-i18next"
 import { useCallback, MouseEvent } from "react"
 import i18n from "i18next"
@@ -8,18 +8,21 @@ import { useSettingsContext } from "modules/Settings/context/useSettingsContext.
 import { CircleFlag } from 'react-circle-flags'
 import classNames from "classnames"
 
-const LanguageControls = () => {
+const LanguageSelector = () => {
   const { language, setLanguage } = useSettingsContext()
   const { t } = useTranslation('translation', { keyPrefix: 'header.language-controls' })
 
   const handleChange = useCallback((_e: MouseEvent<HTMLElement>, language: Language) => {
+    console.log('on change', language)
     i18n.changeLanguage(language).then(() => {
       setLanguage(language)
     }).catch(error => {
       console.debug('Failed to set language to: ', language, error)
     })
   }, [setLanguage])
 
+  console.log('value from context in selector: ', language)
+
   return (
     <div className={styles.controls}>
       <ToggleButtonGroup value={language} exclusive onChange={handleChange} aria-label='language' color='secondary'>
@@ -35,4 +38,4 @@ const LanguageControls = () => {
   )
 }
 
-export default LanguageControls
+export default LanguageSelector

src/modules/Settings/components/LanguageSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './LanguageSelector.tsx'

src/modules/Settings/components/SettingsDrawer/SettingsDrawer.tsx

@@ -3,7 +3,7 @@ import styles from './SettingsDrawer.module.scss'
 import { useTranslation } from "react-i18next"
 import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
 import SourcesSelector from "modules/Settings/components/SourcesSelector"
-import LanguageControls from "modules/Settings/components/LanguageControls"
+import LanguageSelector from "modules/Settings/components/LanguageSelector"
 import FontSelector from "modules/Settings/components/FontSelector"
 import AnkiDeckSelector from "modules/Settings/components/AnkiDeckSelector"
 import AnkiTagsSelector from "modules/Settings/components/AnkiTagsSelector"
@@ -39,7 +39,7 @@ const SettingsDrawer = () => {
             {t('language')}
           </p>
 
-          <LanguageControls />
+          <LanguageSelector />
         </div>
 
         <div className={styles.section}>

src/modules/Settings/context/SettingsContextProvider.tsx

@@ -1,43 +1,66 @@
-import { PropsWithChildren, useMemo, useState } from "react"
+import { PropsWithChildren, useCallback, useMemo, useState } from "react"
 import {
-  defaultAnkiSettings,
+  AnkiSettings,
   defaultSettings,
   NewsSource,
   SettingsContextBag,
-  SettingsValues
 } from "modules/Settings/context/types.ts"
 import { SettingsContext } from "modules/Settings/context/SettingsContext.ts"
-import { Language } from "modules/Settings/components/LanguageControls/types.ts"
-import { Font, FONTS } from "modules/Settings/components/FontSelector/types.ts"
-import useLocalStorage from "hooks/useLocalStorage"
+import { Language } from "modules/Settings/components/LanguageSelector/types.ts"
+import { Font } from "modules/Settings/components/FontSelector/types.ts"
+import { useLocalStorage } from "@uidotdev/usehooks"
 
 const SettingsContextProvider = ({ children }: PropsWithChildren) => {
   const [open, setOpen] = useState(false)
-  const [font, setFont] = useState<Font>(FONTS[0])
-  const [anki, setAnki] = useState(defaultAnkiSettings)
-  const [language, setLanguage] = useState<Language>('jp')
-  const [sources, setSources] = useState<NewsSource[]>([NewsSource.MAINICHI_RSS_FLASH_NEWS])
-
-  const { value: settings } = useLocalStorage<SettingsValues>({
-    key: 'settings',
-    defaultValue: defaultSettings,
-    value: {
-      anki,
-      font,
-      language,
-      sources
-    }
-  })
+  const [settings, setSettings] = useLocalStorage('nyusu-settings', defaultSettings)
+
+  const setFont = useCallback((font: Font) => {
+    setSettings(previous => {
+      return {
+        ...previous,
+        font
+      }
+    })
+  }, [setSettings])
+
+  const setSources = useCallback((sources: NewsSource[]) => {
+    setSettings(previous => {
+      return {
+        ...previous,
+        sources
+      }
+    })
+  }, [setSettings])
+
+  const setLanguage = useCallback((language: Language) => {
+    setSettings(previous => {
+      return {
+        ...previous,
+        language
+      }
+    })
+  }, [setSettings])
+
+  const setAnkiSettings = useCallback((anki: AnkiSettings) => {
+    setSettings(previous => {
+      return {
+        ...previous,
+        anki
+      }
+    })
+  }, [setSettings])
+
+  console.log('settings read from local storage', settings)
 
   const values: SettingsContextBag = useMemo(() => ({
     ...settings,
     open,
     setOpen,
+    setFont,
     setSources,
     setLanguage,
-    setFont,
-    setAnkiSettings: setAnki
-  }), [open, settings])
+    setAnkiSettings
+  }), [open, setAnkiSettings, setFont, setLanguage, setSources, settings])
 
   return (
     <SettingsContext.Provider value={values}>

src/modules/Settings/context/types.ts

@@ -1,4 +1,4 @@
-import { Language } from "modules/Settings/components/LanguageControls/types.ts"
+import { Language } from "modules/Settings/components/LanguageSelector/types.ts"
 import { Font, FONTS } from "modules/Settings/components/FontSelector/types.ts"
 
 export interface AnkiSettings {