improve redirect exercise

epicweb-dev · Aug 3, 2023 · 8141e0d · 8141e0d
1 parent f3bd28c
commit 8141e0d
Show file tree

Hide file tree

Showing 112 changed files with 232 additions and 121 deletions.
diff --git a/exercises/07.protecting-routes/03.problem.redirect/README.mdx b/exercises/07.protecting-routes/03.problem.redirect/README.mdx
@@ -14,6 +14,9 @@ That way, our `requireUserId` utility can take the `request.url` and create an
 appropriate `redirectTo` query param automatically when it redirects to the
 login page.
 
+🧝‍♂️ Supporting `redirectTo` in `/login` and `/signup` is exactly the same, so
+I'll do the `/signup` route for you. Deal? Cool 👍
+
 We'll also want to update the link from our `/login` page to the `/signup` page
 so if the user needs to create an account instead, the `redirectTo` will carry
 over to that page too.

diff --git a/exercises/07.protecting-routes/03.problem.redirect/app/routes/_auth+/signup.tsx b/exercises/07.protecting-routes/03.problem.redirect/app/routes/_auth+/signup.tsx
@@ -6,7 +6,8 @@ import {
 	type DataFunctionArgs,
 	type V2_MetaFunction,
 } from '@remix-run/node'
-import { Form, useActionData } from '@remix-run/react'
+import { Form, useActionData, useSearchParams } from '@remix-run/react'
+import { safeRedirect } from 'remix-utils'
 import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '~/components/forms.tsx'
 import { Spacer } from '~/components/spacer.tsx'
@@ -38,8 +39,8 @@ const SignupFormSchema = z
 		agreeToTermsOfServiceAndPrivacyPolicy: checkboxSchema(
 			'You must agree to the terms of service and privacy policy',
 		),
-		// 🐨 add config for a redirectTo (optional string)
 		remember: checkboxSchema(),
