fix(web): handle someday week label edge case (#1062)

* fix: fix function isCurrentWeek

* fix: This Week label functions and tests

* fix: extract isCurrentWeek + unit tests for getSomedayWeekLabel function

* fix: refactoring reviewed code

* feat(web): implement useWeekLabel hook for processing week labels

* refactor(web): simplify SomedayTab component and integrate useWeekLabel hook

* test(web): update tests for getSomedayWeekLabel to use viewStart parameter

---------

Co-authored-by: anna.potocka <anna.potocka@student.tuke.sk>
Co-authored-by: Tyler Dane <tyler@switchback.tech>

Author: 3 people

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayTab.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useMemo, useRef } from "react";
+import React, { FC, useRef } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 import { theme } from "@web/common/styles/theme";
-import { getWeekRangeLabel } from "@web/common/utils/datetime/web.date.util";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
 import { Divider } from "@web/components/Divider";
 import { selectIsGetSomedayEventsProcessing } from "@web/ducks/events/selectors/someday.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
+import { useWeekLabel } from "@web/views/Calendar/components/Sidebar/SomedayTab/WeekSection/useWeekLabel";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import {
   Measurements_Grid,
@@ -35,10 +35,7 @@ export const SomedayTab: FC<Props> = ({
   const isProcessing = useAppSelector(selectIsGetSomedayEventsProcessing);
   const context = useSidebarContext();
   const somedayRef = useRef<HTMLDivElement>(null);
-  const weekLabel = useMemo(
-    () => getWeekRangeLabel(viewStart, viewEnd),
-    [viewEnd, viewStart],
-  );
+  const weekLabel = useWeekLabel(viewStart, viewEnd);
 
   if (!context) return null; // TS Guard
 

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx

@@ -26,31 +26,14 @@ export const WeekSection: FC<Props> = ({
   weekLabel,
   gridRefs,
 }) => {
-  const isCurrentWeek = (label: string): boolean => {
-    const [start, end] = label.split(" - ");
-    const [month, startDay] = start.split(".").map(Number);
-    const endDay = Number(end);
-    const now = new Date();
-    const year = now.getFullYear();
-
-    const startDate = new Date(year, month - 1, startDay);
-    const endDate = new Date(year, month - 1, endDay);
-
-    now.setHours(0, 0, 0, 0);
-    startDate.setHours(0, 0, 0, 0);
-    endDate.setHours(0, 0, 0, 0);
-
-    return now >= startDate && now <= endDate;
-  };
-
   return (
     <SidebarSection>
       <SidebarHeader
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
         <Text role="heading" size="xl">
-          {isCurrentWeek(weekLabel) ? "This Week" : weekLabel}
+          {weekLabel}
         </Text>
       </SidebarHeader>
 

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/useWeekLabel.test.tsx

@@ -0,0 +1,168 @@
+import dayjs, { Dayjs } from "dayjs";
+import "@testing-library/jest-dom";
+import {
+  getSomedayWeekLabel,
+  isCurrentWeek,
+} from "@web/views/Calendar/components/Sidebar/SomedayTab/WeekSection/useWeekLabel";
+
+const makeLabel = (start: Dayjs, end: Dayjs): string =>
+  `${start.format("M.D")} - ${end.format("M.D")}`;
+
+describe("isCurrentWeek()", () => {
+  it("returns true when today is inside range", () => {
+    const today = dayjs("2025-01-10");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(true);
+  });
+
+  it("returns false when today is before range", () => {
+    const today = dayjs("2025-01-07");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(false);
+  });
+
+  it("returns false when today is after range", () => {
+    const today = dayjs("2025-01-20");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(false);
+  });
+
+  // Cross-year boundary (Dec → Jan)
+  it("handles a week spanning from December to January", () => {
+    const today = dayjs("2026-01-02");
+    const label = makeLabel(dayjs("2025-12-30"), dayjs("2026-01-05"));
+    const result = isCurrentWeek(label, dayjs("2025-12-30"), today);
+    expect(result).toBe(true);
+  });
+
+  // Cross-year boundary but today before
+  it("returns false when today is before a cross-year range", () => {
+    const today = dayjs("2025-12-28");
+    const label = makeLabel(dayjs("2025-12-30"), dayjs("2026-01-05"));
+    const result = isCurrentWeek(label, dayjs("2025-12-30"), today);
+    expect(result).toBe(false);
+  });
+
+  // Cross-year boundary but today after
+  it("returns false when today is after a cross-year range", () => {
+    const today = dayjs("2026-01-06");
+    const label = makeLabel(dayjs("2025-12-30"), dayjs("2026-01-05"));
+    const result = isCurrentWeek(label, dayjs("2025-12-30"), today);
+    expect(result).toBe(false);
+  });
+
+  // Missing dash (invalid format)
+  it("returns false for malformed label", () => {
+    const today = dayjs("2025-04-10");
+    const label = "4.10"; // no dash
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(false);
+  });
+
+  // End month omitted
+  it("handles label with no explicit end day", () => {
+    const today = dayjs("2025-06-03");
+    const label = "6.1 - 7"; // missing month number after dash
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(true);
+  });
+
+  // Leap year range
+  it("handles leap year February 29 correctly", () => {
+    const today = dayjs("2028-02-29");
+    const label = makeLabel(dayjs("2028-02-26"), dayjs("2028-03-03"));
+    const result = isCurrentWeek(label, today, today);
+    expect(result).toBe(true);
+  });
+
+  // Cross-month transition (e.g. June → July)
+  it("handles a week that crosses from one month to the next", () => {
+    const today = dayjs("2025-07-02");
+    const label = makeLabel(dayjs("2025-06-29"), dayjs("2025-07-05"));
+    const result = isCurrentWeek(label, dayjs("2025-06-29"), today);
+    expect(result).toBe(true);
+  });
+
+  // Cross-month transition, today before range
+  it("returns false when today is before a cross-month range", () => {
+    const today = dayjs("2025-06-27");
+    const label = makeLabel(dayjs("2025-06-29"), dayjs("2025-07-05"));
+    const result = isCurrentWeek(label, dayjs("2025-06-29"), today);
+    expect(result).toBe(false);
+  });
+
+  // Cross-month transition, today after range
+  it("returns false when today is after a cross-month range", () => {
+    const today = dayjs("2025-07-06");
+    const label = makeLabel(dayjs("2025-06-29"), dayjs("2025-07-05"));
+    const result = isCurrentWeek(label, dayjs("2025-06-29"), today);
+    expect(result).toBe(false);
+  });
+});
+
+describe("getSomedayWeekLabel()", () => {
+  it('returns "This Week" when today is inside range', () => {
+    const today = dayjs("2025-01-10");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    expect(getSomedayWeekLabel(label, today, today)).toBe("This Week");
+  });
+
+  it("returns original label when today is before range", () => {
+    const today = dayjs("2025-01-07");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    expect(getSomedayWeekLabel(label, today, today)).toBe(label);
+  });
+
+  it("returns original label when today is after range", () => {
+    const today = dayjs("2025-01-20");
+    const label = makeLabel(dayjs("2025-01-08"), dayjs("2025-01-12"));
+    expect(getSomedayWeekLabel(label, today, today)).toBe(label);
+  });
+
+  it('returns "This Week" for a cross-year week when today is inside', () => {
+    const today = dayjs("2026-01-02");
+    const label = makeLabel(dayjs("2025-12-30"), dayjs("2026-01-05"));
+    expect(getSomedayWeekLabel(label, dayjs("2025-12-30"), today)).toBe(
+      "This Week",
+    );
+  });
+
+  it("returns label for cross-year week when today is outside", () => {
+    const today = dayjs("2026-01-06");
+    const label = makeLabel(dayjs("2025-12-30"), dayjs("2026-01-05"));
+    expect(getSomedayWeekLabel(label, dayjs("2025-12-30"), today)).toBe(label);
+  });
+
+  // Cross-month
+  it('returns "This Week" for cross-month range when today is inside', () => {
+    const today = dayjs("2025-07-02");
+    const label = makeLabel(dayjs("2025-06-29"), dayjs("2025-07-05"));
+    expect(getSomedayWeekLabel(label, dayjs("2025-06-29"), today)).toBe(
+      "This Week",
+    );
+  });
+
+  it("returns label for cross-month week when today is outside", () => {
+    const today = dayjs("2025-07-06");
+    const label = makeLabel(dayjs("2025-06-29"), dayjs("2025-07-05"));
+    expect(getSomedayWeekLabel(label, dayjs("2025-06-29"), today)).toBe(label);
+  });
+
+  // Leap year
+  it('returns "This Week" for leap-year week containing February 29', () => {
+    const today = dayjs("2028-02-29");
+    const viewStart = dayjs("2028-02-26");
+    const label = makeLabel(dayjs("2028-02-26"), dayjs("2028-03-03"));
+    expect(getSomedayWeekLabel(label, viewStart, today)).toBe("This Week");
+  });
+
+  it("returns label when today is outside the leap-year week", () => {
+    const today = dayjs("2028-03-05");
+    const viewStart = dayjs("2028-02-26");
+    const label = makeLabel(dayjs("2028-02-26"), dayjs("2028-03-03"));
+    expect(getSomedayWeekLabel(label, viewStart, today)).toBe(label);
+  });
+});

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/useWeekLabel.ts

@@ -0,0 +1,60 @@
+import dayjs, { Dayjs } from "dayjs";
+import { useMemo } from "react";
+import { getWeekRangeLabel } from "@web/common/utils/datetime/web.date.util";
+import { useToday } from "@web/views/Calendar/hooks/useToday";
+
+export const useWeekLabel = (viewStart: Dayjs, viewEnd: Dayjs) => {
+  const { today } = useToday();
+
+  const weekLabel = useMemo(() => {
+    const origLabel = getWeekRangeLabel(viewStart, viewEnd);
+    const processedLabel = getSomedayWeekLabel(origLabel, viewStart, today);
+    return processedLabel;
+  }, [viewStart, viewEnd, today]);
+
+  return weekLabel;
+};
+
+export const getSomedayWeekLabel = (
+  label: string,
+  viewStart: Dayjs,
+  today: Dayjs,
+): string => {
+  return isCurrentWeek(label, viewStart, today) ? "This Week" : label;
+};
+
+export const isCurrentWeek = (
+  label: string,
+  viewStart: Dayjs,
+  today: Dayjs,
+): boolean => {
+  const parts = label.split(" - ");
+  if (parts.length != 2) return false;
+
+  const [start, end] = label.split(" - ");
+  const [startMonth, startDay] = start.split(".").map(Number);
+  let [endMonth, endDay] = end.split(".").map(Number);
+
+  const startYear = viewStart.year();
+  let endYear = startYear;
+  if (startMonth === 12 && endMonth === 1) {
+    endYear = startYear + 1;
+  }
+
+  if (endDay === undefined) {
+    endDay = endMonth;
+    endMonth = startMonth;
+  }
+
+  const startDate = dayjs(`${startYear}-${startMonth}-${startDay}`).startOf(
+    "day",
+  );
+  const endDate = dayjs(`${endYear}-${endMonth}-${endDay}`).endOf("day");
+  const todayDate = today.startOf("day");
+
+  return (
+    todayDate.isSame(startDate) ||
+    (todayDate.isAfter(startDate) && todayDate.isBefore(endDate)) ||
+    todayDate.isSame(endDate)
+  );
+};

packages/web/src/views/Calendar/hooks/useToday.ts

@@ -4,6 +4,7 @@ import dayjs from "@core/util/date/dayjs";
 export const useToday = () => {
   const getToday = (todayIndex: number) => {
     const today = dayjs();
+
     if (today.get("day") === todayIndex) {
       return today;
     }