Merge pull request #160 from imaginer-dev/51-그룹일정-추가-시-DB-저장

51 그룹일정 추가 시 db 저장

Author: gihwan-dev

src/apis/groupScheduleApis.ts

@@ -1,5 +1,53 @@
 import supabase from '@/supabase';
 import { Member } from '@/types/Member';
+interface addGroupShedule {
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  newMemberList: Member[];
+}
+
+export const addGroupScheduleFetch = async ({ startDate, endDate, newMemberList, ...props }: addGroupShedule) => {
+  // 그룹을 생성한다.
+  const { data: groupInfo, error: groupInfoError } = await supabase
+    .from('groups')
+    .insert({
+      name: props.title,
+      open: true,
+      start_date: startDate,
+      end_date: endDate,
+    })
+    .select()
+    .single();
+
+  if (!groupInfo || groupInfoError) {
+    throw groupInfoError;
+  }
+
+  // 그룹에 멤버를 추가한다.
+  const { error: groupMemberError } = await supabase.from('group_user_ralations').insert(
+    newMemberList.map((member) => ({
+      group_id: groupInfo.id,
+      user_id: member.id,
+    })),
+  );
+  if (groupMemberError) {
+    throw groupMemberError;
+  }
+  // 그룹 일정을 생성한다.
+  const { data: groupScheduleData, error: groupScheduleError } = await supabase
+    .from('group_schedules')
+    .insert({ ...props, start_date: startDate, end_date: endDate, group_id: groupInfo.id })
+    .select()
+    .single();
+
+  if (groupScheduleError) {
+    throw groupScheduleError;
+  }
+  return groupScheduleData;
+};
 
 interface UpdateGroupSchedule {
   name: string;

src/components/common/UserInvite.tsx

@@ -37,8 +37,8 @@ const UserInvite: FC<Props> = ({ member, setMember }) => {
     <div>
       멤버 초대하기 *
       <ul className="flex gap-2">
-        {member.map((user) => (
-          <UserInvited id={user.id} user_nickname={user.user_nickname} key={user.id + '-UserInvited'} />
+        {member.map(({ user_nickname, id }) => (
+          <UserInvited id={id} user_nickname={user_nickname} key={id + '-UserInvited'} />
         ))}
         <li>
           <DialogButton

src/components/common/UserInviteDialog.tsx

@@ -10,7 +10,7 @@ interface Props {
   onUserItemClick: (clickedUser: Member) => void;
 }
 
-const UserInvite: FC<Props> = ({ list, onChange, onSearchClick, onUserItemClick }) => {
+const UserInviteDialog: FC<Props> = ({ list, onChange, onSearchClick, onUserItemClick }) => {
   return (
     <div>
       <div className="flex items-end">
@@ -33,4 +33,4 @@ const UserInvite: FC<Props> = ({ list, onChange, onSearchClick, onUserItemClick
   );
 };
 
-export default UserInvite;
+export default UserInviteDialog;

src/hooks/useAddGroupSchedule.ts

@@ -0,0 +1,42 @@
+import { useAddNewGroup } from '@/react-queries/useAddNewGroup';
+import { Member } from '@/types/Member';
+import { useRef } from 'react';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+export const useAddGroupSchedule = () => {
+  const { mutate, isPending } = useAddNewGroup();
+  const successDialogRef = useRef<DialogElement | null>(null);
+  const failDialogRef = useRef<DialogElement | null>(null);
+
+  const addGroupSchedule = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
+    const formData = new FormData(e.currentTarget);
+    const newGroupSchedule = {
+      title: 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,
+      newMemberList: userList,
+    };
+    mutate(newGroupSchedule, {
+      onError: (error) => {
+        console.error(error);
+        failDialogRef.current?.openModal();
+      },
+      onSuccess: () => {
+        successDialogRef.current?.openModal();
+      },
+    });
+  };
+
+  return {
+    addGroupSchedule,
+    isPending,
+    successDialogRef,
+    failDialogRef,
+  };
+};

src/pages/AddGroupSchedulePage.tsx

@@ -1,17 +1,22 @@
 import GroupForm from '@/components/Group/GroupForm';
 import AppBar from '@/components/common/AppBar';
+import Dialog from '@/components/common/Dialog';
+import { useAddGroupSchedule } from '@/hooks/useAddGroupSchedule';
+import { Member } from '@/types/Member';
 
 const AddGroupPage = () => {
-  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
+  const { addGroupSchedule, isPending, failDialogRef, successDialogRef } = useAddGroupSchedule();
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
     e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    console.log(formData.get('name'));
+    addGroupSchedule(e, userList);
   };
 
   return (
     <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-6">
       <AppBar backButton title={'모임 일정 등록하기'} />
-      <GroupForm onSubmit={handleSubmit} />
+      <GroupForm onSubmit={handleSubmit} isLoading={isPending} />
+      <Dialog ref={successDialogRef} desc="모임 일정이 등록되었습니다." />
+      <Dialog ref={failDialogRef} desc="모임 일정 등록에 실패했습니다." />
     </div>
   );
 };

src/react-queries/queryKeys.ts

@@ -18,5 +18,6 @@ export const queries = createQueryKeyStore({
     update: null,
     updateMember: null,
     getAllMember: (groupId: string) => [groupId],
+    add: null,
   },
 });

src/react-queries/useAddNewGroup.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+import { queries } from './queryKeys';
+import { addGroupScheduleFetch } from '@/apis/groupScheduleApis';
+
+export const useAddNewGroup = () =>
+  useMutation({
+    mutationKey: queries.group.add.queryKey,
+    mutationFn: addGroupScheduleFetch,
+  });

src/supabase/supabse.types.ts

@@ -8,7 +8,7 @@ export type Database = {
           created_at: string;
           description: string | null;
           end_date: string;
-          group_id: string;
+          group_id: number;
           id: number;
           memo: string | null;
           owner_id: string;
@@ -19,7 +19,7 @@ export type Database = {
           created_at?: string;
           description?: string | null;
           end_date: string;
-          group_id?: string;
+          group_id: number;
           id?: number;
           memo?: string | null;
           owner_id?: string;
@@ -30,7 +30,7 @@ export type Database = {
           created_at?: string;
           description?: string | null;
           end_date?: string;
-          group_id?: string;
+          group_id?: number;
           id?: number;
           memo?: string | null;
           owner_id?: string;
@@ -42,14 +42,7 @@ export type Database = {
             foreignKeyName: 'group_schedules_group_id_fkey';
             columns: ['group_id'];
             isOneToOne: false;
-            referencedRelation: 'users';
-            referencedColumns: ['id'];
-          },
-          {
-            foreignKeyName: 'group_schedules_owner_id_fkey';
-            columns: ['owner_id'];
-            isOneToOne: false;
-            referencedRelation: 'users';
+            referencedRelation: 'groups';
             referencedColumns: ['id'];
           },
         ];
@@ -179,20 +172,23 @@ export type Database = {
         Row: {
           created_at: string;
           id: string;
+          image_url: string | null;
           phone: string;
           user_name: string;
-          user_nickname: string;
+          user_nickname: string | null;
         };
         Insert: {
           created_at?: string;
           id?: string;
+          image_url?: string | null;
           phone: string;
           user_name: string;
           user_nickname?: string | null;
         };
         Update: {
           created_at?: string;
           id?: string;
+          image_url?: string | null;
           phone?: string;
           user_name?: string;
           user_nickname?: string | null;

src/tests/fixtures/groupScheduleFixture.ts

@@ -10,6 +10,6 @@ export const groupScheduleFixture: Database['public']['Tables']['group_schedules
     end_date: '2024-05-18 06:22:02+00',
     owner_id: '1d7a5662-922e-4167-932d-4dda46f67ef2',
     memo: 'Test용으로 생성된 모임 일정 입니다.',
-    group_id: '1',
+    group_id: 1,
   },
 ];

src/tests/fixtures/memberFixture.ts

@@ -7,12 +7,14 @@ export const memberListFixture: Member[] = [
     created_at: '2021-10-10',
     phone: '010-1234-5678',
     user_nickname: 'gihwan-dev',
+    image_url: '',
   },
   {
     id: '2',
     user_name: '홍길동',
     created_at: '2021-10-10',
     phone: '010-1234-5678',
     user_nickname: 'hong',
+    image_url: '',
   },
 ];