replace DataFunctionArgs

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This file will keep track of significant changes that have happened in the
+workshop material that is different from what you'll see in the videos.
+
+## DataFunctionArgs
+
+`DataFunctionArgs` was deprecated in Remix and will be removed in the future. It
+is recommended to use `LoaderFunctionArgs` and `ActionFunctionArgs` instead
+which are the exact same.

epicshop/fix.js

@@ -111,7 +111,7 @@ async function updateDataDb() {
 					path.join(latestPrismaApp, 'prisma'),
 					path.join(app, 'prisma'),
 					[/data\.db/],
-			  )
+				)
 			: false
 		if (prismaIsUnchanged) {
 			logVerbose(

epicshop/tsconfig.json

@@ -1,11 +1,11 @@
-{
-  "compilerOptions": {
-    "module": "NodeNext",
-    "target": "es2022",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-		"allowJs": true,
-    "skipLibCheck": true,
-		"noEmit": true
-  }
-}
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "target": "es2022",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  }
+}

exercises/01.e2e/01.problem.playwright/README.mdx

@@ -33,9 +33,9 @@ the configuration options, knock yourself out with
 [this reference](https://playwright.dev/docs/test-configuration).
 
 <callout-info>
-	Playwright-specific commands must be run in `playground` directory. If
-	you're currently in the workshop's root directory, simply run `cd playground`
-	to get there.
+	Playwright-specific commands must be run in `playground` directory. If you're
+	currently in the workshop's root directory, simply run `cd playground` to get
+	there.
 </callout-info>
 
 To start running the test, open up a terminal in the `playground` directory and

exercises/01.e2e/01.problem.playwright/app/components/error-boundary.tsx

@@ -37,7 +37,7 @@ export function GeneralErrorBoundary({
 				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
 						error,
 						params,
-				  })
+					})
 				: unexpectedErrorHandler(error)}
 		</div>
 	)

exercises/01.e2e/01.problem.playwright/app/root.tsx

@@ -4,7 +4,8 @@ import { parse } from '@conform-to/zod'
 import { cssBundleHref } from '@remix-run/css-bundle'
 import {
 	json,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type LinksFunction,
 } from '@remix-run/node'
 import {
@@ -60,7 +61,7 @@ export const links: LinksFunction = () => {
 	].filter(Boolean)
 }
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const [csrfToken, csrfCookieHeader] = await csrf.commitToken(request)
 	const honeyProps = honeypot.getInputProps()
 	const { toast, headers: toastHeaders } = await getToast(request)
@@ -82,7 +83,7 @@ export async function loader({ request }: DataFunctionArgs) {
 					},
 				},
 				where: { id: userId },
