simplify useStoredTheme

tank-frontend/src/App.tsx

@@ -34,7 +34,7 @@ export default function App() {
     return <Column className='flex-grow'>
         <Row>
             <h1 className='flex-grow'>CCCB-Tanks!</h1>
-            <Button text='change colors' onClick={() => setTheme(getRandomTheme())} />
+            <Button text='change colors' onClick={() => setTheme(_ => getRandomTheme())}/>
             <Button
                 onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
                 text='GitHub'/>

tank-frontend/src/theme.ts

@@ -50,10 +50,9 @@ function angle(a: number) {
     return ((a % 360.0) + 360) % 360;
 }
 
-const goldenAngle = 180 * (3 - Math.sqrt(5));
-
-
 export function getRandomTheme(): Theme {
+    const goldenAngle = 180 * (3 - Math.sqrt(5));
+
     const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 40});
 
     const primary = getRandomHsl({minSaturation: background.s * 1.2, minLightness: background.l + 20});
@@ -65,16 +64,16 @@ export function getRandomTheme(): Theme {
     return {background, primary, secondary};
 }
 
-export function useStoredTheme(): [Theme, (theme: Theme) => void] {
-    const [theme, setSavedTheme] = useStoredObjectState<Theme>('theme', getRandomTheme);
-
-    function setTheme(theme: Theme) {
-        console.log('set theme', theme);
-        rootStyle.setProperty('--color-primary', hslToString(theme.primary));
-        rootStyle.setProperty('--color-secondary', hslToString(theme.secondary));
-        rootStyle.setProperty('--color-background', hslToString(theme.background));
-        setSavedTheme(_ => theme);
-    }
-
-    return [theme, setTheme];
+function applyTheme(theme: Theme) {
+    console.log('apply theme', theme);
+    rootStyle.setProperty('--color-primary', hslToString(theme.primary));
+    rootStyle.setProperty('--color-secondary', hslToString(theme.secondary));
+    rootStyle.setProperty('--color-background', hslToString(theme.background));
+}
+
+export function useStoredTheme() {
+    return useStoredObjectState<Theme>('theme', getRandomTheme, {
+        load: applyTheme,
+        save: applyTheme
+    });
 }

tank-frontend/src/useStoredState.ts

@@ -13,23 +13,37 @@ export function useStoredState(storageKey: string, initialState: () => string):
 
 export function useStoredObjectState<T>(
     storageKey: string,
-    initialState: () => T
+    initialState: () => T,
+    options?: {
+        load?: (value: T) => void;
+        save?: (value: T) => void;
+    }
 ): [T, (mutator: (oldState: T) => T) => void] {
     const getInitialState = () => {
         const localStorageJson = localStorage.getItem(storageKey);
-        if (localStorageJson !== null && localStorageJson !== '') {
-            return JSON.parse(localStorageJson) as T;
-        }
 
-        return initialState();
+        let result = (localStorageJson !== null && localStorageJson !== '')
+            ? JSON.parse(localStorageJson) as T
+            : initialState();
+
+        if (options?.load)
+            options.load(result);
+
+        return result;
     };
 
     const [state, setState] = useState<T>(getInitialState);
 
     const setSavedState = (mut: (oldState: T) => T) => {
-        const newState = mut(state);
-        localStorage.setItem(storageKey, JSON.stringify(newState));
-        setState(newState);
+        setState(prevState => {
+            const newState = mut(prevState);
+
+            if (options?.save)
+                options.save(newState);
+
+            localStorage.setItem(storageKey, JSON.stringify(newState));
+            return newState;
+        });
     };
 
     return [state, setSavedState];