Centralize date range value

coder · BrunoQuaresma · Oct 3, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
commit 932672a0d305f525bf22bdef7de7411151cc80c6
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -29,67 +29,38 @@ import {
   UserLatencyInsightsResponse,
 } from "api/typesGenerated";
 import { ComponentProps, ReactNode } from "react";
-import {
-  subDays,
-  subWeeks,
-  startOfWeek,
-  endOfWeek,
-  isSunday,
-  endOfDay,
-  addWeeks,
-} from "date-fns";
+import { subDays, addWeeks } from "date-fns";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
-import { DateRange, DateRangeValue } from "./DateRange";
+import { DateRange as DailyPicker, DateRangeValue } from "./DateRange";
 import Link from "@mui/material/Link";
 import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
 import CancelOutlined from "@mui/icons-material/CancelOutlined";
-import { getDateRangeFilter } from "./utils";
+import { getDateRangeFilter, lastWeeks } from "./utils";
 import Tooltip from "@mui/material/Tooltip";
 import LinkOutlined from "@mui/icons-material/LinkOutlined";
 import { InsightsInterval, IntervalMenu } from "./IntervalMenu";
-import { WeeklyPreset, WeeklyPresetsMenu } from "./WeeklyPresetsMenu";
+import { WeekPicker, numberOfWeeksOptions } from "./WeekPicker";
 import { insightsTemplate, insightsUserLatency } from "api/queries/insights";
 import { useSearchParams } from "react-router-dom";
 
