Merge pull request #55 from openhacku-team-a/マイルストーン編集のカスタムフック呼び出し

マイルストーン編集のカスタムフック呼び出し
a-company-jp · Mar 16, 2024 · 049f96c · 049f96c
2 parents 1829d00 + 24388b9
commit 049f96c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 23 deletions.
diff --git a/src/components/organisms/EditingCareerCalendar.tsx b/src/components/organisms/EditingCareerCalendar.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import EditingCareerEvent from "./EditingCareerEvent";
-import milestones from "@/sample-data/milestones.json";
 import { Milestone } from "../../../proto/typescript/pb_out/main";
 import EditMilestoneForm from "./EditMilestoneForm";
+import useFetchUser from "@/hooks/useFetchUser";
+import useFetchMilestone from "@/hooks/useFetchMilestone";
 
 // とりあえず100年分のカレンダーを表示
 const FULL_YEAR = 100;
@@ -15,10 +16,18 @@ type Props = {
 };
 
 const EditingCareerCalendar = ({ userId }: Props) => {
+  const { me } = useFetchUser();
+  const { create, update, _delete } = useFetchMilestone();
+  const [lifeEvents, setLifeEvents] = useState<Milestone[]>([]);
+
+  useEffect(() => {
+    async () => {
+      const { milestones } = await me();
+      setLifeEvents(milestones);
+    };
+  }, [me]);
+
   const array = new Array(FULL_YEAR).fill(0);
-  const [lifeEvents, setLifeEvents] = useState<Milestone[]>(
-    milestones.filter((m) => m.userId === userId)
-  );
   const [openModalMilestoneId, setOpenModalMilestoneId] = useState<
     string | null
   >(null);
@@ -38,18 +47,38 @@ const EditingCareerCalendar = ({ userId }: Props) => {
     };
   }, []);
 
