diff --git a/src/components/common/DateTimeChange.jsx b/src/components/common/DateTimeChange.jsx index 725e356..190d09c 100644 --- a/src/components/common/DateTimeChange.jsx +++ b/src/components/common/DateTimeChange.jsx @@ -4,7 +4,7 @@ import 'moment/locale/ko'; import moment from 'moment'; import Moment from 'react-moment'; -import { authorizedUsersNumber, isCheckedTimeStatus } from '../../util/utils'; +import { authorizedUsersNumber, changeDateToTime, isCheckedTimeStatus } from '../../util/utils'; import DateTimeStatus from '../../styles/DateTimeStatus'; @@ -13,7 +13,7 @@ moment.locale('ko'); const DateTimeChange = ({ group, page, time }) => { const { participants, personnel, applyEndDate } = group; - const applyEndTime = new Date(applyEndDate).getTime(); + const applyEndTime = changeDateToTime(applyEndDate); const valid = { time, applyEndTime, participants, personnel, diff --git a/src/components/introduce/StudyReviewForm.jsx b/src/components/introduce/StudyReviewForm.jsx index e559d3d..5feaf7b 100644 --- a/src/components/introduce/StudyReviewForm.jsx +++ b/src/components/introduce/StudyReviewForm.jsx @@ -4,6 +4,8 @@ import styled from '@emotion/styled'; import StarRatings from 'react-star-ratings'; +import { changeDateToTime, isCheckedTimeStatus } from '../../util/utils'; + import palette from '../../styles/palette'; import Textarea from '../../styles/Textarea'; import Button from '../../styles/Button'; @@ -39,7 +41,24 @@ const StudyReviewFormButton = styled(Button)` margin: 1px 0 0.8rem 0.5rem; `; -const StudyReviewForm = () => { +const isValidateUserInfo = (user) => (moderator) => !user || (moderator === user); + +const StudyReviewForm = ({ group, user, time }) => { + const { + participants, personnel, applyEndDate, moderatorId, + } = group; + + const applyEndTime = changeDateToTime(applyEndDate); + + const valid = { + time, applyEndTime, participants, personnel, + }; + + // TODO: 수정하자. + if (isValidateUserInfo(user)(moderatorId) || !isCheckedTimeStatus(valid)) { + return null; + } + const [rating, setRating] = useState(0); const changeRating = (newRating) => { diff --git a/src/components/introduce/StudyReviewForm.test.jsx b/src/components/introduce/StudyReviewForm.test.jsx index 8962d75..edaa5c3 100644 --- a/src/components/introduce/StudyReviewForm.test.jsx +++ b/src/components/introduce/StudyReviewForm.test.jsx @@ -4,16 +4,68 @@ import { render } from '@testing-library/react'; import StudyReviewForm from './StudyReviewForm'; +import { yesterday } from '../../util/utils'; +import STUDY_GROUP from '../../../fixtures/study-group'; + describe('StudyReviewForm', () => { - const renderStudyReviewForm = () => render(( - + const renderStudyReviewForm = ({ group, time, user }) => render(( + )); - it('renders study review form text', () => { - const { container, getByPlaceholderText } = renderStudyReviewForm(); + context('with user', () => { + describe('User is not moderator and applyEndDate is Deadline', () => { + const info = { + group: { + ...STUDY_GROUP, + applyEndDate: yesterday, + }, + time: Date.now(), + user: 'user1', + }; + + it('renders study review form', () => { + const { container } = renderStudyReviewForm(info); + + expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); + }); + }); + + describe('User is moderator', () => { + const info = { + group: { + ...STUDY_GROUP, + applyEndDate: yesterday, + }, + time: Date.now(), + user: 'user2', + }; + + it('nothing renders study review form', () => { + const { container } = renderStudyReviewForm(info); + + expect(container).toBeEmptyDOMElement(); + }); + }); + }); + + context('without user', () => { + const info = { + group: { + ...STUDY_GROUP, + applyEndDate: yesterday, + }, + time: Date.now(), + user: null, + }; + + it('nothing renders study review form', () => { + const { container } = renderStudyReviewForm(info); - expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); - expect(container).toHaveTextContent('후기 등록하기'); - expect(getByPlaceholderText('후기를 입력해주세요!')).not.toBeNull(); + expect(container).toBeEmptyDOMElement(); + }); }); }); diff --git a/src/containers/introduce/StudyReviewContainer.jsx b/src/containers/introduce/StudyReviewContainer.jsx index 2f9ce9d..244aa4c 100644 --- a/src/containers/introduce/StudyReviewContainer.jsx +++ b/src/containers/introduce/StudyReviewContainer.jsx @@ -1,9 +1,33 @@ -import React from 'react'; +import React, { useState } from 'react'; + +import { useSelector } from 'react-redux'; +import { useInterval } from 'react-use'; + +import { getAuth, getGroup } from '../../util/utils'; import StudyReviewForm from '../../components/introduce/StudyReviewForm'; -const StudyReviewContainer = () => ( - -); +const StudyReviewContainer = () => { + const [realTime, setRealTime] = useState(Date.now()); + + const group = useSelector(getGroup('group')); + const user = useSelector(getAuth('user')); + + useInterval(() => { + setRealTime(Date.now()); + }, 1000); + + if (!group) { + return null; + } + + return ( + + ); +}; export default StudyReviewContainer; diff --git a/src/containers/introduce/StudyReviewContainer.test.jsx b/src/containers/introduce/StudyReviewContainer.test.jsx index 362f858..ac6cd50 100644 --- a/src/containers/introduce/StudyReviewContainer.test.jsx +++ b/src/containers/introduce/StudyReviewContainer.test.jsx @@ -1,18 +1,52 @@ import React from 'react'; +import { useSelector } from 'react-redux'; + import { render } from '@testing-library/react'; import StudyReviewContainer from './StudyReviewContainer'; +import STUDY_GROUP from '../../../fixtures/study-group'; +import { yesterday } from '../../util/utils'; + describe('StudyReviewContainer', () => { + beforeEach(() => { + useSelector.mockImplementation((state) => state({ + groupReducer: { + group: given.group, + }, + authReducer: { + user: given.user, + }, + })); + }); + const renderStudyReviewContainer = () => render(( )); - it('renders study group title and contents', () => { - const { container } = renderStudyReviewContainer(); + context('with login and group', () => { + given('group', () => ({ + ...STUDY_GROUP, + applyEndDate: yesterday, + })); + given('user', () => ('user1')); + + it('renders study review form', () => { + const { container } = renderStudyReviewContainer(); + + expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); + }); + }); + + context('without login and group', () => { + given('user', () => (null)); + given('group', () => (null)); + + it('nothing renders review form', () => { + const { container } = renderStudyReviewContainer(); - expect(container).toHaveTextContent('스터디 후기를 작성해주세요!'); - expect(container).toHaveTextContent('후기 등록하기'); + expect(container).toBeEmptyDOMElement(); + }); }); }); diff --git a/src/util/utils.js b/src/util/utils.js index f13c905..af809a5 100644 --- a/src/util/utils.js +++ b/src/util/utils.js @@ -29,6 +29,7 @@ export const changeDateToTime = (date) => new Date(date).getTime(); const nowDate = new Date(); export const tomorrow = nowDate.setDate(nowDate.getDate() + 1); +export const yesterday = nowDate.setDate(nowDate.getDate() - 1); export const toStringEndDateFormat = (endDate) => moment(new Date(endDate)) .format('YYYY-MM-DDTHH:mm:ss')