From 87e6809826366fcb9ca2a4505197b9eba499c0dd Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Sat, 12 Dec 2020 17:02:35 +0900
Subject: [PATCH] [Fix] Change the logic of the number of authorized users

- Fixed the number of approved users of the application status
- component name changed  to IntroduceForm
---
 ...udyIntroduceForm.jsx => IntroduceForm.jsx} |  8 ++++----
 ...ceForm.test.jsx => IntroduceForm.test.jsx} | 13 +++++++------
 .../introduce/IntroduceFormContainer.jsx      |  4 ++--
 src/util/utils.js                             |  4 ++++
 src/util/utils.test.js                        | 19 ++++++++++++++++++-
 5 files changed, 35 insertions(+), 13 deletions(-)
 rename src/components/introduce/{StudyIntroduceForm.jsx => IntroduceForm.jsx} (92%)
 rename src/components/introduce/{StudyIntroduceForm.test.jsx => IntroduceForm.test.jsx} (58%)

diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/IntroduceForm.jsx
similarity index 92%
rename from src/components/introduce/StudyIntroduceForm.jsx
rename to src/components/introduce/IntroduceForm.jsx
index 20acccd..7ddd5bf 100644
--- a/src/components/introduce/StudyIntroduceForm.jsx
+++ b/src/components/introduce/IntroduceForm.jsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 
 import Moment from 'react-moment';
 
-import { changeDateToTime } from '../../util/utils';
+import { authorizedUsersNumber, changeDateToTime } from '../../util/utils';
 
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
@@ -74,7 +74,7 @@ const IntroduceContent = styled.div`
   padding: 1.5rem;
 `;
 
-const StudyIntroduceForm = ({
+const IntroduceForm = ({
   group, realTime,
 }) => {
   const {
@@ -95,7 +95,7 @@ const StudyIntroduceForm = ({
         <IntroduceReference>
           <label htmlFor="application-status">신청 현황 :</label>
           <span id="application-status">
-            {`${participants.length} / ${personnel}`}
+            {`${authorizedUsersNumber(participants)} / ${personnel}`}
           </span>
         </IntroduceReference>
         <IntroduceReference>
@@ -117,4 +117,4 @@ const StudyIntroduceForm = ({
   );
 };
 
-export default React.memo(StudyIntroduceForm);
+export default React.memo(IntroduceForm);
diff --git a/src/components/introduce/StudyIntroduceForm.test.jsx b/src/components/introduce/IntroduceForm.test.jsx
similarity index 58%
rename from src/components/introduce/StudyIntroduceForm.test.jsx
rename to src/components/introduce/IntroduceForm.test.jsx
index 43bc2b9..0c9618c 100644
--- a/src/components/introduce/StudyIntroduceForm.test.jsx
+++ b/src/components/introduce/IntroduceForm.test.jsx
@@ -4,14 +4,14 @@ import { MemoryRouter } from 'react-router-dom';
 
 import { render } from '@testing-library/react';
 
-import StudyIntroduceForm from './StudyIntroduceForm';
+import IntroduceForm from './IntroduceForm';
 
 import STUDY_GROUP from '../../../fixtures/study-group';
 
-describe('StudyIntroduceForm', () => {
-  const renderStudyIntroduceForm = ({ group, time }) => render((
+describe('IntroduceForm', () => {
+  const renderIntroduceForm = ({ group, time }) => render((
     <MemoryRouter>
-      <StudyIntroduceForm
+      <IntroduceForm
         group={group}
         realTime={time}
       />
@@ -19,13 +19,14 @@ describe('StudyIntroduceForm', () => {
   ));
 
   it('renders createDate text', () => {
-    const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP });
+    const { container } = renderIntroduceForm({ group: STUDY_GROUP });
 
     expect(container).toHaveTextContent('2020년 12월 06일');
+    expect(container).toHaveTextContent('1 / 2');
   });
 
   it('renders links of tags', () => {
-    const { container } = renderStudyIntroduceForm({ group: STUDY_GROUP });
+    const { container } = renderIntroduceForm({ group: STUDY_GROUP });
 
     expect(container.innerHTML).toContain('<a ');
   });
diff --git a/src/containers/introduce/IntroduceFormContainer.jsx b/src/containers/introduce/IntroduceFormContainer.jsx
index b56cb8f..6babdd5 100644
--- a/src/containers/introduce/IntroduceFormContainer.jsx
+++ b/src/containers/introduce/IntroduceFormContainer.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 
 import { getGroup } from '../../util/utils';
 
-import StudyIntroduceForm from '../../components/introduce/StudyIntroduceForm';
+import IntroduceForm from '../../components/introduce/IntroduceForm';
 
 const IntroduceFormContainer = () => {
   const [realTime, setRealTime] = useState(Date.now());
@@ -21,7 +21,7 @@ const IntroduceFormContainer = () => {
   }
 
   return (
-    <StudyIntroduceForm
+    <IntroduceForm
       group={group}
       realTime={realTime}
     />
diff --git a/src/util/utils.js b/src/util/utils.js
index 8375981..1487c70 100644
--- a/src/util/utils.js
+++ b/src/util/utils.js
@@ -18,6 +18,10 @@ export const isCheckValidate = (values) => values.map(checkTrim).includes('');
 
 export const changeDateToTime = (date) => new Date(date).getTime();
 
+export const authorizedUsersNumber = (participants) => participants
+  .filter(({ confirm }) => confirm && confirm === true)
+  .length + 1;
+
 export const applyDateToString = (response) => response
   .data()
   .applyEndDate
diff --git a/src/util/utils.test.js b/src/util/utils.test.js
index af926a2..625c151 100644
--- a/src/util/utils.test.js
+++ b/src/util/utils.test.js
@@ -1,5 +1,11 @@
 import {
-  getAuth, getGroup, equal, changeDateToTime, applyDateToString, createDateToString,
+  getAuth,
+  getGroup,
+  equal,
+  changeDateToTime,
+  applyDateToString,
+  createDateToString,
+  authorizedUsersNumber,
 } from './utils';
 
 test('getAuth', () => {
@@ -76,3 +82,14 @@ test('createDateToString', () => {
   const time = createDateToString(response);
   expect(time).toBe(date.toString());
 });
+
+test('authorizedUsersNumber', () => {
+  const participants = [
+    { id: 'test1', confirm: false },
+    { id: 'test2', confirm: true },
+    { id: 'test3' },
+  ];
+
+  const length = authorizedUsersNumber(participants);
+  expect(length).toBe(2);
+});