+  const updateLifeEventWithSlider = useCallback(
+    async (newLifeEvent: Milestone) => {
+      setLifeEvents(
+        lifeEvents.map((l) =>
+          l.milestoneId === newLifeEvent.milestoneId ? newLifeEvent : l
+        )
+      );
+    },
+    [lifeEvents]
+  );
+
+  const fetchUpdateMilestone = useCallback(
+    (milestoneId: string) => {
+      update({
+        milestone: lifeEvents.find((l) => l.milestoneId === milestoneId),
+      });
+    },
+    [lifeEvents, update]
+  );
+
   const updateLifeEvent = useCallback(
-    (newLifeEvent: Milestone) => {
+    async (newLifeEvent: Milestone) => {
       if (newLifeEvent.milestoneId === "") {
+        const createdMilestone = await create({ milestone: newLifeEvent });
+        const validated = createdMilestone.milestone;
+        const removedNoIdMilestone = lifeEvents.filter(
+          (l) => l.milestoneId !== ""
+        );
         setLifeEvents(
-          lifeEvents.map((n) =>
-            n.milestoneId !== ""
-              ? n
-              : {
-                  ...newLifeEvent,
-                  milestoneId: String(Math.random() * 10000),
-                }
-          )
+          validated
+            ? [...removedNoIdMilestone, validated]
+            : removedNoIdMilestone
         );
         return;
       }
@@ -58,8 +87,9 @@ const EditingCareerCalendar = ({ userId }: Props) => {
           l.milestoneId === newLifeEvent.milestoneId ? newLifeEvent : l
         )
       );
+      update({ milestone: newLifeEvent });
     },
-    [lifeEvents]
+    [lifeEvents, create, update]
   );
 
   const deleteLifeEvent = useCallback(
@@ -137,7 +167,8 @@ const EditingCareerCalendar = ({ userId }: Props) => {
           <EditingCareerEvent
             lifeEvent={lifeEvent}
             openModalMilestoneId={openModalMilestoneId}
-            updateLifeEvent={updateLifeEvent}
+            updateLifeEvent={updateLifeEventWithSlider}
+            fetchUpdateMilestone={fetchUpdateMilestone}
             handleEtidModal={handleEtidModal}
             key={`lifeEvent-${index}`}
           />
@@ -152,7 +183,7 @@ const EditingCareerCalendar = ({ userId }: Props) => {
                   type="button"
                   onClick={() => {
                     handleEtidModal.close();
-                    deleteLifeEvent(openModalMilestoneId);
+                    _delete(openModalMilestoneId);
                   }}
                   className="border-[1.5px] p-3 rounded-full h-14 w-14 flex justify-center items-center hover:opacity-50"
                   title="マイルストーンを削除する"

diff --git a/src/components/organisms/EditingCareerEvent.tsx b/src/components/organisms/EditingCareerEvent.tsx
@@ -8,6 +8,7 @@ type Props = {
   lifeEvent: Milestone;
   openModalMilestoneId: string | null;
   updateLifeEvent: (newLifeEvent: Milestone) => void;
+  fetchUpdateMilestone: (milestoneId: string) => void;
   handleEtidModal: {
     open: (milestoneId: string) => void;
     close: (e?: React.MouseEvent<HTMLButtonElement>) => void;
@@ -18,6 +19,7 @@ const EditingCareerEvent = ({
   lifeEvent,
   openModalMilestoneId,
   updateLifeEvent,
+  fetchUpdateMilestone,
   handleEtidModal,
 }: Props) => {
   const {
@@ -28,14 +30,18 @@ const EditingCareerEvent = ({
     onClickMilestone,
     handleMouseDownSlide,
     handleMouseDownExpansion,
-  } = useEditingCareerEvent({ lifeEvent, updateLifeEvent });
+  } = useEditingCareerEvent({
+    lifeEvent,
+    updateLifeEvent,
+    fetchUpdateMilestone,
+  });
   const isModalOpen = useMemo(
     () => openModalMilestoneId === lifeEvent.milestoneId,
-    [openModalMilestoneId, lifeEvent],
+    [openModalMilestoneId, lifeEvent]
   );
   const inactiveMilestone = useMemo(
     () => openModalMilestoneId !== null && !isModalOpen,
-    [openModalMilestoneId, isModalOpen],
+    [openModalMilestoneId, isModalOpen]
   );
 
   const cursorStyle = useMemo(() => {
@@ -53,12 +59,12 @@ const EditingCareerEvent = ({
 
   const onMouseDownSlide = useMemo(
     () => (isModalOpen || inactiveMilestone ? undefined : handleMouseDownSlide),
-    [isModalOpen, inactiveMilestone, handleMouseDownSlide],
+    [isModalOpen, inactiveMilestone, handleMouseDownSlide]
   );
 
   const onMouseDownExpansion = useMemo(
     () => (isModalOpen ? undefined : handleMouseDownExpansion),
-    [isModalOpen, handleMouseDownExpansion],
+    [isModalOpen, handleMouseDownExpansion]
   );
 
   return (

diff --git a/src/hooks/useEditingCareerEvent.ts b/src/hooks/useEditingCareerEvent.ts
@@ -6,9 +6,10 @@ const START_YEAR = 2022;
 type Props = {
   lifeEvent: Milestone;
   updateLifeEvent: (newLifeEvent: Milestone) => void;
+  fetchUpdateMilestone: (milestoneId: string) => void;
 };
 
-const useEditingCareerEvent = ({ lifeEvent, updateLifeEvent }: Props) => {
+const useEditingCareerEvent = ({ lifeEvent, updateLifeEvent, fetchUpdateMilestone }: Props) => {
   const [gridRow, setGridRow] = useState<{ start: number; end: number }>({
     start: 0,
     end: 0,
@@ -105,6 +106,7 @@ const useEditingCareerEvent = ({ lifeEvent, updateLifeEvent }: Props) => {
       document.removeEventListener("mouseup", handleMouseUp);
       clearInterval(intervalId);
       setIsDragging(false);
+      fetchUpdateMilestone(lifeEvent.milestoneId);
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -144,6 +146,7 @@ const useEditingCareerEvent = ({ lifeEvent, updateLifeEvent }: Props) => {
       document.removeEventListener("mouseup", handleMouseUp);
       clearInterval(intervalId);
       setIsDragging(false);
+      fetchUpdateMilestone(lifeEvent.milestoneId);
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);