feat: add update

whyk-pg · Dec 3, 2024 · f3075d2 · f3075d2
1 parent 52ab3cb
commit f3075d2
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 85 deletions.
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@remix-run/cloudflare";
-import { useLoaderData } from "@remix-run/react";
+import { Form, useLoaderData } from "@remix-run/react";
 import { hc } from "hono/client";
 import type { AppType } from "../../server";
 
@@ -35,68 +35,68 @@ export default function Index() {
   const data = useLoaderData<typeof loader>();
 
   return (
-    <html lang="ja">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-      </head>
-      <body>
-        <h1 className="text-3xl font-bold underline">Hello World</h1>
-        <section>
-          <h2 className="text-2xl font-bold underline">Movies</h2>
-          <ul>
-            {data.movies.map((movie) => (
-              <li key={movie.id}>
-                {movie.title}({movie.id})、{movie.theater.name}(
-                {movie.theaterId})、{movie.createrCountry.name}(
-                {movie.createrCountryId})、{movie.screeningFormat.name}(
-                {movie.screeningFormatId})、{movie.movieFormat.name}(
-                {movie.movieFormatId})
-              </li>
-            ))}
-          </ul>
-        </section>
-        <section>
-          <h2 className="text-2xl font-bold underline">Theaters</h2>
-          <ul>
-            {data.theaters.map((theater) => (
-              <li key={theater.id}>
-                {theater.name}({theater.id})
-              </li>
-            ))}
-          </ul>
-        </section>
-        <section>
-          <h2 className="text-2xl font-bold underline">Creaters Countries</h2>
-          <ul>
-            {data.creatersCountries.map((createrCountry) => (
-              <li key={createrCountry.id}>
-                {createrCountry.name}({createrCountry.id})
-              </li>
-            ))}
-          </ul>
-        </section>
-        <section>
-          <h2 className="text-2xl font-bold underline">Screening Formats</h2>
-          <ul>
-            {data.screeningFormats.map((screeningFormat) => (
-              <li key={screeningFormat.id}>
-                {screeningFormat.name}({screeningFormat.id})
-              </li>
-            ))}
-          </ul>
-        </section>
-        <section>
-          <h2 className="text-2xl font-bold underline">Movie Formats</h2>
-          <ul>
-            {data.movieFormats.map((movieFormat) => (
-              <li key={movieFormat.id}>
-                {movieFormat.name}({movieFormat.id})
-              </li>
-            ))}
-          </ul>
-        </section>
-      </body>
-    </html>
+    <>
+      <h1 className="text-3xl font-bold underline">Hello World</h1>
+      <section>
+        <h2 className="text-2xl font-bold underline">Movies</h2>
+        <ul>
+          {data.movies.map((movie) => (
+            <li key={movie.id}>
+              {movie.title}({movie.id})、{movie.theater.name}({movie.theaterId}
+              )、{movie.createrCountry.name}({movie.createrCountryId})、
+              {movie.screeningFormat.name}({movie.screeningFormatId})、
+              {movie.movieFormat.name}({movie.movieFormatId})
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold underline">Theaters</h2>
+        <ul>
+          {data.theaters.map((theater) => (
+            <li key={theater.id}>
+              {theater.name}({theater.id})
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold underline">Creaters Countries</h2>
+        <ul>
+          {data.creatersCountries.map((createrCountry) => (
+            <li key={createrCountry.id}>
+              {createrCountry.name}({createrCountry.id})
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold underline">Screening Formats</h2>
+        <ul>
+          {data.screeningFormats.map((screeningFormat) => (
+            <li key={screeningFormat.id}>
+              {screeningFormat.name}({screeningFormat.id})
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold underline">Movie Formats</h2>
+        <ul>
+          {data.movieFormats.map((movieFormat) => (
+            <li key={movieFormat.id}>
+              {movieFormat.name}({movieFormat.id})
+            </li>
+          ))}
+        </ul>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold underline">Update test</h2>
+        <Form method="PATCH" action="/update">
+          <input type="text" name="title" defaultValue="test" />
+          <button type="submit">Update</button>
+        </Form>
+      </section>
+    </>
   );
 }
diff --git a/app/routes/update.tsx b/app/routes/update.tsx
@@ -0,0 +1,19 @@
+import { type ActionFunctionArgs, redirect } from "@remix-run/cloudflare";
+import { hc } from "hono/client";
+import type { AppType } from "../../server";
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const bodyData = await request.formData();
+  const client = hc<AppType>("http://localhost:5173");
+  console.log({ bodyData, title: bodyData.get("title")?.toString() || "" });
+
+  await client.api.movie[":id"].$patch({
+    param: {
+      id: "01JBSDNAE2HRRXWTY0M9GHETRX",
+    },
+    json: {
+      title: bodyData.get("title")?.toString() || "",
+    },
+  });
+  return redirect("/");
+};
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "wrangler": "^3.83.0"
   },
   "dependencies": {
+    "@hono/zod-validator": "^0.4.1",
     "@prisma/client": "^5.21.1",
     "@prisma/extension-accelerate": "^1.2.1",
     "@remix-run/cloudflare": "^2.13.1",
@@ -53,6 +54,7 @@
     "hono": "^4.6.8",
     "isbot": "^4.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zod": "^3.23.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/index.ts b/server/index.ts
@@ -1,5 +1,7 @@
+import { zValidator } from "@hono/zod-validator";
 import { ulid } from "@std/ulid";
 import { Hono } from "hono";
+import { z } from "zod";
 import { setupPrisma } from "../prisma";
 const app = new Hono();
 
@@ -118,28 +120,42 @@ const routes = app
 
     return c.json(movie);
   })
-  .patch(`${BASE_PATH}/movie/:id`, async (c) => {
-    const id = c.req.param("id");
-    const prisma = setupPrisma();
-
-    const sorceMovie = await prisma.movie.findFirst({
-      where: {
-        id,
-      },
-    });
+  .patch(
+    `${BASE_PATH}/movie/:id`,
+    zValidator(
+      "json",
+      z.object({
+        title: z.string(),
+      }),
+    ),
+    async (c, next) => {
+      const id = c.req.param("id");
+      const body = c.req.valid("json");
+      const prisma = setupPrisma();
+
+      console.log({ id, body });
+
+      const sorceMovie = await prisma.movie.findFirst({
+        where: {
+          id,
+        },
+      });
 
-    const movie = await prisma.movie.update({
-      where: {
-        moviePk: sorceMovie?.moviePk,
-        id,
-      },
-      data: {
-        title: "The Godfather",
-      },
-    });
+      console.log({ sorceMovie });
 
-    return c.json(movie);
-  })
+      await prisma.movie.update({
+        where: {
+          moviePk: sorceMovie?.moviePk,
+          id,
+        },
+        data: {
+          title: body.title,
+        },
+      });
+      console.log(body);
+      await next();
+    },
+  )
   .delete(`${BASE_PATH}/movie/:id`, async (c) => {
     const id = c.req.param("id");
     const prisma = setupPrisma();