use context for theme storage and providing

day-mon · Apr 28, 2024 · dae5187 · dae5187
1 parent afa32be
commit dae5187
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 45 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,19 +1,14 @@
-import { Component, createSignal } from "solid-js";
+import { Component, useContext } from "solid-js";
 import { Navbar } from "~/components/navbar";
+import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
 
 const App: Component = (props: any) => {
-  let preferredTheme = localStorage.getItem("theme");
-  const [theme, setTheme] = createSignal(preferredTheme ? preferredTheme : "blackout");
-
-  const changeThemeCallback = (theme: string) => {
-    setTheme(theme);
-    localStorage.setItem("theme", theme);
-  };
+  const themeContext: IThemeContext = useContext(ThemeContext);
 
   return (
     <>
-      <div class={`flex flex-col min-h-screen bg-primary ${theme()}`}>
-        <Navbar theme={theme()} callback={changeThemeCallback} />
+      <div class={`flex flex-col min-h-screen bg-primary ${themeContext.theme}`}>
+        <Navbar />
         {props.children}
       </div>
     </>

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
@@ -1,28 +1,16 @@
 import { Link } from "./link";
-import { Component, createSignal, For } from "solid-js";
+import { For } from "solid-js";
 import { Settings } from "~/components/settings.tsx";
-import { useLocation } from '@solidjs/router';
-
-interface Props {
-  theme: string;
-  callback: (theme: string) => void;
-}
+import { useLocation } from "@solidjs/router";
 
 interface Route {
   path: string;
   display: string;
 }
 
-export const Navbar: Component<Props> = (props: Props) => {
-  // let storedPreference = localStorage.getItem('theme');
-  const [theme, setTheme] = createSignal(props.theme);
+export function Navbar() {
   const location = useLocation();
 
-  const changeTheme = (theme: string) => {
-    setTheme(theme);
-    props.callback(theme);
-  };
-
   const routes = [
     {
       path: "/games",
@@ -45,15 +33,15 @@ export const Navbar: Component<Props> = (props: Props) => {
             {route => (
               <Link
                 href={route.path}
-                class={`font-medium hover:underline underline-offset-4 ${location.pathname === route.path ? 'font-extrabold' : ''}`}
+                class={`font-medium hover:underline underline-offset-4 ${location.pathname === route.path ? "font-extrabold" : ""}`}
               >
                 {route.display}
               </Link>
             )}
           </For>
-          <Settings theme={theme()} callback={changeTheme} />
+          <Settings />
         </nav>
       </header>
     </>
   );
-};
+}
diff --git a/ui/src/components/settings.tsx b/ui/src/components/settings.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, useContext } from "solid-js";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -14,31 +14,28 @@ import {
   SelectValue
 } from "~/components/ui/select.tsx";
 import { OcGear3 } from "solid-icons/oc";
+import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
 
-export interface SettingsProps extends ComponentProps<"div"> {
-  theme: string;
-  callback: (theme: string) => void;
-}
-
-export function Settings(props: SettingsProps) {
+export function Settings() {
   const availableThemes = ["blackout", "logan", "lavender", "light", "blue"];
+  const themeContext: IThemeContext = useContext(ThemeContext);
 
   return (
     <AlertDialog>
       <AlertDialogTrigger>
         <OcGear3 class="w-6 h-6" />
       </AlertDialogTrigger>
       <AlertDialogContent
-        class={`bg-primary dark:bg-blackout text-100 dark:text-white ${props.theme}`}
+        class={`bg-primary dark:bg-blackout text-100 dark:text-white ${themeContext.theme}`}
       >
         <AlertDialogTitle class="font-bold text-100 light:text-black underline underline-offset-2">
           Settings
         </AlertDialogTitle>
         <AlertDialogDescription>
           <label class="block text-sm font-medium mb-2 text-100 light:text-black">Theme</label>
           <Select
-            value={props.theme}
-            onChange={props.callback}
+            value={themeContext.theme}
+            onChange={themeContext.setTheme}
             options={availableThemes}
             placeholder="Select a theme"
             itemComponent={props => (
@@ -51,7 +48,7 @@ export function Settings(props: SettingsProps) {
             <SelectTrigger aria-label="Theme" class="w-[180px] bg-secondary">
               <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
             </SelectTrigger>
-            <SelectContent class={`bg-secondary text-100 light:text-black ${props.theme}`} />
+            <SelectContent class={`bg-secondary text-100 light:text-black ${themeContext.theme}`} />
           </Select>
         </AlertDialogDescription>
       </AlertDialogContent>

diff --git a/ui/src/context/ThemeContext.tsx b/ui/src/context/ThemeContext.tsx
@@ -0,0 +1,26 @@
+import { createContext, JSXElement } from "solid-js";
+import { createStore } from "solid-js/store";
+
+export interface ThemeContextProviderProps {
+  children?: JSXElement;
+}
+
+export interface IThemeContext {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+export const ThemeContext = createContext({} as IThemeContext);
+
+export function ThemeContextProvider(props: ThemeContextProviderProps) {
+  let preferredTheme = localStorage.getItem("accuribet-theme");
+  const [themeStore, setThemeStore] = createStore<IThemeContext>({
+    theme: preferredTheme ? preferredTheme : "blackout",
+    setTheme(theme: string) {
+      localStorage.setItem("accuribet-theme", theme);
+      setThemeStore("theme", theme);
+    }
+  });
+
+  return <ThemeContext.Provider value={themeStore}>{props.children}</ThemeContext.Provider>;
+}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -9,17 +9,20 @@ import { History } from "~/pages/History";
 import { Notfound } from "~/pages/Notfound.tsx";
 
 import "./index.css";
+import { ThemeContextProvider } from "~/context/ThemeContext.tsx";
 
 const root = document.getElementById("root") as HTMLElement;
 
 render(
   () => (
-    <Router root={App}>
-      <Route path="/" component={Home} />
-      <Route path="/games" component={Games} />
-      <Route path="/history" component={History} />
-      <Route path="*" component={Notfound} />
-    </Router>
+    <ThemeContextProvider>
+      <Router root={App}>
+        <Route path="/" component={Home} />
+        <Route path="/games" component={Games} />
+        <Route path="/history" component={History} />
+        <Route path="*" component={Notfound} />
+      </Router>
+    </ThemeContextProvider>
   ),
   root!
 );