From bc632f9445d3f1fda593e053d3ae0cb602945c5b Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 6 Dec 2020 18:00:43 +0900 Subject: [PATCH] [Feature] Change applyEndDate field to timestamp to sort - Change applyEndDate - Create a new field called createDate --- fixtures/study-group.js | 1 + .../introduce/StudyIntroduceForm.jsx | 21 ++++++++-- .../introduce/StudyIntroduceForm.test.jsx | 6 +++ src/reducers/groupSlice.js | 5 +-- src/reducers/groupSlice.test.js | 2 +- src/services/api.js | 42 +++++++++++++++---- src/services/api.test.js | 20 +-------- src/services/firebase.js | 2 + src/util/utils.js | 14 +++++++ src/util/utils.test.js | 39 ++++++++++++++++- 10 files changed, 116 insertions(+), 36 deletions(-) diff --git a/fixtures/study-group.js b/fixtures/study-group.js index 9497113..d8949ea 100644 --- a/fixtures/study-group.js +++ b/fixtures/study-group.js @@ -13,6 +13,7 @@ const studyGroup = { 'React', 'Algorithm', ], + createDate: new Date('2020/12/06'), }; export default studyGroup; diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx index 6108918..16938c1 100644 --- a/src/components/introduce/StudyIntroduceForm.jsx +++ b/src/components/introduce/StudyIntroduceForm.jsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import Moment from 'react-moment'; -import { isCheckedTimeStatus } from '../../util/utils'; +import { changeDateToTime, isCheckedTimeStatus } from '../../util/utils'; import Tags from '../common/Tags'; import palette from '../../styles/palette'; @@ -44,10 +44,20 @@ const IntroduceReferenceWrapper = styled.div` `; const ModeratorWrapper = styled.div` + display: flex; + justify-content: space-between; margin-bottom: 1.5rem; font-size: 1.2rem; font-weight: bold; color: ${palette.gray[6]}; + span { + margin-right: 1rem; + } + time { + font-size: 1rem; + font-weight: normal; + color: ${palette.gray[6]}; + } `; const IntroduceReference = styled.div` @@ -78,10 +88,10 @@ const StudyIntroduceForm = ({ group, realTime, onApply, user, }) => { const { - title, contents, tags, moderatorId, personnel, participants, applyEndDate, + title, contents, tags, moderatorId, personnel, participants, applyEndDate, createDate, } = group; - const applyEndTime = new Date(applyEndDate).getTime(); + const applyEndTime = changeDateToTime(applyEndDate); return ( @@ -97,7 +107,10 @@ const StudyIntroduceForm = ({ )} - {`🙋‍♂️ ${moderatorId}`} + + {`🙋‍♂️ ${moderatorId}`} + + {changeDateToTime(createDate)} diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/StudyIntroduceForm.test.jsx index b30e40d..5f167d6 100644 --- a/src/components/introduce/StudyIntroduceForm.test.jsx +++ b/src/components/introduce/StudyIntroduceForm.test.jsx @@ -19,6 +19,12 @@ describe('StudyIntroduceForm', () => { )); + it('renders createDate text', () => { + const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP }); + + expect(container).toHaveTextContent('2020년 12월 06일'); + }); + it('renders study group title and contents', () => { const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP }); diff --git a/src/reducers/groupSlice.js b/src/reducers/groupSlice.js index d4515ee..5748cd5 100644 --- a/src/reducers/groupSlice.js +++ b/src/reducers/groupSlice.js @@ -91,10 +91,7 @@ export const loadStudyGroup = (id) => async (dispatch) => { const group = await getStudyGroup(id); - dispatch(setStudyGroup({ - ...group, - id, - })); + dispatch(setStudyGroup(group)); }; export const writeStudyGroup = () => async (dispatch, getState) => { diff --git a/src/reducers/groupSlice.test.js b/src/reducers/groupSlice.test.js index 1532710..bff6f6c 100644 --- a/src/reducers/groupSlice.test.js +++ b/src/reducers/groupSlice.test.js @@ -157,7 +157,7 @@ describe('async actions', () => { const actions = store.getActions(); expect(actions[0]).toEqual(setStudyGroup(null)); - expect(actions[1]).toEqual(setStudyGroup({ id: 1 })); + expect(actions[1]).toEqual(setStudyGroup()); }); }); diff --git a/src/services/api.js b/src/services/api.js index eb46475..e64a966 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -1,11 +1,20 @@ -import { db, auth } from './firebase'; +import { db, auth, fireStore } from './firebase'; + +import { applyDateToString, createDateToString } from '../util/utils'; const branchGetGroups = (tag) => { if (tag) { - return db.collection('groups').where('tags', 'array-contains', tag).get(); + return db + .collection('groups') + .orderBy('applyEndDate', 'asc') + .where('tags', 'array-contains', tag) + .get(); } - return db.collection('groups').get(); + return db + .collection('groups') + .orderBy('applyEndDate', 'asc') + .get(); }; export const getStudyGroups = async (tag) => { @@ -14,23 +23,42 @@ export const getStudyGroups = async (tag) => { const groups = response.docs.map((doc) => ({ ...doc.data(), id: doc.id, + applyEndDate: applyDateToString(doc), + createDate: createDateToString(doc), })); return groups; }; export const getStudyGroup = async (id) => { - const response = await db.collection('groups').doc(id).get(); + const response = await db + .collection('groups') + .doc(id) + .get(); if (!response.exists) { return null; } - return response.data(); + return { + ...response.data(), + id: response.id, + applyEndDate: applyDateToString(response), + createDate: createDateToString(response), + }; }; -export const postStudyGroup = async (post) => { - const { id } = await db.collection('groups').add(post); +export const postStudyGroup = async (group) => { + const { applyEndDate } = group; + + const timeStamp = fireStore.Timestamp.fromDate(new Date(applyEndDate)); + const now = fireStore.FieldValue.serverTimestamp(); + + const { id } = await db.collection('groups').add({ + ...group, + applyEndDate: timeStamp, + createDate: now, + }); return id; }; diff --git a/src/services/api.test.js b/src/services/api.test.js index 6c171f4..49a6037 100644 --- a/src/services/api.test.js +++ b/src/services/api.test.js @@ -1,34 +1,16 @@ -import { db, auth } from './firebase'; +import { auth } from './firebase'; import { - postStudyGroup, postUserRegister, postUserLogin, postUserLogout, } from './api'; -import STUDY_GROUP from '../../fixtures/study-group'; - describe('api', () => { beforeEach(() => { jest.clearAllMocks(); }); - describe('postStudyGroup', () => { - const add = jest.fn((group) => group); - const collection = jest.spyOn( - db, 'collection', - ).mockReturnValue({ add }); - - it('write a study recruitment article', async () => { - await postStudyGroup(STUDY_GROUP); - - expect(collection).toHaveBeenCalledWith('groups'); - - expect(add).toHaveBeenCalledWith(STUDY_GROUP); - }); - }); - describe('postUserRegister', () => { const register = { user: { diff --git a/src/services/firebase.js b/src/services/firebase.js index 96b7bd0..18a7aff 100644 --- a/src/services/firebase.js +++ b/src/services/firebase.js @@ -16,6 +16,8 @@ const firebaseConfig = { firebase.initializeApp(firebaseConfig); +export const fireStore = firebase.firestore; + export const db = firebase.firestore(); export const auth = firebase.auth(); diff --git a/src/util/utils.js b/src/util/utils.js index ee680c3..d86493d 100644 --- a/src/util/utils.js +++ b/src/util/utils.js @@ -13,3 +13,17 @@ export const isCheckedTimeStatus = ({ const checkTrim = (value) => value.trim(); export const isCheckValidate = (values) => values.map(checkTrim).includes(''); + +export const changeDateToTime = (date) => new Date(date).getTime(); + +export const applyDateToString = (response) => response + .data() + .applyEndDate + .toDate() + .toString(); + +export const createDateToString = (response) => response + .data() + .createDate + .toDate() + .toString(); diff --git a/src/util/utils.test.js b/src/util/utils.test.js index 066de35..af926a2 100644 --- a/src/util/utils.test.js +++ b/src/util/utils.test.js @@ -1,4 +1,6 @@ -import { getAuth, getGroup, equal } from './utils'; +import { + getAuth, getGroup, equal, changeDateToTime, applyDateToString, createDateToString, +} from './utils'; test('getAuth', () => { const state = { @@ -39,3 +41,38 @@ test('equal', () => { expect(f(state)).toBeTruthy(); expect(g(state)).toBeFalsy(); }); + +test('changeDateToTime', () => { + const date = new Date(); + + const time = changeDateToTime(date); + expect(time).toBe(date.getTime()); +}); + +test('applyDateToString', () => { + const date = new Date('2020/12/06'); + const response = { + data: jest.fn().mockReturnValue({ + applyEndDate: { + toDate: jest.fn().mockReturnValue(date), + }, + }), + }; + + const time = applyDateToString(response); + expect(time).toBe(date.toString()); +}); + +test('createDateToString', () => { + const date = new Date('2020/12/06'); + const response = { + data: jest.fn().mockReturnValue({ + createDate: { + toDate: jest.fn().mockReturnValue(date), + }, + }), + }; + + const time = createDateToString(response); + expect(time).toBe(date.toString()); +});