@lazerlen/legend-calendar 1.0.0

package/src/hooks/useDateRange.test.ts

@@ -0,0 +1,128 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { describe, it, expect } from "bun:test";
+
+import { useDateRange } from "./useDateRange"; // replace with the actual path to your hook
+
+describe("useDateRange", () => {
+  it("should initialize with correct default values", () => {
+    const { result } = renderHook(() => useDateRange());
+
+    expect(result.current.dateRange).toEqual({
+      startId: undefined,
+      endId: undefined,
+    });
+    expect(result.current.calendarActiveDateRanges).toEqual([]);
+    expect(result.current.isDateRangeValid).toBe(false);
+  });
+
+  it("should update dateRange correctly on onCalendarDayPress", () => {
+    const { result } = renderHook(() => useDateRange());
+
+    // Sets the start date
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-01");
+    });
+
+    expect(result.current.dateRange).toEqual({
+      startId: "2022-01-01",
+      endId: undefined,
+    });
+    expect(result.current.calendarActiveDateRanges).toEqual([
+      { startId: "2022-01-01", endId: undefined },
+    ]);
+
+    // Sets the end date
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-10");
+    });
+
+    expect(result.current.dateRange).toEqual({
+      startId: "2022-01-01",
+      endId: "2022-01-10",
+    });
+    expect(result.current.calendarActiveDateRanges).toEqual([
+      { startId: "2022-01-01", endId: "2022-01-10" },
+    ]);
+
+    // Sets a new start date
+    act(() => {
+      result.current.onCalendarDayPress("2024-02-16");
+    });
+
+    expect(result.current.dateRange).toEqual({
+      startId: "2024-02-16",
+      endId: undefined,
+    });
+    expect(result.current.calendarActiveDateRanges).toEqual([
+      { startId: "2024-02-16", endId: undefined },
+    ]);
+
+    // Sets an earlier end date, which should swap the start and end dates
+    act(() => {
+      result.current.onCalendarDayPress("2024-02-01");
+    });
+
+    expect(result.current.dateRange).toEqual({
+      startId: "2024-02-01",
+      endId: "2024-02-16",
+    });
+    expect(result.current.calendarActiveDateRanges).toEqual([
+      { startId: "2024-02-01", endId: "2024-02-16" },
+    ]);
+  });
+
+  it("should clear dateRange on onClearDateRange", () => {
+    const { result } = renderHook(() => useDateRange());
+
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-01");
+    });
+
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-10");
+    });
+
+    act(() => {
+      result.current.onClearDateRange();
+    });
+
+    expect(result.current.dateRange).toEqual({
+      startId: undefined,
+      endId: undefined,
+    });
+  });
+
+  it("should update isDateRangeValid correctly", () => {
+    const { result } = renderHook(() => useDateRange());
+    expect(result.current.isDateRangeValid).toBe(false);
+
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-01");
+    });
+
+    expect(result.current.isDateRangeValid).toBe(false);
+
+    act(() => {
+      result.current.onCalendarDayPress("2022-01-10");
+    });
+
+    expect(result.current.isDateRangeValid).toBe(true);
+
+    act(() => {
+      result.current.onClearDateRange();
+    });
+
+    expect(result.current.isDateRangeValid).toBe(false);
+  });
+
+  it("can initialize a date range", () => {
+    const { result } = renderHook(() =>
+      useDateRange({ startId: "2022-01-01", endId: "2022-01-10" })
+    );
+    expect(result.current.dateRange).toEqual({
+      startId: "2022-01-01",
+      endId: "2022-01-10",
+    });
+    expect(result.current.isDateRangeValid).toBe(true);
+  });
+});

package/src/hooks/useDateRange.ts

@@ -0,0 +1,94 @@
+import { useCallback, useMemo, useState } from "react";
+
+import type { CalendarOnDayPress } from "@/components";
+import type { CalendarActiveDateRange } from "@/hooks/useCalendar";
+
+/**
+ * A convenience hook to simplify managing a date range in the calendar in a
+ * performant way.
+ */
+export const useDateRange = (
+  initialDateRange: CalendarActiveDateRange = {
+    startId: undefined,
+    endId: undefined,
+  }
+) => {
+  const [dateRange, setDateRange] =
+    useState<CalendarActiveDateRange>(initialDateRange);
+
+  const onCalendarDayPress = useCallback<CalendarOnDayPress>(
+    (dateId: string) => {
+      setDateRange((prev) => {
+        // Starting the first range
+        if (!prev.startId && !prev.endId) {
+          return {
+            startId: dateId,
+            endId: undefined,
+          };
+        } else if (prev.startId && prev.endId) {
+          // Starting a new range
+          return {
+            startId: dateId,
+            endId: undefined,
+          };
+        } else if (prev.startId && !prev.endId) {
+          if (dateId < prev.startId) {
+            return {
+              startId: dateId,
+              endId: prev.startId,
+            };
+          } else {
+            return {
+              ...prev,
+              endId: dateId,
+            };
+          }
+        }
+        return {
+          startId: dateId,
+          endId: dateId,
+        };
+      });
+    },
+    []
+  );
+
+  const onClearDateRange = useCallback(() => {
+    setDateRange({
+      startId: undefined,
+      endId: undefined,
+    });
+  }, []);
+
+  return useMemo(() => {
+    const calendarActiveDateRanges =
+      !dateRange.startId && !dateRange.endId ? [] : [dateRange];
+    const isDateRangeValid = !!(dateRange.startId && dateRange.endId);
+
+    return {
+      /**
+       * The current date range.
+       **/
+      dateRange,
+      /**
+       * Derived from the current date range as a convenience when passing to
+       * the `<Calendar.List />` component.
+       */
+      calendarActiveDateRanges,
+      /**
+       * Clears the current date range.
+       */
+      onClearDateRange,
+      /**
+       * Callback to pass to the `<Calendar.List />` component to handle date
+       * range.
+       */
+      onCalendarDayPress,
+      /**
+       * Whether the current date range is valid (e.g. has both start and end
+       * dates)
+       */
+      isDateRangeValid,
+    };
+  }, [dateRange, onCalendarDayPress, onClearDateRange]);
+};