Feature/#355 re rerendering (#357)

* feat: refetch in useGetFetchWithToken - #355 * fix: refetch on Team page - #355 * fix: refetch on Study page - #355
BDD-CLUB · Nov 24, 2024 · 79e0f7c · 79e0f7c
1 parent ab1c61f
commit 79e0f7c
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 18 deletions.
diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -40,6 +40,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
   const [documentLength, setDocumentLength] = useState<number>(0);
   const [isCreateStudyModalOpen, setIsCreateStudyModalOpen] = useState<boolean>(false);
   const [isCreateDocumentModalOpen, setIsCreateDocumentModalOpen] = useState<boolean>(false);
+  const [reloadTrigger, setReloadTrigger] = useState<boolean>(false);
 
   const inviteTeam = useMutateWithToken(postInviteTeam);
   const categoryData: CreateDocument = { groupId: params.teamId, groupType: 'teams' };
@@ -83,7 +84,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
     if (isCreateDocumentModalOpen === false) {
       getCardData(cardIdx);
     }
-  }, [isCreateDocumentModalOpen]);
+  }, [isCreateDocumentModalOpen, reloadTrigger]);
 
   useEffect(() => {
     if (isCreateStudyModalOpen === false) {
@@ -238,7 +239,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
             />
           )}
           {category === '학습자료' && documentArray.length === 0 && <SuggestionCreate category="학습자료" />}
-          {category === '학습자료' && <DocumentGridView documentArray={documentArray} />}
+          {category === '학습자료' && <DocumentGridView setReload={setReloadTrigger} documentArray={documentArray} />}
         </Flex>
       </Flex>
       <StudyModal

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -37,7 +37,9 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
   if (user && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
 
-  const participantData = useGetFetchWithToken(getStudyMembers, [params?.studyId])?.map(
+  const { result, refetch: refetchStudyMembers } = useGetFetchWithToken(getStudyMembers, [params?.studyId]);
+
+  const participantData = result?.map(
     (data: StudyMember) =>
       ({
         id: data.memberId,
@@ -58,6 +60,21 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
     });
   }, [params.studyId, isEditModalOpen]);
 
+  useEffect(() => {
+    if (!isTerminateModalOpen) {
+      getStudy(params.studyId).then((data) => {
+        setStudyData(data.body);
+      });
+    }
+  }, [params.studyId, isTerminateModalOpen]);
+
+  const handleRefetchMembers = () => {
+    getStudy(params.studyId).then((data) => {
+      setStudyData(data.body);
+    });
+    refetchStudyMembers();
+  };
+
   return (
     <>
       <Flex direction="column" gap="0" w="100%" p="8">
@@ -141,6 +158,8 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
                   studyId={params.studyId}
                   teamId={studyData?.teamReference.id}
                   leaderId={studyData?.studyLeaderId}
+                  studyMembers={result || []}
+                  refetchMembers={handleRefetchMembers}
                 />
               )}
               <Participant participantInfos={participantData || []} />

diff --git a/src/containers/study/DocumentModal/index.tsx b/src/containers/study/DocumentModal/index.tsx
@@ -19,7 +19,11 @@ import { DocumentModalProps } from './types';
 const DocumentModal = ({ id, isOpen, setIsDocsModalOpen, setReload }: DocumentModalProps) => {
   const [createDocsModalOpen, setIsCreateDocsModalOpen] = useState<boolean>(false);
 
-  const document: DocumentDetail = useGetFetchWithToken(getDocument, [id]);
+  const {
+    result: document,
+  }: {
+    result: DocumentDetail;
+  } = useGetFetchWithToken(getDocument, [id]);
   const deleteDocs = useMutateWithToken(deleteDocument);
   const onDelete = () => {
     deleteDocs(id).then(() => {

diff --git a/src/containers/study/StudyParticipantMenu/index.tsx b/src/containers/study/StudyParticipantMenu/index.tsx
@@ -3,27 +3,33 @@ import { useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { patchStudyMandate } from '@/app/api/member';
-import { deleteStudyMember, getStudyMembers, postStudyMember } from '@/app/api/study';
+import { deleteStudyMember, postStudyMember } from '@/app/api/study';
 import { getTeamMembers } from '@/app/api/team';
 import ParticipantMenu from '@/components/ParticipantMenu';
 import { StudyParticipantMenuProps } from '@/containers/study/StudyParticipantMenu/types';
 import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithToken';
 import useGetUser from '@/hooks/useGetUser';
 import { Member, StudyMember } from '@/types';
 
-const StudyParticipantMenu = ({ studyId, teamId, leaderId }: StudyParticipantMenuProps) => {
+const StudyParticipantMenu = ({
+  studyId,
+  teamId,
+  leaderId,
+  studyMembers: originStudyMembers,
+  refetchMembers = () => {},
+}: StudyParticipantMenuProps) => {
   const user = useGetUser();
   const [isOpen, setIsOpen] = useState(false);
 
-  const studyMembers = useGetFetchWithToken(getStudyMembers, [studyId], user)?.map(
+  const studyMembers = originStudyMembers?.map(
     (data: StudyMember) =>
       ({
         id: data.memberId,
         name: data.name,
         imageUrl: data.imageUrl,
       }) as Member,
   );
-  const teamMembers = useGetFetchWithToken(getTeamMembers, [teamId], user);
+  const { result: teamMembers } = useGetFetchWithToken(getTeamMembers, [teamId], user);
 
   const leader = studyMembers?.find((member: Member) => member.id === leaderId);
   const includeMembers = studyMembers?.filter((member: Member) => member.id !== leaderId);
@@ -36,15 +42,21 @@ const StudyParticipantMenu = ({ studyId, teamId, leaderId }: StudyParticipantMen
   const mandateLeader = useMutateWithToken(patchStudyMandate, user);
 
   const handleAddMember = (member: Member) => {
-    addMember(studyId, member.id);
+    addMember(studyId, member.id).then(() => {
+      refetchMembers();
+    });
   };
 
   const handleDeleteMember = (member: Member) => {
-    deleteMember(studyId, member.id);
+    deleteMember(studyId, member.id).then(() => {
+      refetchMembers();
+    });
   };
 
   const handleMandateLeader = (member: Member) => {
-    mandateLeader(studyId, member.id);
+    mandateLeader(studyId, member.id).then(() => {
+      refetchMembers();
+    });
   };
 
   return (

diff --git a/src/containers/study/StudyParticipantMenu/types.ts b/src/containers/study/StudyParticipantMenu/types.ts
@@ -1,5 +1,9 @@
+import { StudyMember } from '@/types';
+
 export interface StudyParticipantMenuProps {
   studyId: number;
   teamId: number;
   leaderId: number;
+  studyMembers: StudyMember[];
+  refetchMembers?: () => void;
 }
diff --git a/src/containers/team/DocumentGridView/index.tsx b/src/containers/team/DocumentGridView/index.tsx
@@ -4,7 +4,7 @@ import DocumentCard from '@/components/DocumentCard';
 
 import { DocumentGridViewProps } from './types';
 
-const DocumentGridView = ({ documentArray }: DocumentGridViewProps) => {
+const DocumentGridView = ({ documentArray, setReload = () => {} }: DocumentGridViewProps) => {
   return (
     <Grid gap="4" templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}>
       {documentArray?.map((document) => {
@@ -16,7 +16,7 @@ const DocumentGridView = ({ documentArray }: DocumentGridViewProps) => {
             description={document.description}
             date={document.date}
             uploaderName={document.uploaderName}
-            setReload={() => {}}
+            setReload={setReload}
             type={document.type}
             files={document.files}
             // bookmark={document.bookmark}

diff --git a/src/containers/team/DocumentGridView/types.ts b/src/containers/team/DocumentGridView/types.ts
@@ -2,4 +2,5 @@ import { DocumentList } from '@/types';
 
 export interface DocumentGridViewProps {
   documentArray: DocumentList[];
+  setReload?: React.Dispatch<React.SetStateAction<boolean>>;
 }
diff --git a/src/containers/team/teamMember/MandateTeamLeaderModal/index.tsx b/src/containers/team/teamMember/MandateTeamLeaderModal/index.tsx
@@ -13,9 +13,10 @@ const MandateTeamLeaderModal = ({ member, isOpen, teamId, teamName, onClose }: M
     mandateLeader(teamId, member.id).then((res) => {
       if (!res.ok) {
         alert('팀장을 위임하는데 실패했습니다.');
+      } else {
+        onClose();
       }
     });
-    onClose();
   };
 
   return (

diff --git a/src/containers/team/teamMember/RemoveTeamMemberModal/index.tsx b/src/containers/team/teamMember/RemoveTeamMemberModal/index.tsx
@@ -13,9 +13,10 @@ const RemoveTeamMemberModal = ({ member, isOpen, teamId, teamName, onClose }: Me
     deleteMember(teamId, member.id).then((res) => {
       if (!res.ok) {
         alert('팀원을 삭제하는데 실패했습니다.');
+      } else {
+        onClose();
       }
     });
-    onClose();
   };
 
   return (

diff --git a/src/containers/team/teamMember/index.tsx b/src/containers/team/teamMember/index.tsx
@@ -19,6 +19,14 @@ const TeamMember = ({ teamId, teamName }: { teamId: number; teamName: string })
   const [modalMember, setModalMember] = useState<Member>({ id: -1, name: '', imageUrl: '' });
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const {
+    result: members,
+    refetch: memberRefetch,
+  }: {
+    result: TeamMemberDetail[];
+    refetch: () => void;
+  } = useGetFetchWithToken(getTeamMembers, [teamId]);
+
   const handleRemoveButtonClick = (member: Member) => {
     setModalMember(member);
     setFiredModalOpen(true);
@@ -33,10 +41,9 @@ const TeamMember = ({ teamId, teamName }: { teamId: number; teamName: string })
     setMandateModalOpen(false);
     setFiredModalOpen(false);
     setIsOpen(false);
+    memberRefetch();
   };
 
-  const members: TeamMemberDetail[] = useGetFetchWithToken(getTeamMembers, [teamId]);
-
   useEffect(() => {
     const filteredLeader = members?.filter((member) => member.teamRole === 'ROLE_팀장')[0] ?? null;
     setTeamLeader(filteredLeader);

diff --git a/src/hooks/useFetchWithToken.ts b/src/hooks/useFetchWithToken.ts
@@ -11,6 +11,16 @@ export function useGetFetchWithToken(fetch: (token: string, ...props: any[]) =>
   const [result, setResult] = useState<any>();
   const propsStr = Object.entries(props).toString();
 
+  const refetch = () => {
+    fetch(user?.token, props).then((res: any) => {
+      if (res?.ok) {
+        setResult(res.body);
+      } else {
+        setResult(null);
+      }
+    });
+  };
+
   useEffect(() => {
     if (user?.isLogin) {
       fetch(user?.token, props).then((res: any) => {
@@ -23,7 +33,7 @@ export function useGetFetchWithToken(fetch: (token: string, ...props: any[]) =>
     }
   }, [user, fetch, propsStr]);
 
-  return result;
+  return { result, refetch };
 }
 
 export function useMutateWithToken(fetch: (token: string, ...props: any[]) => Promise<FetchResult>, originUser?: any) {