feat: class component to functional component

cypress/integration/one_day_e2e.spec.js

@@ -1,12 +1,11 @@
-/// <reference types="cypress" />
+/// <reference types='cypress' />
 
-const holidays = ["20210801"];
+const holidays = ['20210801'];
 
 describe('end to end tests for a day', () => {
     beforeEach(() => {
         cy.runServer(holidays);
         cy.visit('/');
-        cy.waitServer();
     });
 
     it('count 1 weekday for a weekday', () => {

cypress/integration/range_date_e2e.spec.js

@@ -1,10 +1,9 @@
-/// <reference types="cypress" />
+/// <reference types='cypress' />
 
 describe('end to end tests for a range of days', () => {
     beforeEach(() => {
         cy.runServer([]);
         cy.visit('/');
-        cy.waitServer();
     });
 
     it('count 5 weekdays for a week in a month.', () => {

cypress/integration/ui.spec.js

@@ -1,10 +1,9 @@
-/// <reference types="cypress" />
+/// <reference types='cypress' />
 
 describe('test whether ui elements are working', () => {
     beforeEach(() => {
         cy.runServer([]);
         cy.visit('/');
-        cy.waitServer();
     });
 
     it('show today if the range is not selected', () => {

cypress/support/commands.js

@@ -1,4 +1,4 @@
-/// <reference types="cypress" />
+/// <reference types='cypress' />
 
 import { format } from 'date-fns';
 
@@ -50,5 +50,4 @@ Cypress.Commands.add('setDateRange', setDateRange);
 Cypress.Commands.add('setDate', setDate);
 
 Cypress.Commands.add('runServer', runFakeServer);
-
 Cypress.Commands.add('waitServer', waitFakeServer);

src/App.js

@@ -1,69 +1,59 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import 'react-date-range/dist/styles.css';
 import 'react-date-range/dist/theme/default.css';
 import * as locales from 'react-date-range/dist/locale';
 import { DateRange } from 'react-date-range';
 import Range from './domain/range';
 
-function CountResult({ counter, range }) {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    const handleRange = async () => {
-      const cache = await counter.countWeekdayInRange(range);
-      setCount(cache);
-    };
-    handleRange();
-  }, [counter, range]);
-
+function CountResult({ count }) {
   return (
     <p data-testid='result'>{count} 일</p>
   );
 }
 
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.counter = props.counter;
-  }
-
-  state = {
+function DateRangePicker({ onChangeRange }) {
+  const [dateRange, setRange] = useState({
     startDate: new Date(),
     endDate: new Date(),
-    key: 'range'
-  }
-
-  toRange = (state) => {
-    const { startDate, endDate } = state;
+    key: 'dateRange'
+  });
+  const handleChangeDateRange = ({ dateRange }) => {
+    const range = new Range(dateRange.startDate, dateRange.endDate);
 
-    return new Range(startDate, endDate);
-  }
+    setRange(dateRange);
+    onChangeRange(range);
+  };
 
-  update = ({ range }) => {
-    this.setState(range);
-  }
+  return (
+    <DateRange
+      locale={locales['ko']}
+      editableDateInputs={true}
+      onChange={item => handleChangeDateRange(item)}
+
+      ranges={[dateRange]}
+      dateDisplayFormat={'yyyy/MM/dd'}
+    />
+  );
+}
 
-  render() {
-    const range = this.state;
+function App({ counter }) {
+  const [count, setCount] = useState(0);
+  const handleChangeRange = async (range) => {
+    const newCount = await counter.countWeekdayInRange(range);
+    setCount(newCount);
+  };
 
-    return (
-      <div className="App">
-        <h1>날짜 수 세기</h1>
-        <DateRange
-          locale={locales['ko']}
-          editableDateInputs={true}
-          onChange={item => this.update(item)}
-          moveRangeOnFirstSelection={false}
-          ranges={[range]}
-          dateDisplayFormat={'yyyy/MM/dd'}
-        />
-        <CountResult
-          counter={this.counter}
-          range={this.toRange(range)} 
-        />
-      </div>
-    );
-  }
+  return (
+    <div className="App">
+      <h1>날짜 수 세기</h1>
+      <DateRangePicker 
+        onChangeRange={handleChangeRange}
+      />
+      <CountResult
+        count={count}
+      />
+    </div>
+  );
 }
 
 export default App;

src/cache/holidayCache.js

@@ -0,0 +1,20 @@
+import format from 'date-fns/format';
+
+function getKey(date) {
+    return format(date, 'yyyy/MM');
+}
+
+export default class HolidayCache {
+    constructor(dataSource) {
+        this.dataSource = dataSource;
+        this.cache = {};
+    }
+
+    getHolidaysIn = async (month) => {
+        const key = getKey(month);
+        if (!(key in Object.keys(this.cache))) {
+            this.cache[key] = await this.dataSource.getHolidaysIn(month);
+        }
+        return this.cache[key];
+    }
+}

src/index.js

@@ -3,11 +3,12 @@ import React from 'react';
 import App from './App';
 import WeekdayCounter from './domain/weekdayCounter';
 import * as HerokuHolidayDataSource from './dataSource/herokuHolidayDataSource';
+import HolidayCache from './cache/holidayCache';
 
 ReactDOM.render(
     <React.StrictMode>
       <App 
-        counter={new WeekdayCounter(HerokuHolidayDataSource)}
+        counter={new WeekdayCounter(new HolidayCache(HerokuHolidayDataSource))}
       />
     </React.StrictMode>,
     document.getElementById('root')