diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx index 40b0e2b..5c1ef60 100644 --- 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(0); const [isCreateStudyModalOpen, setIsCreateStudyModalOpen] = useState(false); const [isCreateDocumentModalOpen, setIsCreateDocumentModalOpen] = useState(false); + const [reloadTrigger, setReloadTrigger] = useState(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 && } - {category === '학습자료' && } + {category === '학습자료' && } { 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 ( <> @@ -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} /> )} diff --git a/src/containers/study/DocumentModal/index.tsx b/src/containers/study/DocumentModal/index.tsx index 4412490..5015b51 100644 --- 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(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 index 4620032..60a588b 100644 --- a/src/containers/study/StudyParticipantMenu/index.tsx +++ b/src/containers/study/StudyParticipantMenu/index.tsx @@ -3,7 +3,7 @@ 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'; @@ -11,11 +11,17 @@ import { useGetFetchWithToken, useMutateWithToken } from '@/hooks/useFetchWithTo 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, @@ -23,7 +29,7 @@ const StudyParticipantMenu = ({ studyId, teamId, leaderId }: StudyParticipantMen 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 index 13c4de7..ab6d291 100644 --- 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 index a9d2c2c..ac6c6fb 100644 --- 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 ( {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 index 6ea7de6..451a150 100644 --- 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>; } diff --git a/src/containers/team/teamMember/MandateTeamLeaderModal/index.tsx b/src/containers/team/teamMember/MandateTeamLeaderModal/index.tsx index 001c3d7..24a86cf 100644 --- 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 index 3e46035..46a3954 100644 --- 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 index b9980cc..d621b70 100644 --- 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({ id: -1, name: '', imageUrl: '' }); const [isOpen, setIsOpen] = useState(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 index 3278fd0..3dbb91f 100644 --- 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(); 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, originUser?: any) {