From e9b0d3f7963a400acbaeb7a1fb310635c30b264a Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 28 May 2023 22:28:11 -0700
Subject: [PATCH] Updated date range handling.

---
 components/input/DateFilter.js        |  2 +-
 components/input/WebsiteDateFilter.js |  3 +--
 components/metrics/DatePickerForm.js  | 16 ++++++++++------
 lib/date.js                           | 19 +++++++++++++------
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/input/DateFilter.js b/components/input/DateFilter.js
index b7521e27..7fc4319d 100644
--- a/components/input/DateFilter.js
+++ b/components/input/DateFilter.js
@@ -65,7 +65,7 @@ export function DateFilter({
   ].filter(n => n);
 
   const renderValue = value => {
-    return value === 'custom' ? (
+    return value.startsWith('range') ? (
       <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
     ) : (
       options.find(e => e.value === value).label
diff --git a/components/input/WebsiteDateFilter.js b/components/input/WebsiteDateFilter.js
index 0d5d7569..71075dd7 100644
--- a/components/input/WebsiteDateFilter.js
+++ b/components/input/WebsiteDateFilter.js
@@ -1,4 +1,3 @@
-import { getDateRangeValues } from 'lib/date';
 import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import DateFilter from './DateFilter';
@@ -13,7 +12,7 @@ export default function WebsiteDateFilter({ websiteId, value }) {
       const data = await get(`/websites/${websiteId}`);
 
       if (data) {
-        setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) });
+        setDateRange(`range:${new Date(data.createdAt)}:${Date.now()}`);
       }
     } else if (value !== 'all') {
       setDateRange(value);
diff --git a/components/metrics/DatePickerForm.js b/components/metrics/DatePickerForm.js
index 96730591..53f027bb 100644
--- a/components/metrics/DatePickerForm.js
+++ b/components/metrics/DatePickerForm.js
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
 import { isAfter, isBefore, isSameDay } from 'date-fns';
 import useLocale from 'hooks/useLocale';
-import { getDateRangeValues } from 'lib/date';
 import { getDateLocale } from 'lib/lang';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
@@ -19,7 +18,7 @@ export function DatePickerForm({
   const [selected, setSelected] = useState(
     isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
   );
-  const [date, setDate] = useState(defaultStartDate);
+  const [singleDate, setSingleDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
   const { locale } = useLocale();
@@ -27,14 +26,14 @@ export function DatePickerForm({
 
   const disabled =
     selected === FILTER_DAY
-      ? isAfter(minDate, date) && isBefore(maxDate, date)
+      ? isAfter(minDate, singleDate) && isBefore(maxDate, singleDate)
       : isAfter(startDate, endDate);
 
   const handleSave = () => {
     if (selected === FILTER_DAY) {
-      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
+      onChange(`range:${singleDate.getTime()}:${singleDate.getTime()}`);
     } else {
-      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+      onChange(`range:${startDate.getTime()}:${endDate.getTime()}`);
     }
   };
 
@@ -48,7 +47,12 @@ export function DatePickerForm({
       </div>
       <div className={styles.calendars}>
         {selected === FILTER_DAY && (
-          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
+          <Calendar
+            date={singleDate}
+            minDate={minDate}
+            maxDate={maxDate}
+            onChange={setSingleDate}
+          />
         )}
         {selected === FILTER_RANGE && (
           <>
diff --git a/lib/date.js b/lib/date.js
index 1cfca75d..526354b3 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -40,20 +40,27 @@ export function getLocalTime(t) {
 
 export function parseDateRange(value, locale = 'en-US') {
   if (typeof value === 'object') {
-    const { startDate, endDate } = value;
+    return value;
+  }
+
+  if (value?.startsWith?.('range')) {
+    const [, startAt, endAt] = value.split(':');
+
+    const startDate = new Date(+startAt);
+    const endDate = new Date(+endAt);
+
     return {
-      ...value,
-      startDate: typeof startDate === 'string' ? parseISO(startDate) : startDate,
-      endDate: typeof endDate === 'string' ? parseISO(endDate) : endDate,
+      ...getDateRangeValues(startDate, endDate),
+      value,
     };
   }
 
   const now = new Date();
   const dateLocale = getDateLocale(locale);
 
-  const match = value.match(/^(?<num>[0-9-]+)(?<unit>hour|day|week|month|year)$/);
+  const match = value?.match?.(/^(?<num>[0-9-]+)(?<unit>hour|day|week|month|year)$/);
 
-  if (!match) return {};
+  if (!match) return null;
 
   const { num, unit } = match.groups;