[Feature] Change applyEndDate field to timestamp to sort

fixtures/study-group.js

@@ -13,6 +13,7 @@ const studyGroup = {
     'React',
     'Algorithm',
   ],
+  createDate: new Date('2020/12/06'),
 };
 
 export default studyGroup;

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 (
     <StudyIntroduceWrapper>
@@ -97,7 +107,10 @@ const StudyIntroduceForm = ({
         )}
       </IntroduceHeaderWrapper>
       <ModeratorWrapper>
-        {`🙋‍♂️ ${moderatorId}`}
+        <span>
+          {`🙋‍♂️ ${moderatorId}`}
+        </span>
+        <Moment interval={0} format="YYYY년 MM월 DD일">{changeDateToTime(createDate)}</Moment>
       </ModeratorWrapper>
       <IntroduceReferenceWrapper>
         <IntroduceReference>

src/components/introduce/StudyIntroduceForm.test.jsx

@@ -19,6 +19,12 @@ describe('StudyIntroduceForm', () => {
     </MemoryRouter>
   ));
 
+  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 });
 

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) => {

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

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;
 };

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: {

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

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

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());
+});