Fields. Timezone context

src/components/App/TimezoneProvider.tsx

@@ -0,0 +1,20 @@
+import { createContext } from "preact";
+import { useContext } from "preact/compat";
+import { useState } from "preact/hooks";
+import { SystemZone } from "luxon";
+
+type TTimezoneContext = [string, (tz: string) => void];
+
+const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
+
+export const TimezoneProvider = ({ children }) => {
+    const [timezone, setTimezone] = useState(SystemZone.name);
+
+    return (
+        <TimezoneContext.Provider value={[timezone, setTimezone]}>
+            {children}
+        </TimezoneContext.Provider>
+    );
+};
+
+export const useTimezone = () => useContext(TimezoneContext);

src/components/App/index.tsx

@@ -4,27 +4,30 @@ import { Route, Router, Switch } from "wouter";
 import { Welcome } from "../Welcome";
 import { Guild } from "../Guild";
 import { FlashProvider } from "./FlashProvider";
+import { TimezoneProvider } from "./TimezoneProvider";
 
 export function App() {
     const queryClient = new QueryClient();
 
     return (
-        <FlashProvider>
-            <QueryClientProvider client={queryClient}>
-                <Router base={"/dashboard"}>
-                    <div class="columns is-gapless dashboard-frame">
-                        <Sidebar />
-                        <div class="column is-main-content">
-                            <Switch>
-                                <Route path={"/:guild/reminders"} component={Guild}></Route>
-                                <Route>
-                                    <Welcome />
-                                </Route>
-                            </Switch>
+        <TimezoneProvider>
+            <FlashProvider>
+                <QueryClientProvider client={queryClient}>
+                    <Router base={"/dashboard"}>
+                        <div class="columns is-gapless dashboard-frame">
+                            <Sidebar />
+                            <div class="column is-main-content">
+                                <Switch>
+                                    <Route path={"/:guild/reminders"} component={Guild}></Route>
+                                    <Route>
+                                        <Welcome />
+                                    </Route>
+                                </Switch>
+                            </div>
                         </div>
-                    </div>
-                </Router>
-            </QueryClientProvider>
-        </FlashProvider>
+                    </Router>
+                </QueryClientProvider>
+            </FlashProvider>
+        </TimezoneProvider>
     );
 }