-		  })
+			})
 		: null
 	return json(
 		{
@@ -107,7 +108,7 @@ const ThemeFormSchema = z.object({
 	theme: z.enum(['light', 'dark']),
 })
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	invariantResponse(
 		formData.get('intent') === 'update-theme',

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/auth.$provider.callback.ts

@@ -1,4 +1,4 @@
-import { redirect, type DataFunctionArgs } from '@remix-run/node'
+import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
 import {
 	authenticator,
 	getSessionExpirationDate,
@@ -25,7 +25,7 @@ import {
 
 const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }
 
-export async function loader({ request, params }: DataFunctionArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
 	const providerName = ProviderNameSchema.parse(params.provider)
 
 	const redirectTo = getRedirectCookieValue(request)

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/auth.$provider.ts

@@ -1,4 +1,4 @@
-import { redirect, type DataFunctionArgs } from '@remix-run/node'
+import { redirect, type ActionFunctionArgs } from '@remix-run/node'
 import { authenticator } from '#app/utils/auth.server.ts'
 import { handleMockAction } from '#app/utils/connections.server.ts'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
@@ -9,7 +9,7 @@ export async function loader() {
 	return redirect('/login')
 }
 
-export async function action({ request, params }: DataFunctionArgs) {
+export async function action({ request, params }: ActionFunctionArgs) {
 	const providerName = ProviderNameSchema.parse(params.provider)
 
 	try {

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/forgot-password.tsx

@@ -4,7 +4,7 @@ import * as E from '@react-email/components'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import { Link, useFetcher } from '@remix-run/react'
@@ -25,7 +25,7 @@ const ForgotPasswordSchema = z.object({
 	usernameOrEmail: z.union([EmailSchema, UsernameSchema]),
 })
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/login.tsx

@@ -3,7 +3,8 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import { Form, Link, useActionData, useSearchParams } from '@remix-run/react'
@@ -178,12 +179,12 @@ const LoginFormSchema = z.object({
 	remember: z.boolean().optional(),
 })
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	await requireAnonymous(request)
 	return json({})
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	await requireAnonymous(request)
 	const formData = await request.formData()
 	await validateCSRF(formData, request.headers)

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/logout.tsx

@@ -1,10 +1,10 @@
-import { redirect, type DataFunctionArgs } from '@remix-run/node'
+import { redirect, type ActionFunctionArgs } from '@remix-run/node'
 import { logout } from '#app/utils/auth.server.ts'
 
 export async function loader() {
 	return redirect('/')
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	throw await logout({ request })
 }

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/onboarding.tsx

@@ -3,7 +3,8 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import {
@@ -69,12 +70,12 @@ async function requireOnboardingEmail(request: Request) {
 	}
 	return email
 }
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const email = await requireOnboardingEmail(request)
 	return json({ email })
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const email = await requireOnboardingEmail(request)
 	const formData = await request.formData()
 	await validateCSRF(formData, request.headers)

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/onboarding_.$provider.tsx

@@ -3,7 +3,8 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import {
@@ -75,7 +76,7 @@ async function requireData({
 	}
 }
 
-export async function loader({ request, params }: DataFunctionArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
 	const { email } = await requireData({ request, params })
 	const cookieSession = await sessionStorage.getSession(
 		request.headers.get('cookie'),
@@ -100,7 +101,7 @@ export async function loader({ request, params }: DataFunctionArgs) {
 	})
 }
 
-export async function action({ request, params }: DataFunctionArgs) {
+export async function action({ request, params }: ActionFunctionArgs) {
 	const { email, providerId, providerName } = await requireData({
 		request,
 		params,

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/reset-password.tsx

@@ -3,7 +3,8 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import { Form, useActionData, useLoaderData } from '@remix-run/react'
@@ -72,12 +73,12 @@ async function requireResetPasswordUsername(request: Request) {
 	return resetPasswordUsername
 }
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const resetPasswordUsername = await requireResetPasswordUsername(request)
 	return json({ resetPasswordUsername })
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const resetPasswordUsername = await requireResetPasswordUsername(request)
 	const formData = await request.formData()
 	const submission = parse(formData, {

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/signup.tsx

@@ -4,7 +4,8 @@ import * as E from '@react-email/components'
 import {
 	json,
 	redirect,
-	type DataFunctionArgs,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
 import { Form, useActionData, useSearchParams } from '@remix-run/react'
@@ -29,12 +30,12 @@ const SignupSchema = z.object({
 	redirectTo: z.string().optional(),
 })
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	await requireAnonymous(request)
 	return json({})
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	await validateCSRF(formData, request.headers)
 	checkHoneypot(formData)

exercises/01.e2e/01.problem.playwright/app/routes/_auth+/verify.tsx

@@ -1,7 +1,11 @@
 import { conform, useForm, type Submission } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { generateTOTP, verifyTOTP } from '@epic-web/totp'
-import { json, type DataFunctionArgs } from '@remix-run/node'
+import {
+	json,
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+} from '@remix-run/node'
 import {
 	Form,
 	useActionData,
@@ -43,7 +47,7 @@ const VerifySchema = z.object({
 	[redirectToQueryParam]: z.string().optional(),
 })
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const params = new URL(request.url).searchParams
 	if (!params.has(codeQueryParam)) {
 		// we don't want to show an error message on page load if the otp hasn't be
@@ -60,7 +64,7 @@ export async function loader({ request }: DataFunctionArgs) {
 	return validateRequest(request, params)
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	await validateCSRF(formData, request.headers)
 	return validateRequest(request, formData)

exercises/01.e2e/01.problem.playwright/app/routes/admin.tsx

@@ -1,9 +1,9 @@
-import { json, type DataFunctionArgs } from '@remix-run/node'
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { requireUserWithRole } from '#app/utils/permissions.ts'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	await requireUserWithRole(request, 'admin')
 	return json({})
 }

exercises/01.e2e/01.problem.playwright/app/routes/resources+/download-user-data.tsx

@@ -1,9 +1,9 @@
-import { json, type DataFunctionArgs } from '@remix-run/node'
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUniqueOrThrow({
 		where: { id: userId },
@@ -47,7 +47,7 @@ export async function loader({ request }: DataFunctionArgs) {
 				? {
 						...user.image,
 						url: `${domain}/resources/user-images/${user.image.id}`,
-				  }
+					}
 				: null,
 			notes: user.notes.map(note => ({
 				...note,

exercises/01.e2e/01.problem.playwright/app/routes/resources+/note-images.$imageId.tsx

@@ -1,8 +1,8 @@
-import { type DataFunctionArgs } from '@remix-run/node'
+import { type LoaderFunctionArgs } from '@remix-run/node'
 import { prisma } from '#app/utils/db.server.ts'
 import { invariantResponse } from '#app/utils/misc.tsx'
 
-export async function loader({ params }: DataFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
 	const image = await prisma.noteImage.findUnique({
 		where: { id: params.imageId },

exercises/01.e2e/01.problem.playwright/app/routes/resources+/user-images.$imageId.tsx

@@ -1,8 +1,8 @@
-import { type DataFunctionArgs } from '@remix-run/node'
+import { type LoaderFunctionArgs } from '@remix-run/node'
 import { prisma } from '#app/utils/db.server.ts'
 import { invariantResponse } from '#app/utils/misc.tsx'
 
-export async function loader({ params }: DataFunctionArgs) {
+export async function loader({ params }: LoaderFunctionArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
 	const image = await prisma.userImage.findUnique({
 		where: { id: params.imageId },