fix(_official-jokes): fix useActionData/useLoaderData usage (#84)

Author: MichaelDeBoey

_official-jokes/app/routes/jokes.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderFunction } from "@remix-run/node";
+import type { LinksFunction, LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, Link, Outlet, useLoaderData } from "@remix-run/react";
 
@@ -7,12 +7,7 @@ import { getUser } from "~/utils/session.server";
 
 import stylesUrl from "../styles/jokes.css";
 
-type LoaderData = {
-  user: Awaited<ReturnType<typeof getUser>>;
-  jokeListItems: Array<{ id: string; name: string }>;
-};
-
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderArgs) => {
   const user = await getUser(request);
 
   // in the official deployed version of the app, we don't want to deploy
@@ -26,20 +21,18 @@ export const loader: LoaderFunction = async ({ request }) => {
       })
     : [];
 
-  const data: LoaderData = {
+  return json({
     jokeListItems,
     user,
-  };
-
-  return json(data);
+  });
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: stylesUrl }];
-};
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesUrl },
+];
 
 export default function JokesScreen() {
-  const data = useLoaderData<LoaderData>();
+  const data = useLoaderData<typeof loader>();
 
   return (
     <div className="jokes-layout">

_official-jokes/app/routes/jokes/$jokeId.tsx

@@ -1,21 +1,12 @@
-import type { Joke } from "@prisma/client";
-import type {
-  ActionFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node";
+import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { useCatch, useLoaderData, useParams } from "@remix-run/react";
 
 import { db } from "~/utils/db.server";
 import { getUserId, requireUserId } from "~/utils/session.server";
 import { JokeDisplay } from "~/components/joke";
 
-export const meta: MetaFunction = ({
-  data,
-}: {
-  data: LoaderData | undefined;
-}) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) {
     return {
       title: "No joke",
@@ -28,19 +19,16 @@ export const meta: MetaFunction = ({
   };
 };
 
-type LoaderData = { joke: Joke; isOwner: boolean };
-
-export const loader: LoaderFunction = async ({ request, params }) => {
+export const loader = async ({ params, request }: LoaderArgs) => {
   const userId = await getUserId(request);
   const joke = await db.joke.findUnique({ where: { id: params.jokeId } });
   if (!joke) {
     throw new Response("What a joke! Not found.", { status: 404 });
   }
-  const data: LoaderData = { joke, isOwner: userId === joke.jokesterId };
-  return json(data);
+  return json({ joke, isOwner: userId === joke.jokesterId });
 };
 
-export const action: ActionFunction = async ({ request, params }) => {
+export const action = async ({ params, request }: ActionArgs) => {
   const form = await request.formData();
   if (form.get("intent") !== "delete") {
     throw new Response(`The intent ${form.get("intent")} is not supported`, {
@@ -64,7 +52,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function JokeRoute() {
-  const data = useLoaderData<LoaderData>();
+  const data = useLoaderData<typeof loader>();
 
   return <JokeDisplay joke={data.joke} isOwner={data.isOwner} />;
 }

_official-jokes/app/routes/jokes/index.tsx

@@ -1,14 +1,11 @@
-import type { Joke } from "@prisma/client";
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useCatch, useLoaderData } from "@remix-run/react";
 
 import { db } from "~/utils/db.server";
 import { getUserId } from "~/utils/session.server";
 
-type LoaderData = { randomJoke: Joke };
-
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderArgs) => {
   const userId = await getUserId(request);
   const count = await db.joke.count();
   const randomRowNumber = Math.floor(Math.random() * count);
@@ -27,12 +24,11 @@ export const loader: LoaderFunction = async ({ request }) => {
   if (!randomJoke) {
     throw new Response("No jokes to be found!", { status: 404 });
   }
-  const data: LoaderData = { randomJoke };
-  return json(data);
+  return json({ randomJoke });
 };
 
 export default function JokesIndexRoute() {
-  const data = useLoaderData<LoaderData>();
+  const data = useLoaderData<typeof loader>();
 
   return (
     <div>

_official-jokes/app/routes/jokes/new.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import {
   Form,
@@ -10,9 +10,10 @@ import {
 
 import { JokeDisplay } from "~/components/joke";
 import { db } from "~/utils/db.server";
+import { badRequest } from "~/utils/request.server";
 import { getUserId, requireUserId } from "~/utils/session.server";
 
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderArgs) => {
   const userId = await getUserId(request);
   if (!userId) {
     throw new Response("Unauthorized", { status: 401 });
@@ -32,30 +33,18 @@ function validateJokeName(name: string) {
   }
 }
 
-type ActionData = {
-  formError?: string;
-  fieldErrors?: { name: string | undefined; content: string | undefined };
-  fields?: {
-    name: string;
-    content: string;
-  };
-};
-
-/**
- * This helper function gives us typechecking for our ActionData return
- * statements, while still returning the accurate HTTP status, 400 Bad Request,
- * to the client.
- */
-const badRequest = (data: ActionData) => json(data, { status: 400 });
-
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   const userId = await requireUserId(request);
 
   const form = await request.formData();
   const name = form.get("name");
   const content = form.get("content");
   if (typeof name !== "string" || typeof content !== "string") {
-    return badRequest({ formError: `Form not submitted correctly.` });
+    return badRequest({
+      fieldErrors: null,
+      fields: null,
+      formError: `Form not submitted correctly.`,
+    });
   }
 
   const fieldErrors = {
@@ -64,7 +53,7 @@ export const action: ActionFunction = async ({ request }) => {
   };
   const fields = { name, content };
   if (Object.values(fieldErrors).some(Boolean)) {
-    return badRequest({ fieldErrors, fields });
+    return badRequest({ fieldErrors, fields, formError: null });
   }
 
   const joke = await db.joke.create({
@@ -74,7 +63,7 @@ export const action: ActionFunction = async ({ request }) => {
 };
 
 export default function NewJokeRoute() {
-  const actionData = useActionData<ActionData>();
+  const actionData = useActionData<typeof action>();
   const transition = useTransition();
 
   if (transition.submission) {

_official-jokes/app/routes/jokes[.]rss.tsx

@@ -1,8 +1,8 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 
 import { db } from "~/utils/db.server";
 
-export const loader: LoaderFunction = async ({ request }) => {
+export const loader = async ({ request }: LoaderArgs) => {
   const jokes = await db.joke.findMany({
     take: 100,
     orderBy: { createdAt: "desc" },

_official-jokes/app/routes/login.tsx

@@ -1,26 +1,19 @@
-import type {
-  ActionFunction,
-  LinksFunction,
-  MetaFunction,
-} from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
+import type { ActionArgs, LinksFunction, MetaFunction } from "@remix-run/node";
+import { Link, useActionData, useSearchParams } from "@remix-run/react";
 
-import { login, createUserSession, register } from "~/utils/session.server";
+import stylesUrl from "~/styles/login.css";
 import { db } from "~/utils/db.server";
+import { badRequest } from "~/utils/request.server";
+import { createUserSession, login, register } from "~/utils/session.server";
 
-import stylesUrl from "../styles/login.css";
+export const meta: MetaFunction = () => ({
+  description: "Login to submit your own jokes to Remix Jokes!",
+  title: "Remix Jokes | Login",
+});
 
-export const meta: MetaFunction = () => {
-  return {
-    title: "Remix Jokes | Login",
-    description: "Login to submit your own jokes to Remix Jokes!",
-  };
-};
-
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: stylesUrl }];
-};
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesUrl },
+];
 
 function validateUsername(username: unknown) {
   if (typeof username !== "string" || username.length < 3) {
@@ -34,28 +27,15 @@ function validatePassword(password: unknown) {
   }
 }
 
-function validateUrl(url: any) {
+function validateUrl(url: string) {
   const urls = ["/jokes", "/", "https://remix.run"];
   if (urls.includes(url)) {
     return url;
   }
   return "/jokes";
 }
 
-type ActionData = {
-  formError?: string;
-  fieldErrors?: { username: string | undefined; password: string | undefined };
-  fields?: { loginType: string; username: string; password: string };
-};
-
-/**
- * This helper function gives us typechecking for our ActionData return
- * statements, while still returning the accurate HTTP status, 400 Bad Request,
- * to the client.
- */
-const badRequest = (data: ActionData) => json(data, { status: 400 });
-
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   const form = await request.formData();
   const loginType = form.get("loginType");
   const username = form.get("username");
@@ -67,7 +47,11 @@ export const action: ActionFunction = async ({ request }) => {
     typeof password !== "string" ||
     typeof redirectTo !== "string"
   ) {
-    return badRequest({ formError: `Form not submitted correctly.` });
+    return badRequest({
+      fieldErrors: null,
+      fields: null,
+      formError: `Form not submitted correctly.`,
+    });
   }
 
   const fields = { loginType, username, password };
@@ -76,14 +60,15 @@ export const action: ActionFunction = async ({ request }) => {
     password: validatePassword(password),
   };
   if (Object.values(fieldErrors).some(Boolean)) {
-    return badRequest({ fieldErrors, fields });
+    return badRequest({ fieldErrors, fields, formError: null });
   }
 
   switch (loginType) {
     case "login": {
       const user = await login({ username, password });
       if (!user) {
         return badRequest({
+          fieldErrors: null,
           fields,
           formError: `Username/Password combination is incorrect`,
         });
@@ -94,33 +79,39 @@ export const action: ActionFunction = async ({ request }) => {
       const userExists = await db.user.findFirst({ where: { username } });
       if (userExists) {
         return badRequest({
+          fieldErrors: null,
           fields,
           formError: `User with username ${username} already exists`,
         });
       }
       const user = await register({ username, password });
       if (!user) {
         return badRequest({
+          fieldErrors: null,
           fields,
           formError: `Something went wrong trying to create a new user.`,
         });
       }
       return createUserSession(user.id, redirectTo);
     }
     default: {
-      return badRequest({ fields, formError: `Login type invalid` });
+      return badRequest({
+        fieldErrors: null,
+        fields,
+        formError: `Login type invalid`,
+      });
     }
   }
 };
 
 export default function Login() {
-  const actionData = useActionData<ActionData>();
+  const actionData = useActionData<typeof action>();
   const [searchParams] = useSearchParams();
   return (
     <div className="container">
       <div className="content" data-light="">
         <h1>Login</h1>
-        <Form method="post">
+        <form method="post">
           <input
             type="hidden"
             name="redirectTo"
@@ -204,7 +195,7 @@ export default function Login() {
           <button type="submit" className="button">
             Submit
           </button>
-        </Form>
+        </form>
       </div>
       <div className="links">
         <ul>

_official-jokes/app/routes/logout.tsx

@@ -1,12 +1,12 @@
-import type { ActionFunction, LoaderFunction } from "@remix-run/node";
+import type { ActionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 
 import { logout } from "~/utils/session.server";
 
-export const action: ActionFunction = async ({ request }) => {
+export const action = async ({ request }: ActionArgs) => {
   return logout(request);
 };
 
-export const loader: LoaderFunction = async () => {
+export const loader = async () => {
   return redirect("/");
 };

_official-jokes/app/utils/request.server.ts

@@ -0,0 +1,7 @@
+import { json } from "@remix-run/node";
+
+/**
+ * This helper function helps us returning the accurate HTTP status,
+ * 400 Bad Request, to the client.
+ */
+export const badRequest = <T>(data: T) => json<T>(data, { status: 400 });