feat: change zod schema for form validation in local persistence

Author: csantosr

app/[lang]/game/_store/game-settings.ts

@@ -1,11 +1,34 @@
+import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
-import type { LocalGameFormSchema } from '@/game/local/setup/_components/form';
+import type { DeepPartial } from 'react-hook-form';
+import type { LocalGameFormSchema } from '../local/setup/_components/form';
 
-export const gameSettingsAtom = atomWithStorage<LocalGameFormSchema>(
+const baseGameSettingsAtom = atomWithStorage<LocalGameFormSchema>(
   'gameSettings',
   {
     players: [],
     numberOfSpies: '1',
     randomNumberOfSpies: false,
   },
 );
+
+export const gameSettingsAtom = atom(
+  (get) => get(baseGameSettingsAtom),
+  (
+    get,
+    set,
+    update:
+      | DeepPartial<LocalGameFormSchema>
+      | ((prev: LocalGameFormSchema) => LocalGameFormSchema),
+  ) => {
+    const newValue =
+      typeof update === 'function' ? update(get(baseGameSettingsAtom)) : update;
+    set(baseGameSettingsAtom, {
+      players: (newValue.players ?? []).map((player) => ({
+        name: player?.name ?? '',
+      })),
+      numberOfSpies: newValue.numberOfSpies ?? '1',
+      randomNumberOfSpies: newValue.randomNumberOfSpies ?? false,
+    });
+  },
+);

app/[lang]/game/local/setup/_components/form.tsx

@@ -76,18 +76,12 @@ export const LocalUsersForm: FC<{ dict: Dictionary; lang: string }> = ({
 
   useEffect(() => {
     const { unsubscribe } = form.watch((value) => {
-      const result = localGameFormSchema.safeParse(value);
-      if (form.formState.isDirty && result.success) {
-        setGameSettings(result.data);
+      if (form.formState.isDirty) {
+        setGameSettings(value);
       }
     });
     return () => unsubscribe();
-  }, [
-    form.watch,
-    form.formState.isDirty,
-    localGameFormSchema,
-    setGameSettings,
-  ]);
+  }, [form.watch, form.formState.isDirty, setGameSettings]);
 
   useEffect(() => {
     if (hasHydrated.current) {