remix-validated-form 1.1.1-beta.0 → 2.0.1-beta.0

package/sample-app/app/routes/subjects/$id.edit.tsx

@@ -1,100 +0,0 @@
-import { Box, Container, Heading } from "@chakra-ui/react";
-import {
-  ActionFunction,
-  json,
-  LoaderFunction,
-  redirect,
-  useCatch,
-  useLoaderData,
-  useParams,
-} from "remix";
-import { z } from "zod";
-import { ErrorBox } from "~/components/ErrorBox";
-import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
-import { db } from "~/services/db.server";
-import { SubjectComplete } from "~/types";
-import { validationError } from "../../../remix-validated-form";
-
-export const loader: LoaderFunction = async ({ params }) => {
-  const { id } = z.object({ id: z.string() }).parse(params);
-
-  const subject = await db.subject.findUnique({
-    where: { id: +id },
-    include: {
-      teacher: true,
-      subjectDays: { orderBy: { day: "asc" } },
-    },
-  });
-
-  if (!subject) {
-    throw new Response(`Subject ${id} doesn't exist`, {
-      status: 404,
-    });
-  }
-
-  return json(subject);
-};
-
-export const action: ActionFunction = async ({ request, params }) => {
-  const { id } = z.object({ id: z.string() }).parse(params);
-
-  const fieldValues = subjectFormValidator.validate(
-    Object.fromEntries(await request.formData())
-  );
-  if (fieldValues.error) return validationError(fieldValues.error);
-
-  const { teacher, subjectDays, ...updatedSubject } = fieldValues.data;
-
-  await db.subject.update({
-    where: { id: +id },
-    data: {
-      ...updatedSubject,
-      teacher: {
-        update: teacher,
-      },
-      subjectDays: {
-        deleteMany: {},
-        create: subjectDays,
-      },
-    },
-  });
-
-  return redirect("/subjects");
-};
-
-export default function NewSubject() {
-  const subject = useLoaderData<SubjectComplete | null>();
-  return (
-    <>
-      <Box bg="white" pt="4" pb="4" shadow="sm">
-        <Container maxW="7xl">
-          <Heading size="lg" mb="0">
-            Create Subject
-          </Heading>
-        </Container>
-      </Box>
-
-      <Box as="main" py="8" flex="1">
-        <Container maxW="7xl">
-          <SubjectForm defaultValues={subject ?? undefined} />
-        </Container>
-      </Box>
-    </>
-  );
-}
-
-export function CatchBoundary() {
-  const caught = useCatch();
-  const params = useParams();
-  if (caught.status === 404) {
-    return <ErrorBox title={`Subject ${params.id} doesn't exist`} />;
-  }
-  throw new Error(`Unhandled error: ${caught.status}`);
-}
-
-export function ErrorBoundary() {
-  const { id } = useParams();
-  return (
-    <ErrorBox title={`There was an error subject by the id ${id}. Sorry.`} />
-  );
-}

package/sample-app/app/routes/subjects/index.tsx

