Removed last references to moment.js from the project

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",

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",

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<Step, string> = {
   hourly: 'Hour',
 };
 
-const STEP_TO_DATE_UNIT_MAP: Record<Step, moment.unitOfTime.Diff> = {
+const STEP_TO_DURATION_MAP: Record<Step, Duration> = {
-  hourly: 'hour',
+  hourly: { hours: 1 },
-  daily: 'day',
+  daily: { days: 1 },
-  weekly: 'week',
+  weekly: { weeks: 1 },
-  monthly: 'month',
+  monthly: { months: 1 },
 };
 
-const STEP_TO_DATE_FORMAT: Record<Step, (date: moment.Moment | string) => string> = {
+const STEP_TO_DIFF_FUNC_MAP: Record<Step, (dateLeft: Date, dateRight: Date) => number> = {
-  hourly: (date) => moment(date).format('YYYY-MM-DD HH:00'),
+  hourly: differenceInHours,
-  daily: (date) => moment(date).format('YYYY-MM-DD'),
+  daily: differenceInDays,
+  weekly: differenceInWeeks,
+  monthly: differenceInMonths,
+};
+
+const STEP_TO_DATE_FORMAT: Record<Step, (date: Date) => 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 firstWeekDay = format(startOfISOWeek(date), 'yyyy-MM-dd');
-    const lastWeekDay = moment(date).isoWeekday(7).format('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 now = new Date();
-  const oldestDate = moment(oldestVisitDate);
+  const oldestDate = parseISO(oldestVisitDate);
   const matcher = cond<never, Step | undefined>([
-    [ () => now.diff(oldestDate, 'day') <= 2, always<Step>('hourly') ], // Less than 2 days
+    [ () => differenceInDays(now, oldestDate) <= 2, always<Step>('hourly') ], // Less than 2 days
-    [ () => now.diff(oldestDate, 'month') <= 1, always<Step>('daily') ], // Between 2 days and 1 month
+    [ () => differenceInMonths(now, oldestDate) <= 1, always<Step>('daily') ], // Between 2 days and 1 month
-    [ () => now.diff(oldestDate, 'month') <= 6, always<Step>('weekly') ], // Between 1 and 6 months
+    [ () => differenceInMonths(now, oldestDate) <= 6, always<Step>('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<Record<string, NormalizedVisit[]>>(
     (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 newerDate = parseISO(visits[0].date);
-  const oldestDate = moment(visits[visits.length - 1].date);
+  const oldestDate = parseISO(visits[visits.length - 1].date);
-  const size = newerDate.diff(oldestDate, unit);
+  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))),
   ];
 };
 

test/visits/helpers/LineChartCard.test.tsx

@@ -75,8 +75,8 @@ describe('<LineChartCard />', () => {
   });
 
   it.each([
-    [[ Mock.of<NormalizedVisit>({}) ], [], 1 ],
+    [[ Mock.of<NormalizedVisit>({ date: '2016-04-01' }) ], [], 1 ],
-    [[ Mock.of<NormalizedVisit>({}) ], [ Mock.of<NormalizedVisit>({}) ], 2 ],
+    [[ Mock.of<NormalizedVisit>({ date: '2016-04-01' }) ], [ Mock.of<NormalizedVisit>({ date: '2016-04-01' }) ], 2 ],
   ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => {
     const wrapper = createWrapper(visits, highlightedVisits);
     const chart = wrapper.find(Line);