[Feature] Apply for study group click action

src/components/introduce/ApplyStatusButton.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+
+const ApplyStatusButtonWrapper = styled.button``;
+
+const ApplyStatusButton = ({
+  timeStatus, onApply, user, applyStatus,
+}) => {
+  if (applyStatus) {
+    return (
+      <ApplyStatusButtonWrapper
+        type="button"
+        className="deadline"
+      >
+        신청 완료
+      </ApplyStatusButtonWrapper>
+    );
+  }
+
+  if (timeStatus) {
+    return (
+      <ApplyStatusButtonWrapper
+        type="button"
+        className="deadline"
+      >
+        모집 마감
+      </ApplyStatusButtonWrapper>
+    );
+  }
+
+  if (!user) {
+    return (
+      <ApplyStatusButtonWrapper
+        type="button"
+        className="deadline"
+      >
+        로그인 후 신청 가능합니다.
+      </ApplyStatusButtonWrapper>
+    );
+  }
+
+  return (
+    <ApplyStatusButtonWrapper
+      type="button"
+      className="apply"
+      onClick={onApply}
+    >
+      신청하기
+    </ApplyStatusButtonWrapper>
+  );
+};
+
+export default ApplyStatusButton;

src/components/introduce/ApplyStatusButton.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import ApplyStatusButton from './ApplyStatusButton';
+
+describe('ApplyStatusButton', () => {
+  const handleApply = jest.fn();
+
+  const renderApplyStatusButton = ({
+    applyStatus = false,
+    timeStatus = false,
+    user = true,
+  }) => render((
+    <ApplyStatusButton
+      applyStatus={applyStatus}
+      onApply={handleApply}
+      timeStatus={timeStatus}
+      user={user}
+    />
+  ));
+
+  context('When the study application is completed', () => {
+    it('renders application completed', () => {
+      const { container } = renderApplyStatusButton({ applyStatus: true });
+
+      expect(container).toHaveTextContent('신청 완료');
+    });
+  });
+
+  context('When the study application deadline', () => {
+    it('renders application deadline', () => {
+      const { container } = renderApplyStatusButton({ timeStatus: true });
+
+      expect(container).toHaveTextContent('모집 마감');
+    });
+  });
+
+  context('When not log in', () => {
+    it('renders "You can apply after logging in." text', () => {
+      const { container } = renderApplyStatusButton({ user: false });
+
+      expect(container).toHaveTextContent('로그인 후 신청 가능합니다.');
+    });
+  });
+
+  context('When it is possible to apply', () => {
+    it('renders "apply" text', () => {
+      const { container } = renderApplyStatusButton({});
+
+      expect(container).toHaveTextContent('신청하기');
+    });
+  });
+});

src/components/introduce/StudyIntroduceForm.jsx

