Hono に移行

client/package.json

@@ -43,6 +43,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "daisyui": "^5.0.3",
     "globals": "^15.15.0",
+    "hono": "^4.9.6",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.3.5"

client/src/components/Calendar.tsx

@@ -14,12 +14,12 @@ import type {
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Tooltip } from "react-tooltip";
-import type { ProjectRes } from "../../../common/schema";
+import type { Project } from "../types";
 
 dayjs.locale("ja");
 
 type Props = {
-  project: ProjectRes;
+  project: Project;
   myGuestId: string;
   mySlotsRef: React.RefObject<{ from: Date; to: Date }[]>;
   editMode: boolean;

client/src/pages/Home.tsx

@@ -1,12 +1,40 @@
+import { hc } from "hono/client";
+import { useEffect, useState } from "react";
 import { HiOutlineCalendar, HiOutlineCog, HiOutlinePlus, HiOutlineUser, HiOutlineUsers } from "react-icons/hi";
 import { NavLink } from "react-router";
-import { type InvolvedProjects, involvedProjectsResSchema } from "../../../common/schema";
+import type { AppType } from "../../../server/src/main";
 import Header from "../components/Header";
-import { useData } from "../hooks";
+import { briefProjectReviver } from "../revivers";
+import type { BriefProject } from "../types";
 import { API_ENDPOINT } from "../utils";
 
+const client = hc<AppType>(API_ENDPOINT);
+
 export default function HomePage() {
-  const { data: involvedProjects, loading } = useData(`${API_ENDPOINT}/projects/mine`, involvedProjectsResSchema);
+  const [involvedProjects, setInvolvedProjects] = useState<BriefProject[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchInvolvedProjects = async () => {
+      setLoading(true);
+      try {
+        const res = await client.projects.mine.$get({}, { init: { credentials: "include" } });
+        if (res.status === 200) {
+          const data = await res.json();
+          const parsedData = data.map((p) => briefProjectReviver(p));
+          setInvolvedProjects(parsedData);
+        } else {
+          setInvolvedProjects(null);
+        }
+      } catch (error) {
+        console.error("Error fetching involved projects:", error);
+        setInvolvedProjects(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchInvolvedProjects();
+  }, []);
 
   return (
     <>
@@ -28,7 +56,7 @@ export default function HomePage() {
   );
 }
 
-function ProjectDashboard({ involvedProjects }: { involvedProjects: InvolvedProjects }) {
+function ProjectDashboard({ involvedProjects }: { involvedProjects: BriefProject[] }) {
   const sortedProjects = [...involvedProjects].sort((a, b) => {
     if (a.isHost !== b.isHost) {
       return a.isHost ? -1 : 1;
@@ -76,7 +104,7 @@ function ProjectDashboard({ involvedProjects }: { involvedProjects: InvolvedProj
   );
 }
 
-function ProjectCard({ project }: { project: InvolvedProjects[0] }) {
+function ProjectCard({ project }: { project: BriefProject }) {
   return (
     <NavLink
       to={`/${project.id}`}

client/src/pages/Project.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import dayjs from "dayjs";
+import { hc } from "hono/client";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import {
@@ -11,22 +12,54 @@ import {
 } from "react-icons/hi";
 import { NavLink, useNavigate, useParams } from "react-router";
 import type { z } from "zod";
-import { editReqSchema, projectReqSchema, projectResSchema } from "../../../common/schema";
+import { editReqSchema, projectReqSchema } from "../../../common/validators";
+import type { AppType } from "../../../server/src/main";
 import Header from "../components/Header";
-import { useData } from "../hooks";
+import { projectReviver } from "../revivers";
+import type { Project } from "../types";
 import { API_ENDPOINT, FRONTEND_ORIGIN } from "../utils";
 
+const client = hc<AppType>(API_ENDPOINT);
+
 export default function ProjectPage() {
   const { eventId } = useParams();
   const navigate = useNavigate();
 
   const formSchema = eventId ? editReqSchema : projectReqSchema;
   type FormSchemaType = z.infer<typeof formSchema>;
 
-  const { data: project, loading: projectLoading } = useData(
-    eventId ? `${API_ENDPOINT}/projects/${eventId}` : null,
-    projectResSchema,
-  );
+  const [project, setProject] = useState<Project | null>(null);
+  const [projectLoading, setProjectLoading] = useState(true);
+  useEffect(() => {
+    const fetchProject = async () => {
+      if (!eventId) {
+        setProject(null);
+        setProjectLoading(false);
+        return;
+      }
+      setProjectLoading(true);
+      try {
+        const res = await client.projects[":projectId"].$get(
+          {
+            param: { projectId: eventId },
+          },
+          {
+            init: { credentials: "include" },
+          },
+        );
+        if (res.status === 200) {
+          const data = await res.json();
+          const parsedData = projectReviver(data);
+          setProject(parsedData);
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setProjectLoading(false);
+      }
+    };
+    fetchProject();
+  }, [eventId]);
 
   const [submitLoading, setSubmitLoading] = useState<boolean>(false);
   const loading = projectLoading || submitLoading;
@@ -109,46 +142,46 @@ export default function ProjectPage() {
     } satisfies z.infer<typeof projectReqSchema>;
 
     if (!project) {
-      const res = await fetch(`${API_ENDPOINT}/projects`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(eventData),
-        credentials: "include",
-      });
-
-      const { id: projectId, name: projectName } = await res.json(); // TODO:
+      const res = await client.projects.$post(
+        {
+          json: eventData,
+        },
+        {
+          init: { credentials: "include" },
+        },
+      );
 
       setSubmitLoading(false);
-      if (res.ok) {
+      if (res.status === 201) {
+        const { id, name } = await res.json();
         setDialogStatus({
-          projectId: projectId,
-          projectName: projectName,
+          projectId: id,
+          projectName: name,
         });
       } else {
+        const { message } = await res.json();
         setToast({
-          message: "送信に失敗しました",
+          message,
           variant: "error",
         });
         setTimeout(() => setToast(null), 3000);
       }
     } else {
-      const res = await fetch(`${API_ENDPOINT}/projects/${eventId}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(eventData),
-        credentials: "include",
-      });
-
+      const res = await client.projects[":projectId"].$put(
+        { param: { projectId: project.id }, json: eventData },
+        { init: { credentials: "include" } },
+      );
       setSubmitLoading(false);
       if (res.ok) {
+        // TODO: 更新したデータで再レンダリング
         setToast({
           message: "更新しました。",
           variant: "success",
         });
         setTimeout(() => setToast(null), 3000);
       } else {
         setToast({
-          message: res.status === 403 ? "認証に失敗しました。" : "更新に失敗しました。",
+          message: res.status === 403 ? "権限がありません。" : "更新に失敗しました。",
           variant: "error",
         });
         setTimeout(() => setToast(null), 3000);
@@ -376,10 +409,11 @@ export default function ProjectPage() {
                       onClick={async () => {
                         if (confirm("本当にこのイベントを削除しますか？")) {
                           try {
-                            const response = await fetch(`${API_ENDPOINT}/projects/${project.id}`, {
-                              method: "DELETE",
-                            });
-                            if (!response.ok) {
+                            const res = await client.projects[":projectId"].$delete(
+                              { param: { projectId: project.id } },
+                              { init: { credentials: "include" } },
+                            );
+                            if (!res.ok) {
                               throw new Error("削除に失敗しました。");
                             }
                             navigate("/home");