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('');