Merge pull request #118 from saseungmin/delete-introduce-study-group

[Feature] Study introduction is deleted by clicking the delete button.

Author: saseungmin

src/components/introduce/IntroduceActionButtons.jsx

@@ -37,10 +37,15 @@ const ActionButton = styled.button`
   `};
 `;
 
-const IntroduceActionButtons = () => (
+const IntroduceActionButtons = ({ onRemove }) => (
   <IntroduceActionButtonsWrapper>
     <ActionButton revise>수정</ActionButton>
-    <ActionButton remove>삭제</ActionButton>
+    <ActionButton
+      remove
+      onClick={onRemove}
+    >
+      삭제
+    </ActionButton>
   </IntroduceActionButtonsWrapper>
 );
 

src/components/introduce/IntroduceForm.jsx

@@ -86,13 +86,14 @@ const IntroduceFooter = styled.div`
 `;
 
 const IntroduceForm = ({
-  group, realTime,
+  user, group, realTime, onRemove,
 }) => {
   const {
-    contents, tags, moderatorId, personnel, participants, applyEndDate, createDate,
+    contents, tags, moderatorId, personnel, participants, applyEndDate, createDate, id,
   } = group;
 
   const applyEndTime = changeDateToTime(applyEndDate);
+  const isCheckOwnGroupPost = (user && user) === moderatorId;
 
   return (
     <>
@@ -125,7 +126,11 @@ const IntroduceForm = ({
       <IntroduceContent dangerouslySetInnerHTML={{ __html: contents }} />
       <IntroduceFooter>
         <Tags tags={tags} />
-        <IntroduceActionButtons />
+        {isCheckOwnGroupPost && (
+          <IntroduceActionButtons
+            onRemove={() => onRemove(id)}
+          />
+        )}
       </IntroduceFooter>
     </>
   );

src/components/introduce/IntroduceForm.test.jsx

@@ -2,18 +2,22 @@ import React from 'react';
 
 import { MemoryRouter } from 'react-router-dom';
 
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import IntroduceForm from './IntroduceForm';
 
 import STUDY_GROUP from '../../../fixtures/study-group';
 
 describe('IntroduceForm', () => {
-  const renderIntroduceForm = ({ group, time }) => render((
+  const handleRemove = jest.fn();
+
+  const renderIntroduceForm = ({ group, time, user = 'user2' }) => render((
     <MemoryRouter>
       <IntroduceForm
+        user={user}
         group={group}
         realTime={time}
+        onRemove={handleRemove}
       />
     </MemoryRouter>
   ));
@@ -30,4 +34,30 @@ describe('IntroduceForm', () => {
 
     expect(container.innerHTML).toContain('<a ');
   });
+
+  context('with moderator', () => {
+    it('renders delete button and revise button', () => {
+      const { container } = renderIntroduceForm({ group: STUDY_GROUP });
+
+      expect(container).toHaveTextContent('수정');
+      expect(container).toHaveTextContent('삭제');
+    });
+
+    it('click to delete button call event', () => {
+      const { getByText } = renderIntroduceForm({ group: STUDY_GROUP });
+
+      fireEvent.click(getByText('삭제'));
+
+      expect(handleRemove).toBeCalled();
+    });
+  });
+
+  context('without moderator', () => {
+    it("doesn't renders delete button and revise button", () => {
+      const { container } = renderIntroduceForm({ group: STUDY_GROUP, user: 'user' });
+
+      expect(container).not.toHaveTextContent('수정');
+      expect(container).not.toHaveTextContent('삭제');
+    });
+  });
 });

src/containers/introduce/IntroduceFormContainer.jsx

@@ -1,29 +1,43 @@
 import React, { useState } from 'react';
 
 import { useInterval } from 'react-use';
-import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { getGroup } from '../../util/utils';
+import { getAuth, getGroup } from '../../util/utils';
 
 import IntroduceForm from '../../components/introduce/IntroduceForm';
+import { deleteGroup } from '../../reducers/groupSlice';
 
 const IntroduceFormContainer = () => {
   const [realTime, setRealTime] = useState(Date.now());
 
+  const history = useHistory();
+  const dispatch = useDispatch();
+
   const group = useSelector(getGroup('group'));
+  const user = useSelector(getAuth('user'));
 
   useInterval(() => {
     setRealTime(Date.now());
   }, 1000);
 
+  const onRemove = (id) => {
+    dispatch(deleteGroup(id));
+
+    history.push('/');
+  };
+
   if (!group) {
     return null;
   }
 
   return (
     <IntroduceForm
+      user={user}
       group={group}
       realTime={realTime}
+      onRemove={onRemove}
     />
   );
 };

src/containers/introduce/IntroduceFormContainer.test.jsx

@@ -1,20 +1,39 @@
 import React from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
 
 import IntroduceFormContainer from './IntroduceFormContainer';
 
+const mockPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory() {
+    return { push: mockPush };
+  },
+}));
+
 describe('IntroduceFormContainer', () => {
+  const dispatch = jest.fn();
+
   beforeEach(() => {
+    dispatch.mockClear();
+    mockPush.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
     useSelector.mockImplementation((state) => state({
       groupReducer: {
         group: given.group,
         applyFields: given.applyFields,
       },
+      authReducer: {
+        user: 'user1',
+      },
     }));
   });
 
@@ -44,6 +63,20 @@ describe('IntroduceFormContainer', () => {
 
       expect(container).toHaveTextContent('우리는 이것저것 합니다.1');
     });
+
+    it('click delete button call dispatch action', () => {
+      const { getByText } = renderIntroduceContainer(1);
+
+      const button = getByText('삭제');
+
+      expect(button).not.toBeNull();
+
+      fireEvent.click(button);
+
+      expect(dispatch).toBeCalled();
+
+      expect(mockPush).toBeCalledWith('/');
+    });
   });
 
   context('without group ', () => {

src/reducers/groupSlice.js

@@ -9,6 +9,7 @@ import {
   updatePostParticipant,
   deletePostParticipant,
   updateConfirmPostParticipant,
+  deletePostGroup,
 } from '../services/api';
 
 const writeInitialState = {
@@ -204,4 +205,8 @@ export const updateConfirmParticipant = (userEmail) => async (dispatch, getState
   }));
 };
 
+export const deleteGroup = (groupId) => async () => {
+  await deletePostGroup(groupId);
+};
+
 export default reducer;

src/reducers/groupSlice.test.js

@@ -17,6 +17,7 @@ import reducer, {
   changeApplyFields,
   clearApplyFields,
   updateConfirmParticipant,
+  deleteGroup,
 } from './groupSlice';
 
 import STUDY_GROUPS from '../../fixtures/study-groups';
@@ -368,4 +369,20 @@ describe('async actions', () => {
       });
     });
   });
+
+  describe('deleteGroup', () => {
+    beforeEach(() => {
+      store = mockStore({});
+    });
+
+    it('dispatches setStudyGroup', async () => {
+      const groupId = '1';
+
+      await store.dispatch(deleteGroup(groupId));
+
+      const actions = store.getActions();
+
+      expect(actions[0]).toEqual();
+    });
+  });
 });

src/services/__mocks__/api.js

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

src/services/api.js

@@ -79,6 +79,12 @@ export const deletePostParticipant = async ({ id, participants }) => {
   });
 };
 
+export const deletePostGroup = async (id) => {
+  const groups = db.collection('groups').doc(id);
+
+  await groups.delete();
+};
+
 export const updateConfirmPostParticipant = async ({ id, participants }) => {
   const groups = db.collection('groups').doc(id);