diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 000000000..79c40b005 --- /dev/null +++ b/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. diff --git a/epicshop/package.json b/epicshop/package.json index 568bb6fdf..b3c6d1b5e 100644 --- a/epicshop/package.json +++ b/epicshop/package.json @@ -6,4 +6,4 @@ "execa": "^8.0.1", "fs-extra": "^11.1.1" } -} \ No newline at end of file +} diff --git a/epicshop/tsconfig.json b/epicshop/tsconfig.json index ab75500c4..d6c2683f7 100644 --- a/epicshop/tsconfig.json +++ b/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 + } +} diff --git a/exercises/01.cookies/01.problem.fetcher/app/components/error-boundary.tsx b/exercises/01.cookies/01.problem.fetcher/app/components/error-boundary.tsx index accc5c2e8..0a42c4f5c 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/components/error-boundary.tsx +++ b/exercises/01.cookies/01.problem.fetcher/app/components/error-boundary.tsx @@ -37,7 +37,7 @@ export function GeneralErrorBoundary({ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({ error, params, - }) + }) : unexpectedErrorHandler(error)} ) diff --git a/exercises/01.cookies/01.problem.fetcher/app/root.tsx b/exercises/01.cookies/01.problem.fetcher/app/root.tsx index d9f7fd66c..cd6629f8d 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/root.tsx +++ b/exercises/01.cookies/01.problem.fetcher/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 LoaderFunctionArgs, + type ActionFunctionArgs, type LinksFunction, } from '@remix-run/node' import { @@ -47,7 +48,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() return json( @@ -67,7 +68,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', diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/login.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/login.tsx index ad4d02d7f..2b6990c4c 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/login.tsx +++ b/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/login.tsx @@ -3,7 +3,7 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod' import { json, redirect, - type DataFunctionArgs, + type ActionFunctionArgs, type MetaFunction, } from '@remix-run/node' import { Form, Link, useActionData } from '@remix-run/react' @@ -24,7 +24,7 @@ const LoginFormSchema = z.object({ password: PasswordSchema, }) -export async function action({ request }: DataFunctionArgs) { +export async function action({ request }: ActionFunctionArgs) { const formData = await request.formData() await validateCSRF(formData, request.headers) checkHoneypot(formData) diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/signup.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/signup.tsx index 9175c1742..e1d496043 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/signup.tsx +++ b/exercises/01.cookies/01.problem.fetcher/app/routes/_auth+/signup.tsx @@ -3,7 +3,7 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod' import { json, redirect, - type DataFunctionArgs, + type ActionFunctionArgs, type MetaFunction, } from '@remix-run/node' import { Form, useActionData } from '@remix-run/react' @@ -46,7 +46,7 @@ const SignupFormSchema = z } }) -export async function action({ request }: DataFunctionArgs) { +export async function action({ request }: ActionFunctionArgs) { const formData = await request.formData() await validateCSRF(formData, request.headers) checkHoneypot(formData) diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/note-images.$imageId.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/note-images.$imageId.tsx index 46d48ce10..417545a3e 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/note-images.$imageId.tsx +++ b/exercises/01.cookies/01.problem.fetcher/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 }, diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/user-images.$imageId.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/user-images.$imageId.tsx index f54a7b8cc..c5a66b146 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/resources+/user-images.$imageId.tsx +++ b/exercises/01.cookies/01.problem.fetcher/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 }, diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username.tsx index 749b583cd..a15e17e74 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username.tsx +++ b/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username.tsx @@ -1,4 +1,4 @@ -import { json, type DataFunctionArgs } from '@remix-run/node' +import { json, type LoaderFunctionArgs } from '@remix-run/node' import { Link, useLoaderData, type MetaFunction } from '@remix-run/react' import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx' import { Spacer } from '#app/components/spacer.tsx' @@ -6,7 +6,7 @@ import { Button } from '#app/components/ui/button.tsx' import { prisma } from '#app/utils/db.server.ts' import { getUserImgSrc, invariantResponse } from '#app/utils/misc.tsx' -export async function loader({ params }: DataFunctionArgs) { +export async function loader({ params }: LoaderFunctionArgs) { const user = await prisma.user.findFirst({ select: { name: true, diff --git a/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username_+/__note-editor.tsx b/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username_+/__note-editor.tsx index 430aaa472..57868257d 100644 --- a/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username_+/__note-editor.tsx +++ b/exercises/01.cookies/01.problem.fetcher/app/routes/users+/$username_+/__note-editor.tsx @@ -14,7 +14,7 @@ import { json, unstable_parseMultipartFormData as parseMultipartFormData, redirect, - type DataFunctionArgs, + type ActionFunctionArgs, type SerializeFrom, } from '@remix-run/node' import { Form, useActionData } from '@remix-run/react' @@ -72,7 +72,7 @@ const NoteEditorSchema = z.object({ images: z.array(ImageFieldsetSchema).max(5).optional(), }) -export async function action({ request, params }: DataFunctionArgs) { +export async function action({ request, params }: ActionFunctionArgs) { const formData = await parseMultipartFormData( request, createMemoryUploadHandler({ maxPartSize: MAX_UPLOAD_SIZE }), @@ -226,7 +226,7 @@ export function NoteEditor({ className="relative border-b-2 border-muted-foreground" >