🧹 Refactor setAndSaveTheme in its own hook

code/frontend/src/App.js

@@ -10,50 +10,11 @@ import PageRepositories from "./routes/PageRepositories"
 import PageAlerts from "./routes/PageAlerts"
 import PageSettings from "./routes/PageSettings"
 import PageSandbox from "./routes/PageSandbox"
+import useSavedTheme from "./hooks/useSavedTheme"
 
 
 export default function App() {
-    const loadTheme = () => {
+    const [theme, setAndSaveTheme] = useSavedTheme();
-        if(localStorage) {
-            console.debug(`Loading theme from localStorage...`)
-            let value = localStorage.getItem("theme")
-
-            if(value) {
-                console.debug(`Loaded theme ${value}!`)
-                return value
-            }
-            else {
-                console.debug(`There is no theme stored in the localStorage; setting to "ThemeDark"...`)
-                return "ThemeDark"
-            }
-        }
-        else {
-            console.warn(`Can't load theme; localStorage doesn't seem to be available; setting to "ThemeDark"...`)
-            return "ThemeDark"
-        }
-    }
-
-    const [theme, _setTheme] = useState(loadTheme());
-
-    const setTheme = (value) => {
-        console.debug(`Changing theme to ${value}...`)
-        _setTheme(value)
-    }
-
-    const saveTheme = (value) => {
-        if(localStorage) {
-            console.debug(`Saving theme ${value} to localStorage...`)
-            localStorage.setItem("theme", value)
-        }
-        else {
-            console.warn(`Can't save theme; localStorage doesn't seem to be available...`)
-        }
-    }
-
-    const setAndSaveTheme = (value) => {
-        setTheme(value)
-        saveTheme(value)
-    }
 
     return (
         <ContextTheme.Provider value={[theme, setAndSaveTheme]}>

code/frontend/src/hooks/useSavedTheme.js

@@ -0,0 +1,48 @@
+import { useState } from "react"
+
+
+export default function useSavedTheme() {
+    const loadTheme = () => {
+        if(localStorage) {
+            console.debug(`Loading theme from localStorage...`)
+            let value = localStorage.getItem("theme")
+
+            if(value) {
+                console.debug(`Loaded theme ${value}!`)
+                return value
+            }
+            else {
+                console.debug(`There is no theme stored in the localStorage; setting to "ThemeDark"...`)
+                return "ThemeDark"
+            }
+        }
+        else {
+            console.warn(`Can't load theme; localStorage doesn't seem to be available; setting to "ThemeDark"...`)
+            return "ThemeDark"
+        }
+    }
+
+    const [theme, _setTheme] = useState(loadTheme());
+
+    const setTheme = (value) => {
+        console.debug(`Changing theme to ${value}...`)
+        _setTheme(value)
+    }
+
+    const saveTheme = (value) => {
+        if(localStorage) {
+            console.debug(`Saving theme ${value} to localStorage...`)
+            localStorage.setItem("theme", value)
+        }
+        else {
+            console.warn(`Can't save theme; localStorage doesn't seem to be available...`)
+        }
+    }
+
+    const setAndSaveTheme = (value) => {
+        setTheme(value)
+        saveTheme(value)
+    }
+
+    return [theme, setAndSaveTheme]
+}