CC-49: Fix how forced values are applied in forms

package.json

@@ -39,6 +39,7 @@
     "@tanstack/react-store": "^0.7.0",
     "@tanstack/store": "^0.7.0",
     "@types/iso-3166-2": "^1.0.3",
+    "@types/lodash": "^4.17.24",
     "browser-image-compression": "^2.0.2",
     "change-case": "^5.4.4",
     "clsx": "^2.1.1",
@@ -55,6 +56,7 @@
     "image-blob-reduce": "^4.1.0",
     "iso-3166-2": "^1.0.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lodash": "^4.18.1",
     "lucide-react": "^0.572.0",
     "nanoid": "^5.1.5",
     "nuqs": "^2.7.3",

src/components/ChangeEmailForm/ChangeEmailForm.tsx

@@ -53,7 +53,7 @@ export const ChangeEmailForm = ({
   }, [isDirty, setDirty]);
 
   const handleSubmit: SubmitHandler<FormData> = async (formData): Promise<void> => {
-    const validFormData = validateForm(schema, formData, form.setError);
+    const validFormData = validateForm(schema, formData, form);
     if (validFormData) {
       onSubmit(validFormData);
     }

src/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -56,7 +56,7 @@ export const ChangePasswordForm = ({
   }, [isDirty, setDirty]);
 
   const handleSubmit: SubmitHandler<FormData> = async (formData): Promise<void> => {
-    const validFormData = validateForm(schema, formData, form.setError);
+    const validFormData = validateForm(schema, formData, form);
     if (validFormData) {
       onSubmit({ currentPassword: validFormData.currentPassword, password: validFormData.password });
     }

src/components/ListCommentForm/ListCommentForm.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Button, InputTextArea } from '@ianpaschal/combat-command-components';
 import clsx from 'clsx';
+import { merge } from 'lodash';
 import {
   MessageCircle,
   MessageCircleCheck,
@@ -49,11 +50,7 @@ export const ListCommentForm = ({
 }: ListCommentFormProps): JSX.Element => {
   const user = useAuth();
   const form = useForm<FormData>({
-    defaultValues: {
-      ...defaultValues,
-      ...existingValues,
-      ...forcedValues,
-    },
+    defaultValues: merge({}, defaultValues, existingValues, forcedValues),
     mode: 'onSubmit',
   });
 
@@ -64,35 +61,23 @@ export const ListCommentForm = ({
   }, [isDirty, setDirty]);
 
   const handleSubmit: SubmitHandler<FormData> = async (formData): Promise<void> => {
-    const validFormData = validateForm(schema, {
-      ...formData,
-      ...forcedValues,
-      userId: user?._id,
-    }, form.setError);
+    const validFormData = validateForm(schema, merge({}, formData, forcedValues, { userId: user?._id }), form);
     if (validFormData) {
       onSubmit({ ...validFormData });
       form.reset();
     }
   };
 
   const handleApprove = (): void => {
-    const validFormData = validateForm(schema, {
-      ...form.watch(),
-      ...forcedValues,
-      userId: user?._id,
-    }, form.setError);
+    const validFormData = validateForm(schema, merge({}, form.watch(), forcedValues, { userId: user?._id }), form);
     if (validFormData) {
       onSubmit({ ...validFormData, control: 'approved' });
       form.reset();
     }
   };
 
   const handleReject = (): void => {
-    const validFormData = validateForm(schema, {
-      ...form.watch(),
-      ...forcedValues,
-      userId: user?._id,
-    }, form.setError);
+    const validFormData = validateForm(schema, merge({}, form.watch(), forcedValues, { userId: user?._id }), form);
     if (validFormData) {
       onSubmit({ ...validFormData, control: 'rejected' });
       form.reset();

src/components/ListForm/ListForm.tsx

@@ -3,6 +3,7 @@ import { useDropzone } from 'react-dropzone';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { getStyleClassNames, PdfViewer } from '@ianpaschal/combat-command-components';
 import clsx from 'clsx';
+import { merge } from 'lodash';
 import { Upload } from 'lucide-react';
 
 import { List } from '~/api';
@@ -48,11 +49,7 @@ export const ListForm = ({
 }: ListFormProps): JSX.Element => {
   const user = useAuth();
   const form = useForm<FormData>({
-    defaultValues: {
-      ...defaultValues,
-      ...existingValues,
-      ...forcedValues,
-    },
+    defaultValues: merge({}, defaultValues, existingValues, forcedValues),
     mode: 'onSubmit',
   });
 
@@ -63,11 +60,7 @@ export const ListForm = ({
   }, [isDirty, setDirty]);
 
   const handleSubmit: SubmitHandler<FormData> = async (formData): Promise<void> => {
-    const validFormData = validateForm(schema, {
-      ...formData,
-      ...forcedValues,
-      userId: user?._id,
-    }, form.setError);
+    const validFormData = validateForm(schema, merge({}, formData, forcedValues, { userId: user?._id }), form);
     if (validFormData) {
       onSubmit(validFormData);
     }

src/components/MatchResultForm/MatchResultForm.module.scss

@@ -21,7 +21,6 @@
   &_CoreFields {
     display: grid;
     grid-template-areas:
-      "player0Header player1Header"
       "player0Fields player1Fields"
       "matchResultDetails matchResultDetails";
     grid-template-columns: 1fr 1fr;
@@ -35,20 +34,10 @@
     margin-top: 1rem;
   }
 
-  &_Player0Header {
-    grid-area: player0Header;
-    text-align: center;
-  }
-
   &_Player0Fields {
     grid-area: player0Fields;
   }
 
-  &_Player1Header {
-    grid-area: player1Header;
-    text-align: center;
-  }
-
   &_Player1Fields {
     grid-area: player1Fields;
   }

src/components/MatchResultForm/MatchResultForm.schema.ts

@@ -18,16 +18,26 @@ export const createSchema = (gameSystem: GameSystem) => {
   return z.object({
     tournamentPairingId: z.union([z.null().transform(() => undefined), z.string().transform((val) => val as TournamentPairingId)]),
     player0Placeholder: z.optional(z.string()),
-    player0UserId: z.optional(z.string().transform((val) => val.length ? val as UserId : undefined)),
+    player0UserId: z.union([z.null().transform(() => undefined), z.undefined(), z.string().transform((val) => val.length ? val as UserId : undefined)]),
     player1Placeholder: z.optional(z.string()),
-    player1UserId: z.optional(z.string().transform((val) => val.length ? val as UserId : undefined)),
+    player1UserId: z.union([z.null().transform(() => undefined), z.undefined(), z.string().transform((val) => val.length ? val as UserId : undefined)]),
 
     // Non-editable
     gameSystem: z.nativeEnum(GameSystem),
     playedAt: z.number(),
   }).extend({
     details: matchResultDetails.schema,
     gameSystemConfig: gameSystemConfig.schema,
+  }).superRefine((data, ctx) => {
+    ([0, 1] as const).forEach((i) => {
+      if (!data[`player${i}UserId`] && !data[`player${i}Placeholder`]) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Required',
+          path: [`player${i}UserId`],
+        });
+      }
+    });
   });
 };
 

src/components/MatchResultForm/MatchResultForm.tsx

@@ -11,6 +11,7 @@ import {
   getGameSystemOptions,
 } from '@ianpaschal/combat-command-game-systems/common';
 import clsx from 'clsx';
+import { merge } from 'lodash';
 
 import { MatchResult } from '~/api';
 import { useAuth } from '~/components/AuthProvider';
@@ -61,11 +62,7 @@ export const MatchResultForm = ({
   } = useGetActiveTournamentPairingsByUser(currentUser ? { userId: currentUser._id } : 'skip');
 
   const form = useForm<FormData>({
-    defaultValues: {
-      ...defaultValues,
-      ...existingValues,
-      ...forcedValues,
-    },
+    defaultValues: merge({}, defaultValues, existingValues, forcedValues),
     mode: 'onSubmit',
   });
 
@@ -94,24 +91,19 @@ export const MatchResultForm = ({
       throw new Error('Cannot edit match results while not authenticated!');
     }
     const tournamentPairing = (tournamentPairings ?? []).find((r) => r._id === value);
-    form.reset({
-      ...defaultValues,
-      ...existingValues,
-      ...forcedValues,
-      ...(tournamentPairing ? {
-        player0Placeholder: tournamentPairing.tournamentCompetitor0 === null ? 'Bye' : '',
-        player0UserId: tournamentPairing.tournamentCompetitor0?.registrations[0].userId ?? currentUser?._id ?? null,
-        player1Placeholder: tournamentPairing.tournamentCompetitor1 === null ? 'Bye' : '',
-        player1UserId: tournamentPairing.tournamentCompetitor1?.registrations[0].userId ?? null,
-        tournamentPairingId: tournamentPairing._id,
-      } : {
-        player0Placeholder: '',
-        player0UserId: currentUser?._id ?? null,
-        player1Placeholder: '',
-        player1UserId: null,
-        tournamentPairingId: null,
-      }),
-    });
+    form.reset(merge({}, defaultValues, existingValues, forcedValues, tournamentPairing ? {
+      player0Placeholder: tournamentPairing.tournamentCompetitor0 === null ? 'Bye' : '',
+      player0UserId: tournamentPairing.tournamentCompetitor0?.registrations[0].userId ?? currentUser?._id ?? null,
+      player1Placeholder: tournamentPairing.tournamentCompetitor1 === null ? 'Bye' : '',
+      player1UserId: tournamentPairing.tournamentCompetitor1?.registrations[0].userId ?? null,
+      tournamentPairingId: tournamentPairing._id,
+    } : {
+      player0Placeholder: '',
+      player0UserId: currentUser?._id ?? null,
+      player1Placeholder: '',
+      player1UserId: null,
+      tournamentPairingId: null,
+    }));
   };
 
   const gameSystemOptions = getGameSystemOptions();
@@ -129,10 +121,8 @@ export const MatchResultForm = ({
   };
 
   const handleSubmit: SubmitHandler<FormData> = async (formData): Promise<void> => {
-    const validFormData = validateForm(createSchema(formData.gameSystem), {
-      ...formData,
-      ...forcedValues,
-    }, form.setError);
+    const submitData = merge({}, formData, forcedValues);
+    const validFormData = validateForm(createSchema(submitData.gameSystem), submitData, form);
     if (validFormData) {
       const score = getGameSystem(validFormData.gameSystem).calculateMatchResultScore(validFormData.details);
       openConfirmDialog({
@@ -188,13 +178,11 @@ export const MatchResultForm = ({
         </div>
       )}
       <div className={styles.MatchResultForm_CoreFields}>
-        <h2 className={styles.MatchResultForm_Player0Header}>Player 1</h2>
         <MatchResultPlayerFields
           className={styles.MatchResultForm_Player0Fields}
           index={0}
           tournamentPairing={selectedPairing}
         />
-        <h2 className={styles.MatchResultForm_Player1Header}>Player 2</h2>
         <MatchResultPlayerFields
           className={styles.MatchResultForm_Player1Fields}
           index={1}

src/components/MatchResultForm/components/PlayerField/PlayerField.module.scss

@@ -5,6 +5,16 @@
 @use "/src/style/text";
 @use "/src/style/flex";
 
+.Root {
+  @include flex.column($gap: var(--form-field-gap));
+}
+
+.Error {
+  font-weight: 300;
+  line-height: 1rem;
+  color: var(--text-color-negative);
+}
+
 .PlayerField {
   --padding: calc(1rem - var(--border-width));