Use local storage for guest user preferences

apps/web/src/contexts/preferences.tsx

@@ -2,18 +2,21 @@
 
 import type { TimeFormat } from "@rallly/database";
 import React from "react";
-import { useSetState } from "react-use";
+import { useLocalStorage } from "react-use";
+import { z } from "zod";
 
 import { useRequiredContext } from "@/components/use-required-context";
 import { useUser } from "@/components/user-provider";
 import { trpc } from "@/trpc/client";
 
 type Preferences = {
-  timeZone?: string | null;
+  timeZone?: string;
-  timeFormat?: TimeFormat | null;
+  timeFormat?: TimeFormat;
-  weekStart?: number | null;
+  weekStart?: number;
 };
 
+const timeFormatSchema = z.enum(["hours12", "hours24"]);
+
 type PreferencesContextValue = {
   preferences: Preferences;
   updatePreferences: (preferences: Partial<Preferences>) => Promise<void>;
@@ -31,15 +34,46 @@ export const PreferencesProvider = ({
   initialValue: Partial<Preferences>;
 }) => {
   const { user } = useUser();
-  const [preferences, setPreferences] = useSetState<Preferences>(initialValue);
+  const [preferredTimezone, setPreferredTimezone] = useLocalStorage(
+    "rallly.preferredTimezone",
+    initialValue.timeZone,
+  );
+  const [preferredTimeFormat, setPreferredTimeFormat] = useLocalStorage(
+    "rallly.preferredTimeFormat",
+    initialValue.timeFormat,
+    {
+      raw: false,
+      serializer: timeFormatSchema.parse,
+      deserializer: timeFormatSchema.optional().catch(undefined).parse,
+    },
+  );
+  const [preferredWeekStart, setPreferredWeekStart] = useLocalStorage(
+    "rallly.preferredWeekStart",
+    initialValue.weekStart,
+  );
   const updatePreferences = trpc.user.updatePreferences.useMutation();
 
   return (
     <PreferencesContext.Provider
       value={{
-        preferences,
+        preferences: {
+          timeZone: preferredTimezone,
+          timeFormat: preferredTimeFormat,
+          weekStart: preferredWeekStart,
+        },
         updatePreferences: async (newPreferences) => {
-          setPreferences(newPreferences);
+          if (newPreferences.timeZone) {
+            setPreferredTimezone(newPreferences.timeZone);
+          }
+
+          if (newPreferences.timeFormat) {
+            setPreferredTimeFormat(newPreferences.timeFormat);
+          }
+
+          if (newPreferences.weekStart) {
+            setPreferredWeekStart(newPreferences.weekStart);
+          }
+
           if (!user.isGuest) {
             await updatePreferences.mutateAsync({
               timeZone: newPreferences.timeZone ?? undefined,