Minor improvements on forms setup (#435)

Co-authored-by: Kent C. Dodds <[email protected]>
epicweb-dev · Sep 22, 2023 · b8f146b · b8f146b
1 parent b6a0b6f
commit b8f146b
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 44 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -51,7 +51,6 @@ import {
 	combineHeaders,
 	getDomainUrl,
 	getUserImgSrc,
-	invariantResponse,
 } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
 import { useRequestInfo } from './utils/request-info.ts'
@@ -173,16 +172,11 @@ const ThemeFormSchema = z.object({
 
 export async function action({ request }: DataFunctionArgs) {
 	const formData = await request.formData()
-	invariantResponse(
-		formData.get('intent') === 'update-theme',
-		'Invalid intent',
-		{ status: 400 },
-	)
 	const submission = parse(formData, {
 		schema: ThemeFormSchema,
 	})
 	if (submission.intent !== 'submit') {
-		return json({ status: 'success', submission } as const)
+		return json({ status: 'idle', submission } as const)
 	}
 	if (!submission.value) {
 		return json({ status: 'error', submission } as const, { status: 400 })
@@ -365,10 +359,7 @@ export function useTheme() {
  */
 export function useOptimisticThemeMode() {
 	const fetchers = useFetchers()
-
-	const themeFetcher = fetchers.find(
-		f => f.formData?.get('intent') === 'update-theme',
-	)
+	const themeFetcher = fetchers.find(f => f.formAction === '/')
 
 	if (themeFetcher && themeFetcher.formData) {
 		const submission = parse(themeFetcher.formData, {
@@ -384,9 +375,6 @@ function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {
 	const [form] = useForm({
 		id: 'theme-switch',
 		lastSubmission: fetcher.data?.submission,
-		onValidate({ formData }) {
-			return parse(formData, { schema: ThemeFormSchema })
-		},
 	})
 
 	const optimisticMode = useOptimisticThemeMode()
@@ -416,8 +404,6 @@ function ThemeSwitch({ userPreference }: { userPreference?: Theme | null }) {
 			<input type="hidden" name="theme" value={nextMode} />
 			<div className="flex gap-2">
 				<button
-					name="intent"
-					value="update-theme"
 					type="submit"
 					className="flex h-8 w-8 cursor-pointer items-center justify-center"
 				>

diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
@@ -203,7 +203,7 @@ export async function action({ request }: DataFunctionArgs) {
 				const session = await login(data)
 				if (!session) {
 					ctx.addIssue({
-						code: 'custom',
+						code: z.ZodIssueCode.custom,
 						message: 'Invalid username or password',
 					})
 					return z.NEVER

diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
@@ -49,7 +49,7 @@ const SignupFormSchema = z
 		if (confirmPassword !== password) {
 			ctx.addIssue({
 				path: ['confirmPassword'],
-				code: 'custom',
+				code: z.ZodIssueCode.custom,
 				message: 'The passwords must match',
 			})
 		}

diff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx
@@ -177,22 +177,21 @@ async function validateRequest(
 	body: URLSearchParams | FormData,
 ) {
 	const submission = await parse(body, {
-		schema: () =>
-			VerifySchema.superRefine(async (data, ctx) => {
-				const codeIsValid = await isCodeValid({
-					code: data[codeQueryParam],
-					type: data[typeQueryParam],
-					target: data[targetQueryParam],
+		schema: VerifySchema.superRefine(async (data, ctx) => {
+			const codeIsValid = await isCodeValid({
+				code: data[codeQueryParam],
+				type: data[typeQueryParam],
+				target: data[targetQueryParam],
+			})
+			if (!codeIsValid) {
+				ctx.addIssue({
+					path: ['code'],
+					code: z.ZodIssueCode.custom,
+					message: `Invalid code`,
 				})
-				if (!codeIsValid) {
-					ctx.addIssue({
-						path: ['code'],
-						code: z.ZodIssueCode.custom,
-						message: `Invalid code`,
-					})
-					return
-				}
-			}),
+				return
+			}
+		}),
 		async: true,
 	})
 

diff --git a/app/routes/settings+/profile.change-email.tsx b/app/routes/settings+/profile.change-email.tsx
@@ -106,7 +106,7 @@ export async function action({ request }: DataFunctionArgs) {
 			if (existingUser) {
 				ctx.addIssue({
 					path: ['email'],
-					code: 'custom',
+					code: z.ZodIssueCode.custom,
 					message: 'This email is already in use.',
 				})
 			}

diff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
@@ -185,7 +185,7 @@ async function profileUpdateAction({ userId, formData }: ProfileActionArgs) {
 			if (existingUsername && existingUsername.id !== userId) {
 				ctx.addIssue({
 					path: ['username'],
-					code: 'custom',
+					code: z.ZodIssueCode.custom,
 					message: 'A user already exists with this username',
 				})
 			}

diff --git a/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx
@@ -34,7 +34,7 @@ const ChangePasswordForm = z
 		if (confirmNewPassword !== newPassword) {
 			ctx.addIssue({
 				path: ['confirmNewPassword'],
-				code: 'custom',
+				code: z.ZodIssueCode.custom,
 				message: 'The passwords must match',
 			})
 		}
@@ -69,7 +69,7 @@ export async function action({ request }: DataFunctionArgs) {
 					if (!user) {
 						ctx.addIssue({
 							path: ['currentPassword'],
-							code: 'custom',
+							code: z.ZodIssueCode.custom,
 							message: 'Incorrect password.',
 						})
 					}

diff --git a/app/routes/settings+/profile.password_.create.tsx b/app/routes/settings+/profile.password_.create.tsx
@@ -28,7 +28,7 @@ const CreatePasswordForm = z
 		if (confirmNewPassword !== newPassword) {
 			ctx.addIssue({
 				path: ['confirmNewPassword'],
-				code: 'custom',
+				code: z.ZodIssueCode.custom,
 				message: 'The passwords must match',
 			})
 		}

diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
@@ -89,7 +89,7 @@ export async function action({ request }: DataFunctionArgs) {
 			})
 			if (!note) {
 				ctx.addIssue({
-					code: 'custom',
+					code: z.ZodIssueCode.custom,
 					message: 'Note not found',
 				})
 			}

diff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -1,5 +1,5 @@
 import { useForm } from '@conform-to/react'
-import { getFieldsetConstraint, parse } from '@conform-to/zod'
+import { parse } from '@conform-to/zod'
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import {
 	Form,
@@ -164,10 +164,6 @@ export function DeleteNote({ id }: { id: string }) {
 	const [form] = useForm({
 		id: 'delete-note',
 		lastSubmission: actionData?.submission,
-		constraint: getFieldsetConstraint(DeleteFormSchema),
-		onValidate({ formData }) {
-			return parse(formData, { schema: DeleteFormSchema })
-		},
 	})
 
 	return (