- app
  - routes
      - admin.tsx
      - admin
          - new.tsx
          - edit.tsx
              $user.tsx

import type { LoaderFunction } from "remix";

import type { User } from "@prisma/client";

import { db } from "~/utils/db.server";


type LoaderData = { users: Array<User> };

export let loader: LoaderFunction = async () => {
const data: LoaderData = {
  users: await db.user.findMany()
};

return { data };
};


export default function Users() {
const data = useLoaderData<LoaderData>();

return (
  <ul>
    {data.map(user => (
      <li>{user.name}</li>
    ))}
  </ul>
);
}

import type { ActionFunction } from 'remix'

import { redirect } from 'remix'

import { db } from '~/utils/db.server'

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData()
  const name = form.get('name')
  const content = form.get('content')
  // we do this type check to be extra sure and to make TypeScript happy
  // we'll explore validation next!
  if (typeof name !== 'string' || typeof content !== 'string') {
    throw new Error(`Form not submitted correctly.`)
  }

  const fields = { name, content }

  const joke = await db.joke.create({ data: fields })
  return redirect(`/jokes/${joke.id}`)
}

export default function NewJokeRoute() {
  return (
    <div>
      <p>Add your own hilarious joke</p>
      <form method="post">
        <div>
          <label>
            Name: <input type="text" name="name" />
          </label>
        </div>
        <div>
          <label>
            Content: <textarea name="content" />
          </label>
        </div>
        <div>
          <button type="submit" className="button">
            Add
          </button>
        </div>
      </form>
    </div>
  )
}

import type { ActionFunction, LoaderFunction } from "remix";

import {
  useActionData,
  redirect,
  Form
} from "remix";

import { JokeDisplay } from "~/components/joke";

import { db } from "~/utils/db.server";

import {
  requireUserId,
  getUserId
} from "~/utils/session.server";


export const loader: LoaderFunction = async ({
  request
}) => {
  const userId = await getUserId(request);
  if (!userId) {
      throw new Response("Unauthorized", { status: 401 });
  }
  return {};
};


function validateJokeContent(content: string) {
  if (content.length < 10) {
      return `That joke is too short`;
  }
}


function validateJokeName(name: string) {
  if (name.length < 2) {
      return `That joke's name is too short`;
  }
}


type ActionData = {
  formError?: string;
  fieldErrors?: {
      name: string | undefined;
      content: string | undefined;
  };
  fields?: {
      name: string;
      content: string;
  };
};


export const action: ActionFunction = async ({
  request
}): Promise<Response | ActionData> => {
  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 { formError: `Form not submitted correctly.` };
  }


  const fieldErrors = {
      name: validateJokeName(name),
      content: validateJokeContent(content)
  };
  const fields = { name, content };
  if (Object.values(fieldErrors).some(Boolean)) {
      return { fieldErrors, fields };
  }


  const joke = await db.joke.create({
      data: { ...fields, jokesterId: userId }
  });
  return redirect(`/jokes/${joke.id}`);
};


export default function NewJokeRoute() {
  const actionData = useActionData<
      ActionData | undefined
  >();


  return (
      <div>
          <p>Add your own hilarious joke</p>
          <Form method="post">
              <div>
                  <label>
                      Name:{" "}
                      <input
                          type="text"
                          defaultValue={actionData?.fields?.name}
                          name="name"
                          aria-invalid={
                              Boolean(actionData?.fieldErrors?.name) ||
                              undefined
                          }
                          aria-describedby={
                              actionData?.fieldErrors?.name
                                  ? "name-error"
                                  : undefined
                          }
                      />
                  </label>
                  {actionData?.fieldErrors?.name ? (
                      <p
                          className="form-validation-error"
                          role="alert"
                          id="name-error"
                      >
                          {actionData.fieldErrors.name}
                      </p>
                  ) : null}
              </div>
              <div>
                  <label>
                      Content:{" "}
                      <textarea
                          defaultValue={actionData?.fields?.content}
                          name="content"
                          aria-invalid={
                              Boolean(actionData?.fieldErrors?.content) ||
                              undefined
                          }
                          aria-describedby={
                              actionData?.fieldErrors?.content
                                  ? "content-error"
                                  : undefined
                          }
                      />
                  </label>
                  {actionData?.fieldErrors?.content ? (
                      <p
                          className="form-validation-error"
                          role="alert"
                          id="content-error"
                      >
                          {actionData.fieldErrors.content}
                      </p>
                  ) : null}
              </div>
              <div>
                  <button type="submit" className="button">
                      Add
                  </button>
              </div>
          </Form>
      </div>
  );
}

import type { LoaderFunction } from 'remix'

import { db } from '~/utils/db.server'

export const loader: LoaderFunction = async ({ request }) => {
  const jokes = await db.joke.findMany({
    take: 100,
    orderBy: { createdAt: 'desc' },
    include: { jokester: { select: { username: true } } },
  })

  const host = request.headers.get('X-Forwarded-Host') ?? request.headers.get('host')
  if (!host) {
    throw new Error('Could not determine domain URL.')
  }
  const protocol = host.includes('localhost') ? 'http' : 'https'
  const domain = `${protocol}://${host}`
  const jokesUrl = `${domain}/jokes`

  const rssString = `
  <rss xmlns:blogChannel="${jokesUrl}" version="2.0">
    <channel>
      <title>Remix Jokes</title>
      <link>${jokesUrl}</link>
      <description>Some funny jokes</description>
      <language>en-us</language>
      <generator>Kody the Koala</generator>
      <ttl>40</ttl>
      ${jokes
        .map((joke) =>
          `
          <item>
            <title>${joke.name}</title>
            <description>A funny joke called ${joke.name}</description>
            <author>${joke.jokester.username}</author>
            <pubDate>${joke.createdAt}</pubDate>
            <link>${jokesUrl}/${joke.id}</link>
            <guid>${jokesUrl}/${joke.id}</guid>
          </item>
        `.trim()
        )
        .join('\n')}
    </channel>
  </rss>
`.trim()

  return new Response(rssString, {
    headers: {
      'Cache-Control': `public, max-age=${60 * 10}, s-maxage=${60 * 60 * 24}`,
      'Content-Type': 'application/xml',
      'Content-Length': String(Buffer.byteLength(rssString)),
    },
  })
}

export const meta: MetaFunction = () => {
  const description = `Learn Remix and laugh at the same time!`
  return {
    description,
    keywords: 'Remix,jokes',
    'twitter:image': 'https://remix-jokes.lol/social.png',
    'twitter:card': 'summary_large_image',
    'twitter:creator': '@remix_run',
    'twitter:site': '@remix_run',
    'twitter:title': 'Remix Jokes',
    'twitter:description': description,
  }
}

export function CatchBoundary() {
  const caught = useCatch()

  if (caught.status === 404) {
    return <div className="error-container">There are no jokes to display.</div>
  }
  throw new Error(`Unexpected caught response with status: ${caught.status}`)
}

export function ErrorBoundary() {
  return <div className="error-container">I did a whoopsies.</div>
}