fix: migrate from react-infinite-calendar to react-calendar (#1650)

babyitachi · AtofStryker · web-flow · commit 90c5f1ad4570 · 2025-08-22T10:20:30.000-04:00
* #migrate from react-infinite-calendar to react-calendar

* #Updating yarn.lock and package.json

* #fixing lint issues

* #Fixing date formats from local to UTC, write helper functions, linting fixed

* #addressing review - config files linting not required, ignoring

* add date-fns-tz to avoid regex iso date parsing logic

* simplify date logic

* run prettier

---------

Co-authored-by: Bill Glesias &lt;bglesias@gmail.com&gt;
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -2,7 +2,7 @@
 ///<reference path="../global.d.ts" />
 
 import { pick } from "lodash/fp";
-import { format as formatDate } from "date-fns";
+import { differenceInMonths, parse as parseDate } from "date-fns";
 import { isMobile } from "./utils";
 
 // Import Cypress Percy plugin command (https://docs.percy.io/docs/cypress)
@@ -279,7 +279,30 @@ Cypress.Commands.add("pickDateRange", (startDate, endDate) => {
   });
 
   const selectDate = (date: Date) => {
-    return cy.get(`[data-date='${formatDate(date, "yyyy-MM-dd")}']`).click({ force: true });
+    const targetDay = date.getDate();
+
+    return cy
+      .get(".react-calendar__navigation__label")
+      .invoke("text")
+      .then((label: string) => {
+        const parsedDate = parseDate(label, "MMMM yyyy", new Date());
+        const monthsDiff = differenceInMonths(new Date(), parsedDate);
+
+        if (monthsDiff < 0) {
+          for (let i = 0; i < Math.abs(monthsDiff); i++) {
+            cy.get(".react-calendar__navigation__prev-button").click();
+          }
+        } else if (monthsDiff > 0) {
+          for (let i = 0; i < monthsDiff; i++) {
+            cy.get(".react-calendar__navigation__next-button").click();
+          }
+        }
+      })
+      .then(() => {
+        cy.get(".react-calendar__month-view__days__day")
+          .contains(new RegExp(`^${targetDay}$`))
+          .click({ force: true });
+      });
   };
 
   log.snapshot("before");
@@ -289,7 +312,7 @@ Cypress.Commands.add("pickDateRange", (startDate, endDate) => {
 
   // Open date range picker
   cy.getBySelLike("filter-date-range-button").click({ force: true });
-  cy.get(".Cal__Header__root").should("be.visible");
+  cy.get(".react-calendar").should("be.visible");
 
   // Select date range
   selectDate(startDate);
@@ -298,7 +321,7 @@ Cypress.Commands.add("pickDateRange", (startDate, endDate) => {
     log.end();
   });
 
-  cy.get(".Cal__Header__root").should("not.exist");
+  cy.get(".react-calendar").should("not.exist");
 });
 
 Cypress.Commands.add("database", (operation, entity, query, logTask = false) => {
diff --git a/cypress/tests/ui/transaction-feeds.spec.ts b/cypress/tests/ui/transaction-feeds.spec.ts
@@ -8,7 +8,13 @@ import {
   TransactionStatus,
 } from "../../../src/models";
 import { addDays, isWithinInterval, startOfDay } from "date-fns";
-import { startOfDayUTC, endOfDayUTC } from "../../../src/utils/transactionUtils";
+import {
+  endOfDayUTC,
+  isoStringToLocalMidnightStart,
+  isoStringToLocalMidnightEnd,
+  isoStringToLocalDateFull,
+  localDateToIsoString,
+} from "../../../src/utils/transactionUtils";
 import { isMobile } from "../../support/utils";
 
 const { _ } = Cypress;
@@ -215,19 +221,21 @@ describe("Transaction Feed", function () {
     if (isMobile()) {
       it("closes date range picker modal", () => {
         cy.getBySelLike("filter-date-range-button").click({ force: true });
-        cy.get(".Cal__Header__root").should("be.visible");
+        cy.get(".react-calendar").should("be.visible");
         cy.visualSnapshot("Mobile Open Date Range Picker");
         cy.getBySel("date-range-filter-drawer-close").click();
-        cy.get(".Cal__Header__root").should("not.exist");
+        cy.get(".react-calendar").should("not.exist");
         cy.visualSnapshot("Mobile Close Date Range Picker");
       });
     }
 
     _.each(feedViews, (feed, feedName) => {
       it(`filters ${feedName} transaction feed by date range`, function () {
         cy.database("find", "transactions").then((transaction: Transaction) => {
-          const dateRangeStart = startOfDay(new Date(transaction.createdAt));
-          const dateRangeEnd = endOfDayUTC(addDays(dateRangeStart, 1));
+          const dateRangeStart = isoStringToLocalMidnightStart(`${transaction.createdAt}`);
+          const dateRangeEnd = isoStringToLocalMidnightEnd(
+            addDays(startOfDay(transaction.createdAt), 1).toISOString()
+          );
 
           cy.getBySelLike(feed.tab).click();
           cy.getBySelLike(feed.tab).should("have.class", "Mui-selected");
@@ -242,16 +250,16 @@ describe("Transaction Feed", function () {
               cy.getBySelLike("transaction-item").should("have.length", transactions.length);
 
               transactions.forEach(({ createdAt }) => {
-                const createdAtDate = startOfDayUTC(new Date(createdAt));
+                const createdAtDate = isoStringToLocalDateFull(`${createdAt}`);
 
                 expect(
                   isWithinInterval(createdAtDate, {
-                    start: startOfDayUTC(dateRangeStart),
+                    start: dateRangeStart,
                     end: dateRangeEnd,
                   }),
-                  `transaction created date (${createdAtDate.toISOString()})
-                  is within ${dateRangeStart.toISOString()}
-                  and ${dateRangeEnd.toISOString()}`
+                  `transaction created date (${localDateToIsoString(createdAtDate)})
+                  is within ${localDateToIsoString(dateRangeStart)}
+                  and ${localDateToIsoString(dateRangeEnd)}`
                 ).to.equal(true);
               });
 
@@ -274,7 +282,7 @@ describe("Transaction Feed", function () {
       });
 
       it(`does not show ${feedName} transactions for out of range date limits`, function () {
-        const dateRangeStart = startOfDay(new Date(2014, 1, 1));
+        const dateRangeStart = startOfDay(new Date(2025, 7, 1));
         const dateRangeEnd = endOfDayUTC(addDays(dateRangeStart, 1));
 
         cy.getBySelLike(feed.tab).click();
diff --git a/package.json b/package.json
@@ -33,14 +33,15 @@
     "axios": "0.28.1",
     "clsx": "1.2.1",
     "date-fns": "4.1.0",
+    "date-fns-tz": "^3.2.0",
     "detect-port": "^1.5.1",
     "dinero.js": "1.9.1",
     "formik": "2.4.6",
     "history": "4.10.1",
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
+    "react-calendar": "^6.0.0",
     "react-dom": "18.2.0",
-    "react-infinite-calendar": "2.3.1",
     "react-number-format": "4.9.4",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
@@ -82,7 +83,6 @@
     "@types/passport": "1.0.16",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@types/react-infinite-calendar": "2.3.6",
     "@types/react-router": "5.1.18",
     "@types/react-router-dom": "5.3.3",
     "@types/react-virtualized": "9.21.21",
diff --git a/src/components/TransactionDateRangeFilter.tsx b/src/components/TransactionDateRangeFilter.tsx
@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import { styled } from "@mui/material/styles";
 import { format as formatDate } from "date-fns";
 import { Popover, Chip, useTheme, Drawer, Button, useMediaQuery, colors } from "@mui/material";
 import { ArrowDropDown as ArrowDropDownIcon, Cancel as CancelIcon } from "@mui/icons-material";
-import InfiniteCalendar, { Calendar, withRange } from "react-infinite-calendar";
+import Calendar from "react-calendar";
 
-import "react-infinite-calendar/styles.css";
-import { TransactionDateRangePayload } from "../models";
-import { hasDateQueryFields } from "../utils/transactionUtils";
+import "react-calendar/dist/Calendar.css";
+import { TransactionDateRangePayload, Value, ValuePiece } from "../models";
+import { hasDateQueryFields, localDateToUTCISOString } from "../utils/transactionUtils";
 
 const PREFIX = "TransactionListDateRangeFilter";
 
@@ -27,7 +27,6 @@ const Root = styled("div")(({ theme }) => ({
 }));
 
 const { indigo } = colors;
-const CalendarWithRange = withRange(Calendar);
 
 export type TransactionListDateRangeFilterProps = {
   filterDateRange: Function;
@@ -43,15 +42,19 @@ const TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterPro
   const theme = useTheme();
   const xsBreakpoint = useMediaQuery(theme.breakpoints.only("xs"));
   const queryHasDateFields = dateRangeFilters && hasDateQueryFields(dateRangeFilters);
+  const [calendarValue, setCalendarValue] = useState<Value>(null);
 
   const [dateRangeAnchorEl, setDateRangeAnchorEl] = React.useState<HTMLDivElement | null>(null);
 
-  const onCalendarSelect = (e: { eventType: number; start: any; end: any }) => {
-    if (e.eventType === 3) {
-      filterDateRange({
-        dateRangeStart: new Date(e.start.setUTCHours(0, 0, 0, 0)).toISOString(),
-        dateRangeEnd: new Date(e.end.setUTCHours(23, 59, 59, 999)).toISOString(),
-      });
+  const onCalendarSelect = (val: Value) => {
+    if (val && !(val instanceof Date)) {
+      const [rangeStart, rangeEnd] = val;
+      const calValue = {
+        dateRangeStart: localDateToUTCISOString(rangeStart),
+        dateRangeEnd: localDateToUTCISOString(rangeEnd),
+      };
+      setCalendarValue(val);
+      filterDateRange(calValue);
       setDateRangeAnchorEl(null);
     }
   };
@@ -67,13 +70,16 @@ const TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterPro
   const dateRangeOpen = Boolean(dateRangeAnchorEl);
   const dateRangeId = dateRangeOpen ? "date-range-popover" : undefined;
 
-  const formatButtonDate = (date: string) => {
-    return formatDate(new Date(date), "MMM, d yyyy");
+  const formatButtonDate = (date: Date) => {
+    return formatDate(date, "MMM, d yyyy");
   };
 
-  const dateRangeLabel = (dateRangeFields: TransactionDateRangePayload) => {
-    const { dateRangeStart, dateRangeEnd } = dateRangeFields;
-    return `${formatButtonDate(dateRangeStart!)} - ${formatButtonDate(dateRangeEnd!)}`;
+  const dateRangeLabel = (dateRangeFields: Value) => {
+    if (dateRangeFields && !(dateRangeFields instanceof Date)) {
+      const [dateRangeStart, dateRangeEnd] = dateRangeFields;
+      const label = `${formatButtonDate(dateRangeStart!)} - ${formatButtonDate(dateRangeEnd!)}`;
+      return label;
+    }
   };
 
   return (
@@ -95,9 +101,10 @@ const TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterPro
           variant="outlined"
           onClick={handleDateRangeClick}
           data-test="transaction-list-filter-date-range-button"
-          label={`Date: ${dateRangeLabel(dateRangeFilters)}`}
+          label={`Date: ${dateRangeLabel(calendarValue)}`}
           deleteIcon={<CancelIcon data-test="transaction-list-filter-date-clear-button" />}
           onDelete={() => {
+            setCalendarValue(null);
             resetDateRange();
           }}
         />
@@ -118,28 +125,12 @@ const TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterPro
           }}
           className={classes.popover}
         >
-          <InfiniteCalendar
-            data-test="transaction-list-filter-date-range"
-            width={xsBreakpoint ? window.innerWidth : 350}
-            height={xsBreakpoint ? window.innerHeight : 300}
-            rowHeight={50}
-            Component={CalendarWithRange}
-            selected={false}
-            onSelect={onCalendarSelect}
-            locale={{
-              headerFormat: "MMM Do",
-            }}
-            theme={{
-              accentColor: indigo["400"],
-              headerColor: indigo["500"],
-              weekdayColor: indigo["300"],
-              selectionColor: indigo["300"],
-              floatingNav: {
-                background: indigo["400"],
-                color: "#FFF",
-                chevron: "#FFA726",
-              },
-            }}
+          <RangeCalendar
+            onCalendarSelect={onCalendarSelect}
+            xsBreakpoint={xsBreakpoint}
+            color={indigo}
+            dataTest="transaction-list-filter-date-range"
+            defaultValue={calendarValue}
           />
         </Popover>
       )}
@@ -154,33 +145,56 @@ const TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterPro
           <Button data-test="date-range-filter-drawer-close" onClick={() => handleDateRangeClose()}>
             Close
           </Button>
-          <InfiniteCalendar
-            data-test="transaction-list-filter-date-range"
-            width={window.innerWidth}
-            height={window.innerHeight - 185}
-            rowHeight={50}
-            Component={CalendarWithRange}
-            selected={false}
-            onSelect={onCalendarSelect}
-            locale={{
-              headerFormat: "MMM Do",
-            }}
-            theme={{
-              accentColor: indigo["400"],
-              headerColor: indigo["500"],
-              weekdayColor: indigo["300"],
-              selectionColor: indigo["300"],
-              floatingNav: {
-                background: indigo["400"],
-                color: "#FFF",
-                chevron: "#FFA726",
-              },
-            }}
+          <RangeCalendar
+            onCalendarSelect={onCalendarSelect}
+            xsBreakpoint={xsBreakpoint}
+            color={indigo}
+            dataTest="transaction-list-filter-date-range"
+            defaultValue={calendarValue}
           />
         </Drawer>
       )}
     </Root>
   );
 };
 
+export function RangeCalendar({
+  onCalendarSelect,
+  xsBreakpoint,
+  color,
+  dataTest,
+  defaultValue,
+}: {
+  onCalendarSelect: (value: Value) => void;
+  xsBreakpoint: boolean;
+  color: Record<string, string>;
+  dataTest: string;
+  defaultValue: Value;
+}) {
+  const [value, setValue] = useState<Value>(defaultValue);
+
+  const width = xsBreakpoint ? window.innerWidth : 350;
+  const height = xsBreakpoint ? window.innerHeight : 300;
+
+  const handleChange = (val: Value, _: any) => {
+    setValue(val);
+    onCalendarSelect(val);
+  };
+
+  return (
+    <div
+      data-test={dataTest}
+      style={{
+        width,
+        maxWidth: "100%",
+        background: color["400"],
+        padding: 8,
+        borderRadius: 8,
+      }}
+    >
+      <Calendar onChange={handleChange} value={value} selectRange={true} />
+    </div>
+  );
+}
+
 export default TransactionListDateRangeFilter;
diff --git a/src/models/transaction.ts b/src/models/transaction.ts
@@ -104,3 +104,7 @@ export type TransactionPagination = {
   hasNextPages: boolean;
   totalPages: number;
 };
+
+export type Range<T> = [T, T];
+export type ValuePiece = Date | null;
+export type Value = ValuePiece | Range<ValuePiece>;
diff --git a/src/utils/transactionUtils.ts b/src/utils/transactionUtils.ts
diff --git a/yarn.lock b/yarn.lock
