feat: 버튼 클릭시 모임 수정 기능 추가

Author: gihwan-dev

src/apis/groupScheduleApis.ts

@@ -1,4 +1,5 @@
 import supabase from '@/supabase';
+import { Member } from '@/types/Member';
 
 export const getOneGroupSchedule = async (scheduleId: string) => {
   const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
@@ -13,3 +14,90 @@ export const getOneGroupSchedule = async (scheduleId: string) => {
 
   return data[0];
 };
+
+interface UpdateGroupSchedule {
+  name: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  scheduleId: string;
+}
+
+export const updateGroupSchedule = async ({
+  name,
+  description,
+  startDate,
+  endDate,
+  memo,
+  scheduleId,
+}: UpdateGroupSchedule) => {
+  const { data, error } = await supabase
+    .from('group_schedules')
+    .update({
+      title: name,
+      description,
+      start_date: startDate,
+      end_date: endDate,
+      memo,
+    })
+    .eq('id', +scheduleId);
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};
+
+interface UpdateGroupScheduleMember {
+  updatedMemberList: Member[];
+  groupId: string;
+}
+
+export const updateGroupScheduleMember = async ({ updatedMemberList, groupId }: UpdateGroupScheduleMember) => {
+  const { error: deleteError } = await supabase.from('group_user_ralations').delete().eq('group_id', groupId);
+  if (deleteError) {
+    throw deleteError;
+  }
+
+  const { data, error: insertError } = await supabase.from('group_user_ralations').insert(
+    updatedMemberList.map((member) => ({
+      group_id: +groupId,
+      user_id: member.id,
+    })),
+  );
+
+  if (insertError) {
+    throw insertError;
+  }
+
+  return data;
+};
+
+export const getAllGroupMembers = async (groupId: string) => {
+  // group_user_ralations 의 응답 결과의 user_id를 포함하는 profile리스트를 받아온다.
+  const { data, error } = await supabase.from('group_user_ralations').select('user_id').eq('group_id', +groupId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data) {
+    throw new Error('데이터를 찾을 수 없습니다.');
+  }
+
+  const { data: allUserProfile, error: getProfileError } = await supabase
+    .from('profiles')
+    .select('*')
+    .in(
+      'id',
+      data.map((d) => d.user_id),
+    );
+
+  if (getProfileError) {
+    throw getProfileError;
+  }
+
+  return allUserProfile;
+};

src/components/Group/GroupForm.tsx

@@ -12,6 +12,7 @@ interface Props {
   startDate?: string;
   endDate?: string;
   memo?: string | null;
+  memberList?: Member[];
   onSubmit: (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => void;
 }
 
@@ -21,9 +22,10 @@ const GroupForm: FC<Props> = ({
   startDate = new Date().toString(),
   endDate = new Date().toString(),
   memo = '',
+  memberList = [],
   onSubmit,
 }) => {
-  const [member, setMember] = useState<Member[]>([]);
+  const [member, setMember] = useState<Member[]>(memberList);
 
   const onClick = (newMember: Member) => {
     setMember((prev) => [...prev, newMember]);

src/hooks/useGetGroupScheduleDefaultData.ts

@@ -0,0 +1,26 @@
+import { useGetAllMember } from '@/react-queries/useGetAllMember';
+import { useGetOneGroupSchedule } from '@/react-queries/useGetOneGroupSchedule';
+
+export const useGetGroupScheduleDefaultData = (scheduleId: string, groupId: string) => {
+  const {
+    data: groupScheduleData,
+    isLoading: groupScheduleIsLoading,
+    error: groupScheduleError,
+    isError: groupScheduleIsError,
+  } = useGetOneGroupSchedule(scheduleId);
+
+  const {
+    data: groupMemberData,
+    isLoading: groupMemberIsLoading,
+    error: groupMemberError,
+    isError: groupMemberIsError,
+  } = useGetAllMember(groupId);
+
+  return {
+    groupScheduleData,
+    groupMemberData,
+    isLoading: groupScheduleIsLoading || groupMemberIsLoading,
+    error: groupScheduleError ?? groupMemberError,
+    isError: groupScheduleIsError || groupMemberIsError,
+  };
+};

src/pages/EditGroupSchedulePage.tsx

@@ -1,50 +1,71 @@
 import GroupForm from '@/components/Group/GroupForm';
 import AppBar from '@/components/common/AppBar';
-import { useGetOneGroupSchedule } from '@/react-queries/useGetOneGroupSchedule';
 import { useParams } from 'react-router-dom';
 import { Loading } from '.';
 import { Member } from '@/types/Member';
+import { useUpdateGroupSchedule } from '@/react-queries/useUpdateGroupSchedule';
+import { useGetGroupScheduleDefaultData } from '@/hooks/useGetGroupScheduleDefaultData';
 
 const EditGroupSchedulePage = () => {
   const params = useParams<{ groupId: string; scheduleId: string }>();
-  const { scheduleId } = params;
-  const { data, isError, error, isLoading } = useGetOneGroupSchedule(scheduleId!);
+  const scheduleId = params.scheduleId!;
+  const groupId = params.groupId!;
+
+  const { groupMemberData, groupScheduleData, error, isLoading, isError } = useGetGroupScheduleDefaultData(
+    scheduleId,
+    groupId,
+  );
+  const { mutate, isError: updateHasError, isPending: updateIsPending } = useUpdateGroupSchedule();
 
   if (isError) {
-    // TODO: 에러 처리
-    return <div>{error.message}</div>;
+    return <div>{error!.message}</div>;
   }
 
-  if (!data) {
-    // TODO: 에러 처리
+  if ((!groupMemberData || !groupScheduleData) && !isLoading) {
     return <div>데이터를 찾을 수 없습니다.</div>;
   }
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    console.log(formData.get('name'));
-    console.log(formData.get('description'));
-    console.log(formData.get('startDate'));
-    console.log(formData.get('endDate'));
-    console.log(formData.get('memo'));
-    console.log('userList', userList);
+    const updatePayload = {
+      name: formData.get('name') as string,
+      description: formData.get('description') as string,
+      startDate: formData.get('startDate') as string,
+      endDate: formData.get('endDate') as string,
+      memo: formData.get('memo') as string,
+      scheduleId,
+      newMemberList: userList,
+    };
+    mutate(updatePayload);
   };
 
+  if (updateHasError) {
+    // TODO: 에러 다이얼로그 표시
+  }
+
+  if (updateIsPending) {
+    // TODO: 로딩 스피너 표시
+  }
+
   return (
     <>
-      {isLoading && <Loading display="spinner" size="lg" color="primary" />}
-      <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-4">
-        <AppBar backButton title={'모임 일정 등록하기'} />
-        <GroupForm
-          onSubmit={handleSubmit}
-          name={data.title}
-          description={data.description}
-          startDate={data.start_date}
-          endDate={data.end_date}
-          memo={data.memo}
-        />
-      </div>
+      {isLoading ? (
+        <Loading display="spinner" size="lg" color="primary" />
+      ) : (
+        <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-4">
+          <AppBar backButton title={'모임 일정 수정하기'} />
+          <GroupForm
+            onSubmit={handleSubmit}
+            name={groupScheduleData!.title}
+            description={groupScheduleData!.description}
+            startDate={groupScheduleData!.start_date}
+            endDate={groupScheduleData!.end_date}
+            memo={groupScheduleData!.memo}
+            memberList={groupMemberData}
+          />
+        </div>
+      )}
     </>
   );
 };

src/react-queries/queryKeys.ts

@@ -10,5 +10,13 @@ export const queries = createQueryKeyStore({
   groupSchedule: {
     getOne: (scheduleId: string) => [scheduleId],
     getAll: null,
+    update: null,
+  },
+  group: {
+    getOne: (groupId: string) => [groupId],
+    getAll: null,
+    update: null,
+    updateMember: null,
+    getAllMember: (groupId: string) => [groupId],
   },
 });

src/react-queries/useGetAllMember.ts

@@ -0,0 +1,9 @@
+import { getAllGroupMembers } from '@/apis/groupScheduleApis';
+import { useQuery } from '@tanstack/react-query';
+import { queries } from './queryKeys';
+
+export const useGetAllMember = (groupId: string) =>
+  useQuery({
+    queryKey: queries.group.getAllMember(groupId).queryKey,
+    queryFn: () => getAllGroupMembers(groupId),
+  });

src/react-queries/useUpdateGroupSchedule.ts

@@ -0,0 +1,60 @@
+import { updateGroupSchedule, updateGroupScheduleMember } from '@/apis/groupScheduleApis';
+import { useMutation } from '@tanstack/react-query';
+import { queries } from './queryKeys';
+import { Member } from '@/types/Member';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+interface UpdateGroupSchedule {
+  name: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  scheduleId: string;
+  newMemberList: Member[];
+}
+
+export const useUpdateGroupSchedule = () => {
+  const navigator = useNavigate();
+
+  const {
+    mutate: updateGroupScheduleMutate,
+    isPending: updateGroupScheduleIsPending,
+    isSuccess: updateGroupScheduleIsSuccess,
+    isError: updateGroupScheduleIsError,
+  } = useMutation({
+    mutationKey: queries.groupSchedule.update.queryKey,
+    mutationFn: updateGroupSchedule,
+  });
+
+  const {
+    mutate: updateGroupMemberMutate,
+    isPending: updateGroupMemberIsPending,
+    isSuccess: updateGroupMemberIsSuccess,
+    isError: updateGroupMemberIsError,
+  } = useMutation({
+    mutationKey: queries.group.updateMember.queryKey,
+    mutationFn: updateGroupScheduleMember,
+  });
+
+  const mutate = (data: UpdateGroupSchedule) => {
+    updateGroupScheduleMutate(data);
+    updateGroupMemberMutate({
+      updatedMemberList: data.newMemberList,
+      groupId: data.scheduleId,
+    });
+  };
+
+  useEffect(() => {
+    if (updateGroupScheduleIsSuccess && updateGroupMemberIsSuccess) {
+      navigator(-1);
+    }
+  }, [updateGroupScheduleIsSuccess, updateGroupMemberIsSuccess, navigator]);
+
+  return {
+    mutate,
+    isPending: updateGroupScheduleIsPending || updateGroupMemberIsPending,
+    isError: updateGroupScheduleIsError || updateGroupMemberIsError,
+  };
+};

src/tests/EditGroupSchedulePage.test.tsx

@@ -3,8 +3,9 @@ import { groupScheduleFixture } from './fixtures/groupScheduleFixture';
 import { render, screen, waitFor } from '@testing-library/react';
 import EditGroupPage from '@/pages/EditGroupSchedulePage';
 import wrapper from './helpers/wrapper';
-import { getOneGroupSchedule } from '@/apis/groupScheduleApis';
+import { getAllGroupMembers, getOneGroupSchedule } from '@/apis/groupScheduleApis';
 import { dateToYYMMDD } from '@/utils/dateUtils';
+import { memberListFixture } from './fixtures/memberFixture';
 
 vi.mock('react-router-dom', () => ({
   useNavigate: () => vi.fn(),
@@ -16,11 +17,13 @@ vi.mock('@/apis/groupScheduleApis');
 describe('EditGroupPage', () => {
   it('페이지 파라미터를 통해 그룹의 기본값을 받아올 수 있어야 한다.', async () => {
     vi.mocked(getOneGroupSchedule).mockResolvedValueOnce(groupScheduleFixture[0]);
+    vi.mocked(getAllGroupMembers).mockResolvedValueOnce(memberListFixture);
     render(<EditGroupPage />, {
       wrapper: wrapper,
     });
 
     await waitFor(() => expect(screen.getByPlaceholderText(/모임명/)).toHaveValue(groupScheduleFixture[0].title));
+    await waitFor(() => expect(screen.getByText(/gihwan/gi)).toBeInTheDocument());
 
     const groupNameInput = screen.getByPlaceholderText(/모임명/) as HTMLInputElement;
     const groupDescriptionInput = screen.getByPlaceholderText(/모임 설명/) as HTMLInputElement;
@@ -34,6 +37,4 @@ describe('EditGroupPage', () => {
     expect(groupDateEndInput.value).toBe(dateToYYMMDD(new Date(groupScheduleFixture[0].end_date)));
     expect(groupMemoInput.value).toBe(groupScheduleFixture[0].memo);
   });
-
-  it('저장 버튼을 누르면 그룹 수정 요청을 보낼 수 있어야 한다.', () => {});
 });

src/tests/fixtures/memberFixture.ts

@@ -0,0 +1,18 @@
+import { Member } from '@/types/Member';
+
+export const memberListFixture: Member[] = [
+  {
+    id: '1',
+    user_name: '최기환',
+    created_at: '2021-10-10',
+    phone: '010-1234-5678',
+    user_nickname: 'gihwan-dev',
+  },
+  {
+    id: '2',
+    user_name: '홍길동',
+    created_at: '2021-10-10',
+    phone: '010-1234-5678',
+    user_nickname: 'hong',
+  },
+];