[Feature] Completed editing of study introduction

src/containers/write/WriteButtonsContainer.jsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getAuth, getGroup } from '../../util/utils';
-import { writeStudyGroup } from '../../reducers/groupSlice';
+import { editStudyGroup, writeStudyGroup } from '../../reducers/groupSlice';
 
 import WriteButtons from '../../components/write/WriteButtons';
 
@@ -24,6 +24,11 @@ const WriteButtonsContainer = () => {
   }, [user, history]);
 
   const onSubmit = () => {
+    if (originalArticleId) {
+      dispatch(editStudyGroup(originalArticleId));
+      return;
+    }
+
     dispatch(writeStudyGroup());
   };
 

src/containers/write/WriteButtonsContainer.test.jsx

@@ -31,6 +31,7 @@ describe('WriteButtonsContainer', () => {
       groupReducer: {
         writeField: given.writeField,
         groupId: given.groupId,
+        originalArticleId: given.originalArticleId,
       },
       authReducer: {
         user: given.user,
@@ -44,83 +45,131 @@ describe('WriteButtonsContainer', () => {
     </MemoryRouter>
   ));
 
-  it('render Write buttons', () => {
-    given('writeField', () => (WRITE_FORM));
+  context('with originalArticleId', () => {
+    given('originalArticleId', () => ('1'));
 
-    const { container } = renderWriteButtonsContainer();
+    it('renders edit button', () => {
+      given('writeField', () => (WRITE_FORM));
 
-    expect(container).toHaveTextContent('등록하기');
-    expect(container).toHaveTextContent('취소');
-  });
+      const { container } = renderWriteButtonsContainer();
+
+      expect(container).toHaveTextContent('수정하기');
+      expect(container).toHaveTextContent('취소');
+    });
+
+    describe('when click submit button and then without input value null, so validation check success', () => {
+      given('user', () => ('user'));
+      given('writeField', () => (WRITE_FORM));
+
+      context('with group', () => {
+        given('groupId', () => ('1'));
+
+        it('dispatch action editStudyGroup event', () => {
+          const { getByText } = renderWriteButtonsContainer();
+
+          fireEvent.click(getByText('수정하기'));
 
-  describe('when click cancel button', () => {
-    given('groupId', () => (null));
-    given('writeField', () => (WRITE_FORM));
+          expect(dispatch).toBeCalledTimes(1);
 
-    it('Go to the main page', () => {
-      const { getByText } = renderWriteButtonsContainer();
+          expect(mockPush).toBeCalledWith('/introduce/1');
+        });
+      });
+
+      context('without group', () => {
+        given('groupId', () => (null));
+
+        it('dispatch action submit event', () => {
+          const { getByText } = renderWriteButtonsContainer();
 
-      fireEvent.click(getByText('취소'));
+          fireEvent.click(getByText('수정하기'));
 
-      expect(mockPush).toBeCalledWith('/');
+          expect(mockPush).not.toBeCalled();
+        });
+      });
     });
   });
 
-  describe('when click submit button', () => {
-    context('with user', () => {
-      given('user', () => ('user'));
+  context('without originalArticleId', () => {
+    given('originalArticleId', () => (null));
+
+    it('render Write buttons', () => {
+      given('writeField', () => (WRITE_FORM));
 
-      context('without input value null, so validation check success', () => {
-        given('writeField', () => (WRITE_FORM));
+      const { container } = renderWriteButtonsContainer();
 
-        context('with group', () => {
-          given('groupId', () => ('1'));
+      expect(container).toHaveTextContent('등록하기');
+      expect(container).toHaveTextContent('취소');
+    });
+
+    describe('when click cancel button', () => {
+      given('groupId', () => (null));
+      given('writeField', () => (WRITE_FORM));
+
+      it('Go to the main page', () => {
+        const { getByText } = renderWriteButtonsContainer();
+
+        fireEvent.click(getByText('취소'));
+
+        expect(mockPush).toBeCalledWith('/');
+      });
+    });
 
-          it('dispatch action writeStudyGroup event', () => {
-            const { getByText } = renderWriteButtonsContainer();
+    describe('when click submit button', () => {
+      context('with user', () => {
+        given('user', () => ('user'));
 
-            fireEvent.click(getByText('등록하기'));
+        context('without input value null, so validation check success', () => {
+          given('writeField', () => (WRITE_FORM));
 
-            expect(dispatch).toBeCalledTimes(1);
+          context('with group', () => {
+            given('groupId', () => ('1'));
 
-            expect(mockPush).toBeCalledWith('/introduce/1');
+            it('dispatch action writeStudyGroup event', () => {
+              const { getByText } = renderWriteButtonsContainer();
+
+              fireEvent.click(getByText('등록하기'));
+
+              expect(dispatch).toBeCalledTimes(1);
+
+              expect(mockPush).toBeCalledWith('/introduce/1');
+            });
           });
-        });
 
-        context('without group', () => {
-          given('groupId', () => (null));
+          context('without group', () => {
+            given('groupId', () => (null));
 
-          it('dispatch action submit event', () => {
-            const { getByText } = renderWriteButtonsContainer();
+            it('dispatch action submit event', () => {
+              const { getByText } = renderWriteButtonsContainer();
 
-            fireEvent.click(getByText('등록하기'));
+              fireEvent.click(getByText('등록하기'));
 
-            expect(mockPush).not.toBeCalled();
+              expect(mockPush).not.toBeCalled();
+            });
           });
         });
       });
-    });
-
-    context('without user', () => {
-      given('user', () => (null));
-
-      given('writeField', () => ({
-        title: '123',
-        contents: '우리는 이것저것 합니다.1',
-        moderatorId: 'user1',
-        applyEndDate: '2020-10-01',
-        participants: [],
-        personnel: '1',
-        tags: [
-          'javascript',
-          'react',
-        ],
-      }));
-
-      it('go to redirection main page', () => {
-        renderWriteButtonsContainer();
 
-        expect(mockPush).toBeCalledWith('/');
+      context('without user', () => {
+        given('user', () => (null));
+
+        given('writeField', () => ({
+          title: '123',
+          contents: '우리는 이것저것 합니다.1',
+          moderatorId: 'user1',
+          applyEndDate: '2020-10-01',
+          participants: [],
+          personnel: '1',
+          tags: [
+            'javascript',
+            'react',
+          ],
+        }));
+
+        it('go to redirection main page', () => {
+          renderWriteButtonsContainer();
+
+          expect(mockPush).toBeCalledWith('/');
+        });
       });
     });
   });

src/reducers/groupSlice.js

@@ -10,6 +10,7 @@ import {
   deletePostParticipant,
   updateConfirmPostParticipant,
   deletePostGroup,
+  editPostStudyGroup,
 } from '../services/api';
 
 const writeInitialState = {
@@ -154,6 +155,18 @@ export const writeStudyGroup = () => async (dispatch, getState) => {
   dispatch(clearWriteFields());
 };
 
+export const editStudyGroup = (id) => async (dispatch, getState) => {
+  const { groupReducer } = getState();
+
+  await editPostStudyGroup({
+    ...groupReducer.writeField,
+    id,
+  });
+
+  dispatch(successWrite(id));
+  dispatch(clearWriteFields());
+};
+
 export const updateParticipant = ({ reason, wantToGet }) => async (dispatch, getState) => {
   const { groupReducer: { group }, authReducer: { user } } = getState();
 

src/reducers/groupSlice.test.js

@@ -19,6 +19,7 @@ import reducer, {
   updateConfirmParticipant,
   deleteGroup,
   setOriginalArticle,
+  editStudyGroup,
 } from './groupSlice';
 
 import STUDY_GROUPS from '../../fixtures/study-groups';
@@ -269,8 +270,33 @@ describe('async actions', () => {
 
       const actions = store.getActions();
 
-      expect(actions[0]).toEqual(successWrite(undefined));
-      expect(actions[1]).toEqual(clearWriteFields(undefined));
+      expect(actions[0]).toEqual(successWrite());
+      expect(actions[1]).toEqual(clearWriteFields());
+    });
+  });
+
+  describe('editStudyGroup', () => {
+    beforeEach(() => {
+      store = mockStore({
+        groupReducer: {
+          writeField: WRITE_FORM,
+          originalArticleId: '1',
+        },
+      });
+    });
+
+    it('dispatches clearWriteFields and successWrite', async () => {
+      await store.dispatch(editStudyGroup('1'));
+
+      const actions = store.getActions();
+
+      expect(actions[0]).toEqual({
+        payload: '1',
+        type: 'group/successWrite',
+      });
+      expect(actions[1]).toEqual({
+        type: 'group/clearWriteFields',
+      });
     });
   });
 

src/services/__mocks__/api.js

@@ -17,3 +17,5 @@ export const deletePostParticipant = jest.fn();
 export const updateConfirmPostParticipant = jest.fn();
 
 export const deletePostGroup = jest.fn();
+
+export const editPostStudyGroup = jest.fn();

src/services/api.js

@@ -63,6 +63,22 @@ export const postStudyGroup = async (group) => {
   return id;
 };
 
+export const editPostStudyGroup = async ({
+  title, applyEndDate, contents, tags, personnel, id,
+}) => {
+  const groups = db.collection('groups').doc(id);
+
+  const timeStamp = fireStore.Timestamp.fromDate(new Date(applyEndDate));
+
+  await groups.update({
+    title,
+    contents,
+    applyEndDate: timeStamp,
+    personnel,
+    tags,
+  });
+};
+
 export const updatePostParticipant = async ({ id, user }) => {
   const groups = db.collection('groups').doc(id);