[Feature] Apply submit action redux

.github/workflows/ci.yml

@@ -6,8 +6,6 @@ name: CI
 on:
   push:
     branches: [ main ]
-  pull_request:
-    branches: [ main ]
 
 jobs:
   build:

fixtures/study-group.js

@@ -4,7 +4,7 @@ const studyGroup = {
   moderatorId: 'user2',
   applyEndDate: '2020-12-23',
   participants: [
-    'user2',
+    { id: 'user2' },
   ],
   personnel: 2,
   contents: '우리는 이것저것 합니다.2',

src/components/introduce/IntroduceHeader.jsx

@@ -64,7 +64,7 @@ const IntroduceHeader = ({
 
   const handleFormSubmit = () => {
     setModalForm(false);
-    onApply();
+    onApply(applyFields);
   };
 
   const handleFormCancel = () => {
@@ -80,7 +80,7 @@ const IntroduceHeader = ({
             user={user}
             onApply={handleApply}
             onCancel={handleApplyCancelConfirmClick}
-            applyStatus={participants.includes(user)}
+            applyStatus={participants.some(({ id }) => id === user)}
             timeStatus={isCheckedTimeStatus({ ...group, time: realTime, applyEndTime })}
           />
           <AskLoginModal

src/components/introduce/IntroduceHeader.test.jsx

@@ -42,8 +42,8 @@ describe('IntroduceHeader', () => {
       ...STUDY_GROUP,
       applyEndDate: tomorrow,
       participants: [
-        'user2',
-        'user',
+        { id: 'user2' },
+        { id: 'user' },
       ],
       personnel: 3,
     };
@@ -100,7 +100,7 @@ describe('IntroduceHeader', () => {
         ...STUDY_GROUP,
         applyEndDate: yesterday,
         participants: [
-          'user2',
+          { id: 'user2' },
         ],
         personnel: 2,
       };
@@ -120,8 +120,8 @@ describe('IntroduceHeader', () => {
         ...STUDY_GROUP,
         applyEndDate: tomorrow,
         participants: [
-          'user2',
-          'user3',
+          { id: 'user2' },
+          { id: 'user3' },
         ],
         personnel: 2,
       };
@@ -141,7 +141,7 @@ describe('IntroduceHeader', () => {
         ...STUDY_GROUP,
         applyEndDate: tomorrow,
         participants: [
-          'user2',
+          { id: 'user2' },
         ],
         personnel: 2,
       };
@@ -178,7 +178,7 @@ describe('IntroduceHeader', () => {
         ...STUDY_GROUP,
         applyEndDate: tomorrow,
         participants: [
-          'user2',
+          { id: 'user2' },
         ],
         personnel: 2,
       };
@@ -199,7 +199,7 @@ describe('IntroduceHeader', () => {
         ...STUDY_GROUP,
         applyEndDate: tomorrow,
         participants: [
-          'user2',
+          { id: 'user2' },
         ],
         personnel: 2,
       };

src/containers/introduce/IntroduceContainer.jsx

@@ -29,8 +29,8 @@ const IntroduceContainer = ({ groupId }) => {
     setRealTime(Date.now());
   }, 1000);
 
-  const onApplyStudy = useCallback(() => {
-    dispatch(updateParticipant());
+  const onApplyStudy = useCallback(({ reason, wantToGet }) => {
+    dispatch(updateParticipant({ reason, wantToGet }));
   }, [dispatch]);
 
   const onApplyCancel = useCallback(() => {

src/containers/introduce/IntroduceContainer.test.jsx

@@ -141,8 +141,8 @@ describe('IntroduceContainer', () => {
       ...STUDY_GROUP,
       applyEndDate: tomorrow,
       participants: [
-        'user2',
-        'user',
+        { id: 'user2' },
+        { id: 'user' },
       ],
       personnel: 3,
     };

src/reducers/groupSlice.js

@@ -113,22 +113,31 @@ export const writeStudyGroup = () => async (dispatch, getState) => {
 
   const groupId = await postStudyGroup(produce(groupReducer.writeField, (draft) => {
     draft.moderatorId = user;
-    draft.participants.push(user);
+    draft.participants.push({
+      id: user,
+    });
   }));
 
   dispatch(successWrite(groupId));
   dispatch(clearWriteFields());
 };
 
-export const updateParticipant = () => async (dispatch, getState) => {
+export const updateParticipant = ({ reason, wantToGet }) => async (dispatch, getState) => {
   const { groupReducer: { group }, authReducer: { user } } = getState();
 
+  const userInfo = {
+    id: user,
+    reason,
+    wantToGet,
+    confirm: false,
+  };
+
   const newGroup = produce(group, (draft) => {
-    draft.participants.push(user);
+    draft.participants.push(userInfo);
   });
 
   await updatePostParticipant({
-    user,
+    user: userInfo,
     id: group.id,
   });
 
@@ -138,13 +147,15 @@ export const updateParticipant = () => async (dispatch, getState) => {
 export const deleteParticipant = () => async (dispatch, getState) => {
   const { groupReducer: { group }, authReducer: { user } } = getState();
 
+  const participants = group.participants.filter(({ id }) => id !== user);
+
   const newGroup = {
     ...group,
-    participants: group.participants.filter((participant) => participant !== user),
+    participants,
   };
 
   await deletePostParticipant({
-    user,
+    participants,
     id: group.id,
   });
 

src/reducers/groupSlice.test.js

@@ -232,14 +232,23 @@ describe('async actions', () => {
       });
     });
 
+    const applyFields = {
+      reason: '이유',
+      wantToGet: '원하는 것',
+    };
+
     it('dispatches setStudyGroup', async () => {
-      await store.dispatch(updateParticipant());
+      await store.dispatch(updateParticipant(applyFields));
 
       const actions = store.getActions();
 
       expect(actions[0]).toEqual(setStudyGroup({
         ...STUDY_GROUP,
-        participants: [...STUDY_GROUP.participants, 'example'],
+        participants: [...STUDY_GROUP.participants, {
+          ...applyFields,
+          id: 'example',
+          confirm: false,
+        }],
       }));
     });
   });
@@ -248,8 +257,8 @@ describe('async actions', () => {
     const group = {
       id: 1,
       participants: [
-        'user2',
-        'example',
+        { id: 'user2' },
+        { id: 'example' },
       ],
     };
     const user = 'example';
@@ -272,7 +281,7 @@ describe('async actions', () => {
 
       expect(actions[0]).toEqual(setStudyGroup({
         ...group,
-        participants: group.participants.filter((participant) => participant !== user),
+        participants: group.participants.filter(({ id }) => id !== user),
       }));
     });
   });

src/reducers/rootSlice.js

@@ -1,4 +1,5 @@
 import { combineReducers } from '@reduxjs/toolkit';
+
 import authReducer from './authSlice';
 import groupReducer from './groupSlice';
 

src/services/api.js

@@ -71,11 +71,11 @@ export const updatePostParticipant = async ({ id, user }) => {
   });
 };
 
-export const deletePostParticipant = async ({ id, user }) => {
+export const deletePostParticipant = async ({ id, participants }) => {
   const groups = db.collection('groups').doc(id);
 
   await groups.update({
-    participants: fireStore.FieldValue.arrayRemove(user),
+    participants,
   });
 };