#12 - feat: add cache operation and add value object

nullist0 · May 30, 2021 · 4cadf49 · 4cadf49
1 parent 2433eb4
commit 4cadf49
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 96 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.js b/src/App.js
@@ -1,46 +1,11 @@
 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({ count }) {
-  return (
-    <p data-testid='result'>{count} 일</p>
-  );
-}
-
-function DateRangePicker({ onChangeRange }) {
-  const [dateRange, setRange] = useState({
-    startDate: new Date(),
-    endDate: new Date(),
-    key: 'dateRange'
-  });
-  const handleChangeDateRange = ({ dateRange }) => {
-    const range = new Range(dateRange.startDate, dateRange.endDate);
-
-    setRange(dateRange);
-    onChangeRange(range);
-  };
-
-  return (
-    <DateRange
-      locale={locales['ko']}
-      editableDateInputs={true}
-      onChange={item => handleChangeDateRange(item)}
-
-      ranges={[dateRange]}
-      dateDisplayFormat={'yyyy/MM/dd'}
-    />
-  );
-}
+import { DateRangePicker } from './components/DateRangePicker';
+import { CountResult } from './components/CountResult';
 
 function App({ counter }) {
   const [count, setCount] = useState(0);
-  const handleChangeRange = async (range) => {
-    const newCount = await counter.countWeekdayInRange(range);
-    setCount(newCount);
+  const handleChangeRange = (range) => {
+    counter.countWeekdayInRange(range).then(setCount);
   };
 
   return (

diff --git a/src/cache/holidayCache.js b/src/cache/holidayCache.js
diff --git a/src/components/CountResult.js b/src/components/CountResult.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function CountResult({ count }) {
+  return (
+    <p data-testid='result'>{count} 일</p>
+  );
+}
diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import * as locales from 'react-date-range/dist/locale';
+import { DateRange } from 'react-date-range';
+import Range from '../domain/range';
+
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+
+export function DateRangePicker({ onChangeRange }) {
+  const [dateRange, setRange] = useState({
+    startDate: new Date(),
+    endDate: new Date(),
+    key: 'dateRange'
+  });
+  const handleChangeDateRange = ({ dateRange }) => {
+    const range = new Range(dateRange.startDate, dateRange.endDate);
+
+    setRange(dateRange);
+    onChangeRange(range);
+  };
+
+  return (
+    <DateRange
+      locale={locales['ko']}
+      editableDateInputs={true}
+      onChange={item => handleChangeDateRange(item)}
+      ranges={[dateRange]}
+      dateDisplayFormat={'yyyy/MM/dd'} />
+  );
+}
diff --git a/src/dataSource/herokuHolidayDataSource.js b/src/dataSource/herokuHolidayDataSource.js
@@ -1,5 +1,10 @@
 import axios from 'axios';
-import { format } from 'date-fns';
+import { isBefore } from 'date-fns';
+import addMonths from 'date-fns/addMonths';
+import isWeekend from 'date-fns/isWeekend';
+import isWithinInterval from 'date-fns/isWithinInterval';
+import startOfMonth from 'date-fns/startOfMonth';
+import Month from './month';
 
 function readDate(dateString) {
     const year = parseInt(dateString.substr(0, 4));
@@ -9,17 +14,39 @@ function readDate(dateString) {
     return new Date(year, month - 1, day);
 }
 
-async function getHolidaysIn(month) {
-    const params = {
-        year: format(month, 'yyyy'),
-        month: format(month, 'MM')
-    };
-    const apiUrl = `https://shielded-forest-67184.herokuapp.com/holidays?year=${params.year}&month=${params.month}`;
-    const { data: { dates } } = await axios.get(apiUrl);
+const cache = {};
+
+async function getHolidaysInMonth({ year, month }) {
+    const apiUrl = `https://shielded-forest-67184.herokuapp.com/holidays?year=${year}&month=${month}`;
+
+    if (cache[apiUrl] === undefined) {
+        const { data: { dates } } = await axios.get(apiUrl);
+        const holidays = dates.map(readDate);
+        cache[apiUrl] = holidays;
+    }
+    return cache[apiUrl];
+}
+
+function* monthsInRange(range) {
+    const {start, end} = range;
+    const endMonth = startOfMonth(addMonths(end, 1));
+    let currentMonth = startOfMonth(start);
+
+    while(isBefore(currentMonth, endMonth)) {
+        yield new Month(currentMonth);
+        currentMonth = addMonths(currentMonth, 1);
+    }
+}
+
+async function getHolidaysInRange(range) {
+    const months = Array.from(monthsInRange(range));
 
-    return dates.map(readDate);
+    return (await Promise.all(months.map(getHolidaysInMonth)))
+        .flat()
+        .filter(date => isWithinInterval(date, range))
+        .filter(date => !isWeekend(date));
 }
 
 export {
-    getHolidaysIn
+    getHolidaysInRange
 }
diff --git a/src/dataSource/month.js b/src/dataSource/month.js
@@ -0,0 +1,13 @@
+export default class Month {
+    constructor(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+
+        this.year = year.toString();
+        this.month = month.toString().padStart(2, '0');
+    }
+
+    toString() {
+        return this.year + this.month;
+    }
+}
diff --git a/src/domain/weekdayCounter.js b/src/domain/weekdayCounter.js
@@ -1,16 +1,4 @@
-import { differenceInBusinessDays, addDays, isWithinInterval, startOfMonth, addMonths, isBefore, isWeekend } from 'date-fns';
-
-function* monthsInRange(range) {
-    const {start, end} = range;
-    const endMonth = startOfMonth(addMonths(end, 1));
-
-    let currentMonth = startOfMonth(start);
-
-    while(isBefore(currentMonth, endMonth)) {
-        yield currentMonth;
-        currentMonth = addMonths(currentMonth, 1);
-    }
-}
+import { differenceInBusinessDays, addDays } from 'date-fns';
 
 function countAllNonWeekendIn(range) {
     const {start, end} = range;
@@ -19,19 +7,10 @@ function countAllNonWeekendIn(range) {
     return differenceInBusinessDays(nextEndDate, start);
 }
 
-async function countWeekdayHolidaysIn(dataSource, range) {
-    const months = Array.from(monthsInRange(range));
-    const holidaysInRange = (await Promise.all(months.map(dataSource.getHolidaysIn)))
-        .flat()
-        .filter(date => isWithinInterval(date, range))
-        .filter(date => !isWeekend(date));
-
-    return holidaysInRange.length;
-}
-
 async function countWeekdayInRange(dataSource, range) {
     const nonWeekendCount = countAllNonWeekendIn(range);
-    const holidaysCount = await countWeekdayHolidaysIn(dataSource, range);
+    const holidaysInRange = await dataSource.getHolidaysInRange(range);
+    const holidaysCount = holidaysInRange.length;
 
     return nonWeekendCount - holidaysCount;
 }

diff --git a/src/index.js b/src/index.js
@@ -3,12 +3,11 @@ 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(new HolidayCache(HerokuHolidayDataSource))}
+        counter={new WeekdayCounter(HerokuHolidayDataSource)}
       />
     </React.StrictMode>,
     document.getElementById('root')