@@ -1,112 +0,0 @@
-import {
-  Box,
-  Button,
-  Container,
-  Flex,
-  Heading,
-  Spacer,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
-import { Subject, SubjectDays, Teacher } from "@prisma/client";
-import {
-  json,
-  Link,
-  LoaderFunction,
-  useCatch,
-  useLoaderData,
-  useParams,
-} from "remix";
-import { db } from "~/services/db.server";
-
-export const loader: LoaderFunction = async () => {
-  const subjects = await db.subject.findMany({
-    include: { teacher: true, subjectDays: true },
-  });
-  return json(subjects);
-};
-
-export default function Subjects() {
-  const subjects =
-    useLoaderData<
-      (Subject & { teacher: Teacher; subjectDays: SubjectDays[] })[]
-    >();
-  return (
-    <>
-      <Box bg="white" pt="4" pb="4" shadow="sm">
-        <Container maxW="7xl">
-          <Flex>
-            <Heading size="lg" mb="0">
-              Subjects
-            </Heading>
-            <Spacer />
-            <Link to="new">
-              <Button colorScheme="blue">New</Button>
-            </Link>
-          </Flex>
-        </Container>
-      </Box>
-
-      <Box as="main" py="8" flex="1">
-        <Container maxW="7xl">
-          <Box bg="white" p="6" rounded="lg" shadow="base" overflowX="auto">
-            <Table borderWidth="1px" fontSize="sm">
-              <Thead bg="white">
-                <Tr>
-                  <Th whiteSpace="nowrap" scope="col">
-                    Subject
-                  </Th>
-                  <Th whiteSpace="nowrap" scope="col">
-                    Teacher
-                  </Th>
-                  <Th whiteSpace="nowrap" scope="col"></Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {subjects.map((subject) => (
-                  <Tr key={subject.id}>
-                    <Td whiteSpace="nowrap">{subject.name}</Td>
-                    <Td>
-                      {subject.teacher.name} ({subject.teacher.email})
-                    </Td>
-                    <Td textAlign="right">
-                      <Link to={`${subject.id}/edit`}>
-                        <Button variant="link" colorScheme="blue">
-                          Edit
-                        </Button>
-                      </Link>
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </Box>
-        </Container>
-      </Box>
-    </>
-  );
-}
-
-export function CatchBoundary() {
-  const caught = useCatch();
-  const params = useParams();
-  if (caught.status === 404) {
-    return (
-      <div className="error-container">
-        Huh? What the heck is "{params.id}"?
-      </div>
-    );
-  }
-  throw new Error(`Unhandled error: ${caught.status}`);
-}
-
-export function ErrorBoundary() {
-  const { jokeId } = useParams();
-  return (
-    <div className="error-container">{`There was an error loading joke by the id ${jokeId}. Sorry.`}</div>
-  );
-}

package/sample-app/app/routes/subjects/new.tsx

@@ -1,48 +0,0 @@
-import { Box, Container, Heading } from "@chakra-ui/react";
-import { ActionFunction, redirect } from "remix";
-import { SubjectForm, subjectFormValidator } from "~/components/SubjectForm";
-import { db } from "~/services/db.server";
-import { validationError } from "../../../remix-validated-form";
-
-export const action: ActionFunction = async ({ request }) => {
-  const fieldValues = subjectFormValidator.validate(
-    Object.fromEntries(await request.formData())
-  );
-  if (fieldValues.error) return validationError(fieldValues.error);
-
-  const { teacher, subjectDays, ...newSubject } = fieldValues.data;
-
-  await db.subject.create({
-    data: {
-      ...newSubject,
-      teacher: {
-        create: teacher,
-      },
-      subjectDays: {
-        create: subjectDays,
-      },
-    },
-  });
-
-  return redirect("/subjects");
-};
-
-export default function NewSubject() {
-  return (
-    <>
-      <Box bg="white" pt="4" pb="4" shadow="sm">
-        <Container maxW="7xl">
-          <Heading size="lg" mb="0">
-            Create Subject
-          </Heading>
-        </Container>
-      </Box>
-
-      <Box as="main" py="8" flex="1">
-        <Container maxW="7xl">
-          <SubjectForm />
-        </Container>
-      </Box>
-    </>
-  );
-}

package/sample-app/app/services/db.server.ts

@@ -1,23 +0,0 @@
-import { PrismaClient } from "@prisma/client";
-
-let db: PrismaClient;
-
-declare global {
-  var __db: PrismaClient | undefined;
-}
-
-// this is needed because in development we don't want to restart
-// the server with every change, but we want to make sure we don't
-// create a new connection to the DB with every change either.
-if (process.env.NODE_ENV === "production") {
-  db = new PrismaClient();
-  db.$connect();
-} else {
-  if (!global.__db) {
-    global.__db = new PrismaClient();
-    global.__db.$connect();
-  }
-  db = global.__db;
-}
-
-export { db };

package/sample-app/app/types.ts

@@ -1,6 +0,0 @@
-import { Subject, SubjectDays, Teacher } from "@prisma/client";
-
-export type SubjectComplete = Subject & {
-  teacher: Teacher;
-  subjectDays: SubjectDays[];
-};