@@ -9,6 +9,7 @@ import { isCheckedTimeStatus } from '../../util/utils';
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
+import ApplyStatusButton from './ApplyStatusButton';
 
 const StudyIntroduceWrapper = styled.div`
   margin-top: 6em;
@@ -99,7 +100,9 @@ const IntroduceContent = styled.div`
   padding: 1.5rem;
 `;
 
-const StudyIntroduceForm = ({ group, realTime }) => {
+const StudyIntroduceForm = ({
+  group, realTime, onApply, user,
+}) => {
   const {
     title, contents, tags, moderatorId, personnel, participants, applyEndDate,
   } = group;
@@ -110,20 +113,13 @@ const StudyIntroduceForm = ({ group, realTime }) => {
     <StudyIntroduceWrapper>
       <IntroduceHeaderWrapper>
         <h1>{title}</h1>
-        {isCheckedTimeStatus({ ...group, time: realTime, applyEndTime }) ? (
-          <button
-            type="button"
-            className="deadline"
-          >
-            모집마감
-          </button>
-        ) : (
-          <button
-            type="button"
-            className="apply"
-          >
-            신청하기
-          </button>
+        {moderatorId !== user && (
+          <ApplyStatusButton
+            user={user}
+            onApply={onApply}
+            applyStatus={participants.includes(user)}
+            timeStatus={isCheckedTimeStatus({ ...group, time: realTime, applyEndTime })}
+          />
         )}
       </IntroduceHeaderWrapper>
       <ModeratorWrapper>

src/components/introduce/StudyIntroduceForm.test.jsx

@@ -9,9 +9,10 @@ import StudyIntroduceForm from './StudyIntroduceForm';
 import STUDY_GROUP from '../../../fixtures/study-group';
 
 describe('StudyIntroduceForm', () => {
-  const renderStudyIntroduceForm = ({ group, time }) => render((
+  const renderStudyIntroduceForm = ({ group, time, user = 'user' }) => render((
     <MemoryRouter>
       <StudyIntroduceForm
+        user={user}
         group={group}
         realTime={time}
       />
@@ -22,7 +23,6 @@ describe('StudyIntroduceForm', () => {
     const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP });
 
     expect(container).toHaveTextContent('스터디를 소개합니다.2');
-    expect(container).toHaveTextContent('우리는 이것저것 합니다.2');
   });
 
   it('renders links of tags', () => {
@@ -31,6 +31,14 @@ describe('StudyIntroduceForm', () => {
     expect(container.innerHTML).toContain('<a ');
   });
 
+  context('When the author and the logged-in user have the same ID', () => {
+    it("doesn't renders apply button", () => {
+      const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP, user: 'user2' });
+
+      expect(container).not.toHaveTextContent('신청하기');
+    });
+  });
+
   context('When the study recruitment is closed', () => {
     const time = Date.now();
 

src/containers/introduce/IntroduceContainer.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useInterval } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { get } from '../../util/utils';
-import { loadStudyGroup } from '../../reducers/slice';
+import { loadStudyGroup, updateStudyGroup } from '../../reducers/slice';
 
 import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
 
@@ -13,16 +13,23 @@ const IntroduceContainer = ({ groupId }) => {
 
   const dispatch = useDispatch();
 
+  const group = useSelector(get('group'));
+  const user = useSelector(get('user'));
+
   useEffect(() => {
     dispatch(loadStudyGroup(groupId));
-  }, []);
-
-  const group = useSelector(get('group'));
+  }, [dispatch, groupId]);
 
   useInterval(() => {
     setRealTime(Date.now());
   }, 1000);
 
+  const onApplyStudy = useCallback(() => {
+    if (user) {
+      dispatch(updateStudyGroup());
+    }
+  }, [dispatch, user]);
+
   if (!group) {
     return (
       <div>로딩중..</div>
@@ -31,8 +38,10 @@ const IntroduceContainer = ({ groupId }) => {
 
   return (
     <StudyIntroduceForm
+      user={user}
       group={group}
       realTime={realTime}
+      onApply={onApplyStudy}
     />
   );
 };

src/containers/introduce/IntroduceContainer.test.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 
 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 STUDY_GROUP from '../../../fixtures/study-group';
+
 import IntroduceContainer from './IntroduceContainer';
 
 describe('IntroduceContainer', () => {
@@ -18,6 +20,7 @@ describe('IntroduceContainer', () => {
 
     useSelector.mockImplementation((state) => state({
       group: given.group,
+      user: given.user,
     }));
   });
 
@@ -65,4 +68,38 @@ describe('IntroduceContainer', () => {
       expect(container).toHaveTextContent('로딩중..');
     });
   });
+
+  context('with user', () => {
+    given('group', () => (STUDY_GROUP));
+    given('user', () => ('user'));
+
+    it('click event dispatches action call updateStudyGroup', () => {
+      const { getByText } = renderIntroduceContainer(1);
+
+      const button = getByText('신청하기');
+
+      expect(button).not.toBeNull();
+
+      fireEvent.click(button);
+
+      expect(dispatch).toBeCalledTimes(2);
+    });
+  });
+
+  context('without user', () => {
+    given('group', () => (STUDY_GROUP));
+    given('user', () => (null));
+
+    it("click event doesn't dispatches action call updateStudyGroup", () => {
+      const { getByText } = renderIntroduceContainer(1);
+
+      const button = getByText('로그인 후 신청 가능합니다.');
+
+      expect(button).not.toBeNull();
+
+      fireEvent.click(button);
+
+      expect(dispatch).toBeCalledTimes(1);
+    });
+  });
 });

src/reducers/slice.js

@@ -9,6 +9,7 @@ import {
   postUserLogin,
   postUserLogout,
   postUserRegister,
+  updateParticipants,
 } from '../services/api';
 import { removeItem, saveItem } from '../services/storage';
 
@@ -176,7 +177,10 @@ export const loadStudyGroup = (id) => async (dispatch) => {
 
   const group = await getStudyGroup(id);
 
-  dispatch(setStudyGroup(group));
+  dispatch(setStudyGroup({
+    ...group,
+    id,
+  }));
 };
 
 export const writeStudyGroup = () => async (dispatch, getState) => {
@@ -193,6 +197,19 @@ export const writeStudyGroup = () => async (dispatch, getState) => {
   dispatch(clearWriteFields());
 };
 
+export const updateStudyGroup = () => async (dispatch, getState) => {
+  const { group, user } = getState();
+
+  const newGroup = produce(group, (draft) => {
+    draft.participants.push(user);
+  });
+
+  // TODO: 같은 유저가 들어가도 update 된다. validation 하기
+  await updateParticipants(newGroup);
+
+  dispatch(setStudyGroup(newGroup));
+};
+
 export const requestRegister = () => async (dispatch, getState) => {
   const { register: { userEmail, password } } = getState();
 

src/reducers/slice.test.js

@@ -22,6 +22,7 @@ import reducer, {
   setUser,
   logout,
   requestLogout,
+  updateStudyGroup,
 } from './slice';
 
 import STUDY_GROUPS from '../../fixtures/study-groups';
@@ -332,7 +333,7 @@ describe('async actions', () => {
       const actions = store.getActions();
 
       expect(actions[0]).toEqual(setStudyGroup(null));
-      expect(actions[1]).toEqual(setStudyGroup(undefined));
+      expect(actions[1]).toEqual(setStudyGroup({ id: 1 }));
     });
   });
 
@@ -343,7 +344,7 @@ describe('async actions', () => {
       });
     });
 
-    it('dispatches clearWriteFields', async () => {
+    it('dispatches clearWriteFields and successWrite', async () => {
       await store.dispatch(writeStudyGroup());
 
       const actions = store.getActions();
@@ -353,6 +354,26 @@ describe('async actions', () => {
     });
   });
 
+  describe('updateStudyGroup', () => {
+    beforeEach(() => {
+      store = mockStore({
+        group: STUDY_GROUP,
+        user: 'example',
+      });
+    });
+
+    it('dispatches setStudyGroup', async () => {
+      await store.dispatch(updateStudyGroup());
+
+      const actions = store.getActions();
+
+      expect(actions[0]).toEqual(setStudyGroup({
+        ...STUDY_GROUP,
+        participants: [...STUDY_GROUP.participants, 'example'],
+      }));
+    });
+  });
+
   describe('requestRegister', () => {
     const register = {
       userEmail: 'seungmin@naver.com',