+		redirectTo: z.string().optional(),
 	})
 	.superRefine(({ confirmPassword, password }, ctx) => {
 		if (confirmPassword !== password) {
@@ -87,15 +88,12 @@ export async function action({ request }: DataFunctionArgs) {
 		return json({ status: 'error', submission } as const, { status: 400 })
 	}
 
-	// 🐨 get the redirectTo from the submission
-	const { user, remember } = submission.value
+	const { user, remember, redirectTo } = submission.value
 
 	const cookieSession = await getSession(request.headers.get('cookie'))
 	cookieSession.set(userIdKey, user.id)
 
-	// 🐨 redirect to the redirectTo
-	// 🦉 Make sure to use the safeRedirect utility from remix-utils
-	return redirect('/', {
+	return redirect(safeRedirect(redirectTo), {
 		headers: {
 			'set-cookie': await commitSession(cookieSession, {
 				expires: remember
@@ -113,13 +111,13 @@ export const meta: V2_MetaFunction = () => {
 export default function SignupRoute() {
 	const actionData = useActionData<typeof action>()
 	const isSubmitting = useIsSubmitting()
-	// 🐨 get the search params via useSearchParams from @remix-run/react
-	// 🐨 get the redirectTo from the search params
+	const [searchParams] = useSearchParams()
+	const redirectTo = searchParams.get('redirectTo')
 
 	const [form, fields] = useForm({
 		id: 'signup-form',
 		constraint: getFieldsetConstraint(SignupFormSchema),
-		// 🐨 add a defaultValues object with the redirectTo
+		defaultValue: { redirectTo },
 		lastSubmission: actionData?.submission,
 		onValidate({ formData }) {
 			return parse(formData, { schema: SignupFormSchema })
@@ -211,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					{/* 🐨 add a hidden input here for the redirectTo */}
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 
 					<ErrorList errors={form.errors} id={form.errorId} />
 

diff --git a/exercises/07.protecting-routes/03.solution.redirect/app/routes/_auth+/login.tsx b/exercises/07.protecting-routes/03.solution.redirect/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/07.protecting-routes/03.solution.redirect/app/routes/_auth+/signup.tsx b/exercises/07.protecting-routes/03.solution.redirect/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/01.problem.schema/app/routes/_auth+/login.tsx b/exercises/08.permissions/01.problem.schema/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/01.problem.schema/app/routes/_auth+/signup.tsx b/exercises/08.permissions/01.problem.schema/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/01.solution.schema/app/routes/_auth+/login.tsx b/exercises/08.permissions/01.solution.schema/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/01.solution.schema/app/routes/_auth+/signup.tsx b/exercises/08.permissions/01.solution.schema/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/02.problem.seed/app/routes/_auth+/login.tsx b/exercises/08.permissions/02.problem.seed/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/02.problem.seed/app/routes/_auth+/signup.tsx b/exercises/08.permissions/02.problem.seed/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/02.solution.seed/app/routes/_auth+/login.tsx b/exercises/08.permissions/02.solution.seed/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/02.solution.seed/app/routes/_auth+/signup.tsx b/exercises/08.permissions/02.solution.seed/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/03.problem.delete-note/app/routes/_auth+/login.tsx b/exercises/08.permissions/03.problem.delete-note/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/03.problem.delete-note/app/routes/_auth+/signup.tsx b/exercises/08.permissions/03.problem.delete-note/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/03.solution.delete-note/app/routes/_auth+/login.tsx b/exercises/08.permissions/03.solution.delete-note/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/03.solution.delete-note/app/routes/_auth+/signup.tsx b/exercises/08.permissions/03.solution.delete-note/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/04.problem.utils/app/routes/_auth+/login.tsx b/exercises/08.permissions/04.problem.utils/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/04.problem.utils/app/routes/_auth+/signup.tsx b/exercises/08.permissions/04.problem.utils/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/08.permissions/04.solution.utils/app/routes/_auth+/login.tsx b/exercises/08.permissions/04.solution.utils/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/08.permissions/04.solution.utils/app/routes/_auth+/signup.tsx b/exercises/08.permissions/04.solution.utils/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/01.problem.schema/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/01.problem.schema/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/01.problem.schema/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/01.problem.schema/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/01.solution.schema/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/01.solution.schema/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/01.solution.schema/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/01.solution.schema/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/02.problem.auth-utils/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/02.problem.auth-utils/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/02.problem.auth-utils/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/02.problem.auth-utils/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/02.solution.auth-utils/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/02.solution.auth-utils/app/routes/_auth+/login.tsx
@@ -156,7 +156,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/02.solution.auth-utils/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/02.solution.auth-utils/app/routes/_auth+/signup.tsx
@@ -209,7 +209,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/03.problem.session-cookie/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/03.problem.session-cookie/app/routes/_auth+/login.tsx
@@ -164,7 +164,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/03.problem.session-cookie/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/03.problem.session-cookie/app/routes/_auth+/signup.tsx
@@ -216,7 +216,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/03.solution.session-cookie/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/03.solution.session-cookie/app/routes/_auth+/login.tsx
@@ -149,7 +149,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/03.solution.session-cookie/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/03.solution.session-cookie/app/routes/_auth+/signup.tsx
@@ -202,7 +202,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">

diff --git a/exercises/09.managed-sessions/04.problem.delete-sessions/app/routes/_auth+/login.tsx b/exercises/09.managed-sessions/04.problem.delete-sessions/app/routes/_auth+/login.tsx
@@ -149,7 +149,9 @@ export default function LoginPage() {
 								</div>
 							</div>
 
-							<input {...conform.input(fields.redirectTo)} type="hidden" />
+							<input
+								{...conform.input(fields.redirectTo, { type: 'hidden' })}
+							/>
 							<ErrorList errors={form.errors} id={form.errorId} />
 
 							<div className="flex items-center justify-between gap-6 pt-3">

diff --git a/exercises/09.managed-sessions/04.problem.delete-sessions/app/routes/_auth+/signup.tsx b/exercises/09.managed-sessions/04.problem.delete-sessions/app/routes/_auth+/signup.tsx
@@ -202,7 +202,7 @@ export default function SignupRoute() {
 						errors={fields.remember.errors}
 					/>
 
-					<input {...conform.input(fields.redirectTo)} type="hidden" />
+					<input {...conform.input(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<div className="flex items-center justify-between gap-6">