diff --git a/src/components/introduce/ApplicantViewButton.jsx b/src/components/introduce/ApplicantViewButton.jsx index c715f92..41b850b 100644 --- a/src/components/introduce/ApplicantViewButton.jsx +++ b/src/components/introduce/ApplicantViewButton.jsx @@ -14,9 +14,7 @@ const ApplicantViewButton = ({ const [applyCancelModal, setApplyCancelModal] = useState(false); const [modalForm, setModalForm] = useState(false); - const { - moderatorId, participants, applyEndDate, - } = group; + const { moderatorId, participants, applyEndDate } = group; const applyEndTime = changeDateToTime(applyEndDate); diff --git a/src/components/introduce/ModeratorViewButton.jsx b/src/components/introduce/ModeratorViewButton.jsx index 4310672..ba6114b 100644 --- a/src/components/introduce/ModeratorViewButton.jsx +++ b/src/components/introduce/ModeratorViewButton.jsx @@ -1,12 +1,23 @@ import React, { useState } from 'react'; -import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton'; +import { changeDateToTime, isCheckedOnlyTimeStatus } from '../../util/utils'; + import ParticipantListModal from './modals/ParticipantListModal'; +import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton'; -const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => { +const ModeratorViewButton = ({ + group, user, onUpdateConfirm, realTime, +}) => { const [ListModal, setListModal] = useState(false); - const { moderatorId, participants } = group; + const { moderatorId, participants, applyEndDate } = group; + + const applyEndTime = changeDateToTime(applyEndDate); + + const checkTime = { + time: realTime, + applyEndTime, + }; const handleClick = () => { setListModal(true); @@ -20,6 +31,17 @@ const ModeratorViewButton = ({ group, user, onUpdateConfirm }) => { return null; } + if (isCheckedOnlyTimeStatus(checkTime)) { + return ( + + 스터디를 진행해주세요! + + ); + } + return ( <> { ); }; -export default ModeratorViewButton; +export default React.memo(ModeratorViewButton); diff --git a/src/components/introduce/ModeratorViewButton.test.jsx b/src/components/introduce/ModeratorViewButton.test.jsx index 38e2d61..bb1d4bf 100644 --- a/src/components/introduce/ModeratorViewButton.test.jsx +++ b/src/components/introduce/ModeratorViewButton.test.jsx @@ -7,29 +7,46 @@ import ModeratorViewButton from './ModeratorViewButton'; import STUDY_GROUP from '../../../fixtures/study-group'; describe('ModeratorViewButton', () => { - const renderModeratorViewButton = ({ group, user }) => render(( + const renderModeratorViewButton = ({ group, user, realTime }) => render(( )); context('When the organizer and the logged-in user are different', () => { + const realTime = Date.now(); + + const nowDate = new Date(); + const tomorrow = nowDate.setDate(nowDate.getDate() + 1); + + const user = 'user'; + const group = { ...STUDY_GROUP, - moderatorId: 'user', + moderatorId: 'user2', + applyEndDate: tomorrow, }; it('nothing renders', () => { - const { container } = renderModeratorViewButton({ group, user: 'user1' }); + const { container } = renderModeratorViewButton({ + group, + user, + realTime, + }); expect(container).toBeEmptyDOMElement(); }); }); context('When the host and logged in user are the same', () => { - const group = { + const user = 'user'; + const realTime = Date.now(); + + const applyEndDateSettings = (applyEndDate) => ({ ...STUDY_GROUP, + applyEndDate, moderatorId: 'user', participants: [ { @@ -41,32 +58,52 @@ describe('ModeratorViewButton', () => { id: 'test2', }, ], - }; + }); - it('renders button', () => { - const { container } = renderModeratorViewButton({ group, user: 'user' }); + context('When the current date is before the deadline', () => { + const nowDate = new Date(); + const tomorrow = nowDate.setDate(nowDate.getDate() + 1); - expect(container).toHaveTextContent('스터디 참여 승인하기'); - }); + const group = applyEndDateSettings(tomorrow); + + it('renders button', () => { + const { container } = renderModeratorViewButton({ group, user, realTime }); + + expect(container).toHaveTextContent('스터디 참여 승인하기'); + }); + + it('click button and renders List of study applicants', () => { + const { getByText, container } = renderModeratorViewButton({ group, user, realTime }); + const button = getByText('스터디 참여 승인하기'); + + fireEvent.click(button); + + expect(container).toHaveTextContent('스터디 신청자 목록'); + }); + + it('Clicking the close button closes the modal window.', () => { + const { getByText, container } = renderModeratorViewButton({ group, user, realTime }); + const button = getByText('스터디 참여 승인하기'); - it('click button and renders List of study applicants', () => { - const { getByText, container } = renderModeratorViewButton({ group, user: 'user' }); - const button = getByText('스터디 참여 승인하기'); + fireEvent.click(button); - fireEvent.click(button); + fireEvent.click(getByText('닫기')); - expect(container).toHaveTextContent('스터디 신청자 목록'); + expect(container).not.toHaveTextContent('스터디 신청자 목록'); + }); }); - it('Clicking the close button closes the modal window.', () => { - const { getByText, container } = renderModeratorViewButton({ group, user: 'user' }); - const button = getByText('스터디 참여 승인하기'); + context('When the current date is after the deadline', () => { + const nowDate = new Date(); + const yesterday = nowDate.setDate(nowDate.getDate() - 1); - fireEvent.click(button); + const group = applyEndDateSettings(yesterday); - fireEvent.click(getByText('닫기')); + it('renders "Please proceed with the study!" status message', () => { + const { container } = renderModeratorViewButton({ group, user, realTime }); - expect(container).not.toHaveTextContent('스터디 신청자 목록'); + expect(container).toHaveTextContent('스터디를 진행해주세요!'); + }); }); }); }); diff --git a/src/containers/introduce/IntroduceHeaderContainer.jsx b/src/containers/introduce/IntroduceHeaderContainer.jsx index 6f2f4b0..0034a50 100644 --- a/src/containers/introduce/IntroduceHeaderContainer.jsx +++ b/src/containers/introduce/IntroduceHeaderContainer.jsx @@ -69,9 +69,10 @@ const IntroduceHeaderContainer = () => { onChangeApplyFields={onChangeApplyFields} /> ); diff --git a/src/containers/introduce/IntroduceHeaderContainer.test.jsx b/src/containers/introduce/IntroduceHeaderContainer.test.jsx index a056068..50c6dd9 100644 --- a/src/containers/introduce/IntroduceHeaderContainer.test.jsx +++ b/src/containers/introduce/IntroduceHeaderContainer.test.jsx @@ -193,8 +193,12 @@ describe('IntroduceHeaderContainer', () => { }); context('When the logged-in user is the author', () => { + const nowDate = new Date(); + const tomorrow = nowDate.setDate(nowDate.getDate() + 1); + given('group', () => ({ ...STUDY_GROUP, + applyEndDate: tomorrow, participants: [ { confirm: true, diff --git a/src/util/utils.js b/src/util/utils.js index d86493d..8375981 100644 --- a/src/util/utils.js +++ b/src/util/utils.js @@ -10,6 +10,8 @@ export const isCheckedTimeStatus = ({ time, applyEndTime, participants, personnel, }) => (!!((time - applyEndTime >= 0 || participants.length === parseInt(personnel, 10)))); +export const isCheckedOnlyTimeStatus = ({ time, applyEndTime }) => (time - applyEndTime >= 0); + const checkTrim = (value) => value.trim(); export const isCheckValidate = (values) => values.map(checkTrim).includes('');