From 0275908f69d2119311fbdec4ca27f7e90283f92b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 25 Jun 2021 19:15:19 +0200 Subject: [PATCH] Removed last references to moment.js from the project --- package-lock.json | 14 ----- package.json | 3 - src/visits/helpers/LineChartCard.tsx | 66 ++++++++++++++-------- test/visits/helpers/LineChartCard.test.tsx | 4 +- 4 files changed, 44 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6eb86c72..6063c83f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6517,15 +6517,6 @@ "integrity": "sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==", "dev": true }, - "@types/moment": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@types/moment/-/moment-2.13.0.tgz", - "integrity": "sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=", - "dev": true, - "requires": { - "moment": "*" - } - }, "@types/node": { "version": "12.7.11", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.7.11.tgz", @@ -24903,11 +24894,6 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, - "react-moment": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.0.0.tgz", - "integrity": "sha512-J4iIiwUT4oZcL7cp2U7naQKbQtqvmzGXXBMg/DLj+Pi7n9EW0VhBRx/1aJ1Tp2poCqTCAPoadLEoUIkReGnNNg==" - }, "react-onclickoutside": { "version": "6.10.0", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz", diff --git a/package.json b/package.json index 8436189c..911cbd65 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "date-fns": "^2.22.1", "event-source-polyfill": "^1.0.22", "leaflet": "^1.7.1", - "moment": "^2.29.1", "promise": "^8.1.0", "qs": "^6.9.6", "ramda": "^0.27.1", @@ -49,7 +48,6 @@ "react-dom": "^17.0.1", "react-external-link": "^1.2.0", "react-leaflet": "^3.1.0", - "react-moment": "^1.0.0", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-swipeable": "^6.0.1", @@ -79,7 +77,6 @@ "@types/enzyme": "^3.10.8", "@types/jest": "^26.0.20", "@types/leaflet": "^1.5.23", - "@types/moment": "^2.13.0", "@types/qs": "^6.9.5", "@types/ramda": "^0.27.38", "@types/react": "^17.0.2", diff --git a/src/visits/helpers/LineChartCard.tsx b/src/visits/helpers/LineChartCard.tsx index cb180dca..25589c43 100644 --- a/src/visits/helpers/LineChartCard.tsx +++ b/src/visits/helpers/LineChartCard.tsx @@ -10,7 +10,17 @@ import { } from 'reactstrap'; import { Line } from 'react-chartjs-2'; import { always, cond, countBy, reverse } from 'ramda'; -import moment from 'moment'; +import { + add, + differenceInDays, + differenceInHours, + differenceInMonths, + differenceInWeeks, + parseISO, + format, + startOfISOWeek, + endOfISOWeek, +} from 'date-fns'; import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js'; import { NormalizedVisit, Stats } from '../types'; import { fillTheGaps } from '../../utils/helpers/visits'; @@ -39,46 +49,53 @@ const STEPS_MAP: Record = { hourly: 'Hour', }; -const STEP_TO_DATE_UNIT_MAP: Record = { - hourly: 'hour', - daily: 'day', - weekly: 'week', - monthly: 'month', +const STEP_TO_DURATION_MAP: Record = { + hourly: { hours: 1 }, + daily: { days: 1 }, + weekly: { weeks: 1 }, + monthly: { months: 1 }, }; -const STEP_TO_DATE_FORMAT: Record string> = { - hourly: (date) => moment(date).format('YYYY-MM-DD HH:00'), - daily: (date) => moment(date).format('YYYY-MM-DD'), +const STEP_TO_DIFF_FUNC_MAP: Record number> = { + hourly: differenceInHours, + daily: differenceInDays, + weekly: differenceInWeeks, + monthly: differenceInMonths, +}; + +const STEP_TO_DATE_FORMAT: Record string> = { + hourly: (date) => format(date, 'yyyy-MM-dd HH:00'), + daily: (date) => format(date, 'yyyy-MM-dd'), weekly(date) { - const firstWeekDay = moment(date).isoWeekday(1).format('YYYY-MM-DD'); - const lastWeekDay = moment(date).isoWeekday(7).format('YYYY-MM-DD'); + const firstWeekDay = format(startOfISOWeek(date), 'yyyy-MM-dd'); + const lastWeekDay = format(endOfISOWeek(date), 'yyyy-MM-dd'); return `${firstWeekDay} - ${lastWeekDay}`; }, - monthly: (date) => moment(date).format('YYYY-MM'), + monthly: (date) => format(date, 'yyyy-MM'), }; const determineInitialStep = (oldestVisitDate: string): Step => { - const now = moment(); - const oldestDate = moment(oldestVisitDate); + const now = new Date(); + const oldestDate = parseISO(oldestVisitDate); const matcher = cond([ - [ () => now.diff(oldestDate, 'day') <= 2, always('hourly') ], // Less than 2 days - [ () => now.diff(oldestDate, 'month') <= 1, always('daily') ], // Between 2 days and 1 month - [ () => now.diff(oldestDate, 'month') <= 6, always('weekly') ], // Between 1 and 6 months + [ () => differenceInDays(now, oldestDate) <= 2, always('hourly') ], // Less than 2 days + [ () => differenceInMonths(now, oldestDate) <= 1, always('daily') ], // Between 2 days and 1 month + [ () => differenceInMonths(now, oldestDate) <= 6, always('weekly') ], // Between 1 and 6 months ]); return matcher() ?? 'monthly'; }; const groupVisitsByStep = (step: Step, visits: NormalizedVisit[]): Stats => countBy( - (visit) => STEP_TO_DATE_FORMAT[step](visit.date), + (visit) => STEP_TO_DATE_FORMAT[step](parseISO(visit.date)), visits, ); const visitsToDatasetGroups = (step: Step, visits: NormalizedVisit[]) => visits.reduce>( (acc, visit) => { - const key = STEP_TO_DATE_FORMAT[step](visit.date); + const key = STEP_TO_DATE_FORMAT[step](parseISO(visit.date)); acc[key] = acc[key] ?? []; acc[key].push(visit); @@ -89,15 +106,16 @@ const visitsToDatasetGroups = (step: Step, visits: NormalizedVisit[]) => ); const generateLabels = (step: Step, visits: NormalizedVisit[]): string[] => { - const unit = STEP_TO_DATE_UNIT_MAP[step]; + const diffFunc = STEP_TO_DIFF_FUNC_MAP[step]; const formatter = STEP_TO_DATE_FORMAT[step]; - const newerDate = moment(visits[0].date); - const oldestDate = moment(visits[visits.length - 1].date); - const size = newerDate.diff(oldestDate, unit); + const newerDate = parseISO(visits[0].date); + const oldestDate = parseISO(visits[visits.length - 1].date); + const size = diffFunc(newerDate, oldestDate); + const duration = STEP_TO_DURATION_MAP[step]; return [ formatter(oldestDate), - ...rangeOf(size, () => formatter(oldestDate.add(1, unit))), + ...rangeOf(size, () => formatter(add(oldestDate, duration))), ]; }; diff --git a/test/visits/helpers/LineChartCard.test.tsx b/test/visits/helpers/LineChartCard.test.tsx index da88c59d..f7948102 100644 --- a/test/visits/helpers/LineChartCard.test.tsx +++ b/test/visits/helpers/LineChartCard.test.tsx @@ -75,8 +75,8 @@ describe('', () => { }); it.each([ - [[ Mock.of({}) ], [], 1 ], - [[ Mock.of({}) ], [ Mock.of({}) ], 2 ], + [[ Mock.of({ date: '2016-04-01' }) ], [], 1 ], + [[ Mock.of({ date: '2016-04-01' }) ], [ Mock.of({ date: '2016-04-01' }) ], 2 ], ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => { const wrapper = createWrapper(visits, highlightedVisits); const chart = wrapper.find(Line);