feat: persist locale choice

src/app.tsx

@@ -8,8 +8,14 @@ import StatsModal from './components/modals/StatsModal'
 import Footer from './components/Footer'
 import InfoModal from './components/modals/InfoModal'
 import FeedbackCard from './components/FeedbackCard'
+import { useEffect } from 'preact/hooks'
+import i18n from './i18n'
 
 export const App: FunctionComponent = () => {
+  useEffect(() => {
+    void i18n.changeLanguage(store.getState().ui.locale)
+  })
+
   return (
     <Provider store={store}>
       <div className="flex h-screen p-4">

src/store/index.ts

@@ -1,14 +1,16 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { type TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { LS_PATIENTS, persistMiddleware } from './persistMiddleware'
+import { LS_PATIENTS, LS_UI, persistMiddleware } from './persistMiddleware'
 import patients from './patients'
 import ui from './ui'
 
 const patientsState = JSON.parse(localStorage.getItem(LS_PATIENTS) ?? 'null') ?? undefined
+const uiState = JSON.parse(localStorage.getItem(LS_UI) ?? 'null') ?? undefined
 
 export const store = configureStore({
   preloadedState: {
-    patients: patientsState
+    patients: patientsState,
+    ui: uiState
   },
   reducer: {
     patients,

src/store/persistMiddleware.ts

@@ -1,8 +1,11 @@
 import { type TypedStartListening, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit'
 import { type AppDispatch, type RootState } from '.'
 import { addPatient, checkCapillaryRefill, checkMentalStatus, checkRespiratoryRate, checkWalking, clearAirway, clearPatients, controlBleeding, removePatient, setCode } from './patients'
+import { setLocale } from './ui'
+import { pick } from '../utils'
 
 export const LS_PATIENTS = 'patients'
+export const LS_UI = 'ui'
 
 export const persistMiddleware = createListenerMiddleware()
 
@@ -16,3 +19,10 @@ startListening({
     localStorage.setItem(LS_PATIENTS, JSON.stringify(listener.getState().patients))
   }
 })
+
+startListening({
+  matcher: isAnyOf(setLocale),
+  effect: (_, listener) => {
+    localStorage.setItem(LS_UI, JSON.stringify(pick(['locale'], listener.getState().ui)))
+  }
+})

src/utils.ts

@@ -49,3 +49,6 @@ export const localeToFlag = (cc: string): string => {
     .map(ch => String.fromCodePoint(ch.charCodeAt(0) + 0x1F1A5))
     .join('')
 }
+
+export const pick = (keys: string[], object: Record<string, any>): Record<string, any> =>
+  keys.reduce((acc, key) => ({ ...acc, [key]: object[key] }), {})