fix: replace contextualise with zustand stores

Author: debater-coder

src/components/DTTPeriod/DTTPeriod.tsx

@@ -1,8 +1,8 @@
 import { chakra, useBoolean, useMediaQuery } from "@chakra-ui/react";
 import { DateTime } from "luxon";
 import { useState } from "react";
-import useSettings from "../../hooks/useSettings";
 import { TimetablPeriod } from "../../services/sbhsApi/types";
+import { useSettingsStore } from "../../stores/settings";
 import { Period } from "../Period";
 
 export const DTTPeriod = ({
@@ -14,13 +14,13 @@ export const DTTPeriod = ({
   isLoaded: boolean;
   active: boolean;
 }) => {
-  const {
-    showTimesInsteadOfRooms,
-    expanded: defaultExpanded,
-    hoverExpand,
-    periodColours,
-  } = useSettings();
-  const [expanded, setExpanded] = useBoolean(defaultExpanded === "true");
+  const showTimesInsteadOfRooms = useSettingsStore(
+    (state) => state.showTimesInsteadOfRooms
+  );
+  const defaultExpanded = useSettingsStore((state) => state.expanded);
+  const hoverExpand = useSettingsStore((state) => state.hoverExpand);
+  const periodColours = useSettingsStore((state) => state.periodColours);
+  const [expanded, setExpanded] = useBoolean(defaultExpanded);
   const [hoverable] = useMediaQuery("(any-hover: hover)");
   const [hoverTimeout, setHoverTimeout] = useState<ReturnType<
     typeof setTimeout
@@ -48,7 +48,7 @@ export const DTTPeriod = ({
       }
       isLoaded={isLoaded}
       rightContent={
-        showTimesInsteadOfRooms === "true" ? (
+        showTimesInsteadOfRooms ? (
           period?.time?.toLocaleString(DateTime.TIME_SIMPLE)
         ) : period.room ? (
           <chakra.span
@@ -66,7 +66,7 @@ export const DTTPeriod = ({
       expandedContent={
         <>
           at{" "}
-          {showTimesInsteadOfRooms !== "true"
+          {showTimesInsteadOfRooms
             ? period?.time?.toLocaleString(DateTime.TIME_SIMPLE)
             : period.room}{" "}
           with{" "}
@@ -87,7 +87,7 @@ export const DTTPeriod = ({
       expandedSize={"xs"}
       expandedWeight={"semibold"}
       onMouseEnter={
-        hoverable && hoverExpand === "true"
+        hoverable && hoverExpand
           ? () => {
               setHoverTimeout(
                 setTimeout(() => {
@@ -99,7 +99,7 @@ export const DTTPeriod = ({
           : undefined
       }
       onMouseLeave={
-        hoverable && hoverExpand === "true"
+        hoverable && hoverExpand
           ? () => {
               if (hoverTimeout) {
                 clearTimeout(hoverTimeout);

src/hooks/useSettings.tsx

@@ -8,14 +8,14 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import reportWebVitals from "./reportWebVitals";
 import { sendToVercelAnalytics } from "./vitals";
-import useSettings, { SettingsProvider } from "./hooks/useSettings";
 import { inject } from "@vercel/analytics";
 import { log } from "./utils/log";
 import { ToastContainer } from "./toast";
 import "@fontsource/poppins";
 import { createRouter } from "./createRouter";
 import { persister, queryClient } from "./createQueryClient";
 import { sbhsAuthActions } from "./stores/auth";
+import { useSettingsStore } from "./stores/settings";
 
 // Redirect to new domain if using old domain
 if (window.location.host === "timetabl.vercel.app") {
@@ -30,9 +30,9 @@ if (window.location.host === "timetabl.vercel.app") {
  * A wrapper around the `ChakraProvider` component which generates the theme from settings and passes it to the the `ChakraProvider`.
  */
 const ChakraWrapper = ({ ...props }) => {
-  const { primary } = useSettings();
+  const primary = useSettingsStore((state) => state.primary);
 
-  const theme = themeGen(primary as keyof typeof themeGen);
+  const theme = themeGen(primary);
 
   return <ChakraProvider theme={theme} {...props} />;
 };
@@ -49,16 +49,14 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         },
       }}
     >
-      <SettingsProvider>
-        <ChakraWrapper>
-          <ColorModeScript
-            initialColorMode={themeGen().config.initialColorMode}
-          />
-          <RouterProvider router={createRouter(queryClient)} />
-          <ToastContainer />
-          <ReactQueryDevtools initialIsOpen={false} />
-        </ChakraWrapper>
-      </SettingsProvider>
+      <ChakraWrapper>
+        <ColorModeScript
+          initialColorMode={themeGen().config.initialColorMode}
+        />
+        <RouterProvider router={createRouter(queryClient)} />
+        <ToastContainer />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </ChakraWrapper>
     </PersistQueryClientProvider>
   </StrictMode>
 );

src/main.tsx

@@ -29,12 +29,32 @@ import { useState } from "react";
 import { DateTime } from "luxon";
 import { Search2Icon } from "@chakra-ui/icons";
 import { micromark } from "micromark";
-import { usePersistentState } from "../../../hooks/useSettings";
 import { TimetablNotice, NoticeYear } from "../../../services/sbhsApi/types";
 import { useTimetablNews } from "../../../services/timetablCms/useTimetablNews";
 import { useDailyNotices } from "../../../services/sbhsApi/useDailyNotices";
 import Empty from "../../../components/Empty";
 import { MegaphoneSimple } from "phosphor-react";
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+
+type AnnouncementState = {
+  year: NoticeYear;
+  setYear: (year: NoticeYear) => void;
+};
+
+const useAnnouncementStore = create<AnnouncementState>()(
+  devtools(
+    persist(
+      (set): AnnouncementState => ({
+        year: NoticeYear.ALL,
+        setYear: (year) => set({ year }),
+      }),
+      {
+        name: "announcement-storage",
+      }
+    )
+  )
+);
 
 const filterNotices = (
   notices: TimetablNotice[],
@@ -173,6 +193,8 @@ function DailyNotices({
 }
 
 export default function Announcements() {
+  const { year, setYear } = useAnnouncementStore();
+
   const { data: timetablNews, isLoading: timetablNewsLoaded } = useTimetablNews(
     {}
   );
@@ -185,10 +207,6 @@ export default function Announcements() {
     setTabIndex(index);
   };
 
-  const [filter, setFilter] = usePersistentState(
-    "announcementsFilter",
-    "" + NoticeYear.ALL
-  );
   const [query, setQuery] = useState("");
 
   return (
@@ -221,8 +239,8 @@ export default function Announcements() {
         >
           <FormLabel mb="0">Filter</FormLabel>
           <Select
-            onChange={(event) => setFilter(event.target.value)}
-            value={filter}
+            onChange={(event) => setYear(parseInt(event.target.value))}
+            value={year}
           >
             <option value={NoticeYear.ALL}>All</option>
             <option value={NoticeYear.YEAR7}>Year 7</option>
@@ -249,7 +267,7 @@ export default function Announcements() {
           {[0, 1].map((tab) => (
             <TabPanel key={tab}>
               <DailyNotices
-                filter={parseInt(filter)}
+                filter={year}
                 query={query}
                 tab={tab}
                 timetablNews={timetablNews}

src/routes/Main/Announcements/Announcements.tsx

@@ -26,21 +26,19 @@ export default function Home() {
   const [date, setDate] = useState<string>("initial");
   const resetDate = () => setDate("initial");
   const nextDay = () => {
-    setDate(
-      DateTime.fromISO(date === "initial" ? initialDate : date)
-        .plus({ days: 1 })
-        .toISODate()
-    );
-    if (date === initialDate) resetDate();
+    const newDate = DateTime.fromISO(date === "initial" ? initialDate : date)
+      .plus({ days: 1 })
+      .toISODate();
+    setDate(newDate);
+    if (newDate === initialDate) resetDate();
   };
 
   const previousDay = () => {
-    setDate(
-      DateTime.fromISO(date === "initial" ? initialDate : date)
-        .minus({ days: 1 })
-        .toISODate()
-    );
-    if (date === initialDate) resetDate();
+    const newDate = DateTime.fromISO(date === "initial" ? initialDate : date)
+      .minus({ days: 1 })
+      .toISODate();
+    setDate(newDate);
+    if (newDate === initialDate) resetDate();
   };
 
   const { data, isLoading } = useDtt(

src/routes/Main/Home/Home.tsx

@@ -1,9 +1,9 @@
 import { DateTime } from "luxon";
 import { useEffect } from "react";
 import { Period } from "../../../components/Period/Period";
-import useSettings from "../../../hooks/useSettings";
 import { useToken, useColorModeValue } from "@chakra-ui/react";
 import { TimetablPeriod } from "../../../services/sbhsApi/types";
+import { useSettingsStore } from "../../../stores/settings";
 
 type NextPeriodProps = {
   periods: TimetablPeriod[];
@@ -36,7 +36,10 @@ export default ({
     return () => clearInterval(timer);
   });
 
-  const { showTimesInsteadOfRooms, periodColours } = useSettings();
+  const showTimesInsteadOfRooms = useSettingsStore(
+    (state) => state.showTimesInsteadOfRooms
+  );
+  const periodColours = useSettingsStore((state) => state.periodColours);
 
   return (
     <Period
@@ -52,7 +55,7 @@ export default ({
       leftContent={nextPeriod.name}
       leftContentSize={"lg"}
       rightContent={
-        showTimesInsteadOfRooms === "true"
+        showTimesInsteadOfRooms
           ? nextPeriod?.time?.toLocaleString(DateTime.TIME_SIMPLE)
           : nextPeriod.room ??
             nextPeriod?.time?.toLocaleString(DateTime.TIME_SIMPLE)