+const DEFAULT_NUMBER_OF_WEEKS = numberOfWeeksOptions[0];
+
 export default function TemplateInsightsPage() {
   const { template } = useTemplateLayoutContext();
-  const now = new Date();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const defaultWeeklyPreset = 4;
-  const defaultDailyRange = {
-    startDate: subDays(now, 6),
-    endDate: now,
-  };
   const defaultInterval = getDefaultInterval(template);
-
   const interval =
     (searchParams.get("interval") as InsightsInterval) || defaultInterval;
 
-  const weeklyPreset =
-    (Number(searchParams.get("weeklyPreset")) as WeeklyPreset) ||
-    defaultWeeklyPreset;
-  const setWeeklyPreset = (newWeeklyPreset: WeeklyPreset) => {
-    searchParams.set("weeklyPreset", newWeeklyPreset.toString());
+  const dateRange = getDateRange(searchParams, interval);
+  const setDateRange = (newDateRange: DateRangeValue) => {
+    searchParams.set("startDate", newDateRange.startDate.toISOString());
+    searchParams.set("endDate", newDateRange.endDate.toISOString());
     setSearchParams(searchParams);
   };
 
-  const dailyRange =
-    searchParams.has("startDate") && searchParams.has("endDate")
-      ? {
-          startDate: new Date(searchParams.get("startDate")!),
-          endDate: new Date(searchParams.get("endDate")!),
-        }
-      : defaultDailyRange;
-  const setDailyRange = (newDailyRange: DateRangeValue) => {
-    searchParams.set("startDate", newDailyRange.startDate.toISOString());
-    searchParams.set("endDate", newDailyRange.endDate.toISOString());
-    setSearchParams(searchParams);
-  };
-
-  const dateRange =
-    interval === "day" ? dailyRange : getWeeklyRange(weeklyPreset);
   const commonFilters = {
     template_ids: template.id,
     ...getDateRangeFilter(dateRange),
@@ -109,23 +80,18 @@ export default function TemplateInsightsPage() {
             <IntervalMenu
               value={interval}
               onChange={(interval) => {
+                // When going from daily to week we need to set a safe week range
                 if (interval === "week") {
-                  setWeeklyPreset(defaultWeeklyPreset);
-                } else {
-                  setDailyRange(defaultDailyRange);
+                  setDateRange(lastWeeks(DEFAULT_NUMBER_OF_WEEKS));
                 }
-
                 searchParams.set("interval", interval);
                 setSearchParams(searchParams);
               }}
             />
             {interval === "day" ? (
-              <DateRange value={dailyRange} onChange={setDailyRange} />
+              <DailyPicker value={dateRange} onChange={setDateRange} />
             ) : (
-              <WeeklyPresetsMenu
-                value={weeklyPreset}
-                onChange={setWeeklyPreset}
-              />
+              <WeekPicker value={dateRange} onChange={setDateRange} />
             )}
           </>
         }
@@ -144,6 +110,30 @@ const getDefaultInterval = (template: Template) => {
   return hasFiveWeeksOrMore ? "week" : "day";
 };
 
+const getDateRange = (
+  searchParams: URLSearchParams,
+  interval: InsightsInterval,
+) => {
+  const startDate = searchParams.get("startDate");
+  const endDate = searchParams.get("endDate");
+
+  if (startDate && endDate) {
+    return {
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+    };
+  }
+
+  if (interval === "day") {
+    return {
+      startDate: subDays(new Date(), 6),
+      endDate: new Date(),
+    };
+  }
+
+  return lastWeeks(DEFAULT_NUMBER_OF_WEEKS);
+};
+
 export const TemplateInsightsPageView = ({
   templateInsights,
   userLatency,
@@ -671,13 +661,6 @@ const TextValue = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const getWeeklyRange = (numberOfWeeks: WeeklyPreset) => {
-  const now = new Date();
-  const startDate = startOfWeek(subWeeks(now, numberOfWeeks));
-  const endDate = isSunday(now) ? endOfDay(now) : endOfWeek(subWeeks(now, 1));
-  return { startDate, endDate };
-};
-
 function formatTime(seconds: number): string {
   if (seconds < 60) {
     return seconds + " seconds";

diff --git a/...emplateInsightsPage/WeeklyPresetsMenu.tsx → ...ePage/TemplateInsightsPage/WeekPicker.tsx b/...emplateInsightsPage/WeeklyPresetsMenu.tsx → ...ePage/TemplateInsightsPage/WeekPicker.tsx
@@ -5,20 +5,23 @@ import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useState, useRef } from "react";
+import { DateRangeValue } from "./DateRange";
+import { differenceInWeeks } from "date-fns";
+import { lastWeeks } from "./utils";
 
-export const weeklyPresets = [4, 12, 24, 48] as const;
+export const numberOfWeeksOptions = [4, 12, 24, 48] as const;
 
-export type WeeklyPreset = (typeof weeklyPresets)[number];
-
-export const WeeklyPresetsMenu = ({
+export const WeekPicker = ({
   value,
   onChange,
 }: {
-  value: WeeklyPreset;
-  onChange: (value: WeeklyPreset) => void;
+  value: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
 }) => {
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
+  // Why +1? If you get the week 1 and week 2 the diff is 1, but there are 2 weeks
+  const numberOfWeeks = differenceInWeeks(value.endDate, value.startDate) + 1;
 
   const handleClose = () => {
     setOpen(false);
@@ -35,7 +38,7 @@ export const WeeklyPresetsMenu = ({
         onClick={() => setOpen(true)}
         endIcon={<ExpandMoreOutlined />}
       >
-        Last {value} weeks
+        Last {numberOfWeeks} weeks
       </Button>
       <Menu
         id="interval-menu"
@@ -54,23 +57,27 @@ export const WeeklyPresetsMenu = ({
           horizontal: "left",
         }}
       >
-        {weeklyPresets.map((numberOfWeeks) => (
-          <MenuItem
-            css={{ fontSize: 14, justifyContent: "space-between" }}
-            key={numberOfWeeks}
-            onClick={() => {
-              onChange(numberOfWeeks);
-              handleClose();
-            }}
-          >
-            Last {numberOfWeeks} weeks
-            <Box css={{ width: 16, height: 16 }}>
-              {value === numberOfWeeks && (
-                <CheckOutlined css={{ width: 16, height: 16 }} />
-              )}
-            </Box>
-          </MenuItem>
-        ))}
+        {numberOfWeeksOptions.map((option) => {
+          const optionRange = lastWeeks(option);
+
+          return (
+            <MenuItem
+              css={{ fontSize: 14, justifyContent: "space-between" }}
+              key={option}
+              onClick={() => {
+                onChange(optionRange);
+                handleClose();
+              }}
+            >
+              Last {option} weeks
+              <Box css={{ width: 16, height: 16 }}>
+                {numberOfWeeks === option && (
+                  <CheckOutlined css={{ width: 16, height: 16 }} />
+                )}
+              </Box>
+            </MenuItem>
+          );
+        })}
       </Menu>
     </div>
   );

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts b/site/src/pages/TemplatePage/TemplateInsightsPage/utils.ts
@@ -5,6 +5,11 @@ import {
   startOfDay,
   startOfHour,
   isToday as isTodayDefault,
+  startOfWeek,
+  endOfDay,
+  endOfWeek,
+  isSunday,
+  subWeeks,
 } from "date-fns";
 
 type GetDateRangeFilterOptions = {
@@ -36,3 +41,10 @@ export function getDateRangeFilter(props: GetDateRangeFilterOptions) {
 function toISOLocal(d: Date) {
   return format(d, "yyyy-MM-dd'T'HH:mm:ssxxx");
 }
+
+export const lastWeeks = (numberOfWeeks: number) => {
+  const now = new Date();
+  const startDate = startOfWeek(subWeeks(now, numberOfWeeks));
+  const endDate = isSunday(now) ? endOfDay(now) : endOfWeek(subWeeks(now, 1));
+  return { startDate, endDate };
+};