feat(web): remove reminder from day and week views (#1402)

* refactor(web): enhance Header and MemoryRouter components for improved reminder handling

- Updated `Header` component to conditionally render the `Reminder` based on the `showReminder` prop, allowing for more flexible UI rendering.
- Refactored `useReminderHotkey` to accept an `enabled` parameter, enabling or disabling the hotkey functionality based on the reminder state.
- Modified `MemoryRouter` utility to accept `initialEntries` for better routing control in tests.
- Removed the `Edit Reminder` option from the command palette and related tests to streamline the user interface and focus on essential functionalities.

* refactor(tests): remove redundant reminder tests from Calendar.form.test.tsx

- Deleted tests related to reminder functionality in the Calendar form, including keyboard shortcuts and command palette interactions, to streamline the test suite and focus on essential features.
- Removed unused import from DayCmdPalette.tsx to clean up the codebase.

* refactor(Calendar): simplify SidebarDraftProvider props

- Removed the `measurements` prop from `SidebarDraftProvider` in `CalendarView`, streamlining its usage.
- Updated the `SidebarDraftProvider` component to reflect the removal of the `measurements` prop, enhancing clarity and reducing complexity.

* refactor(tests): enhance custom render function in mock.render.tsx

- Updated the `customRender` function to include a `CustomWrapper` option, allowing for more flexible component wrapping during tests.
- Simplified the wrapper logic by creating a new `Wrapper` component that conditionally includes `CustomWrapper` or defaults to `BaseProviders`, improving test setup clarity.

* refactor(tests): update mock event data and enhance test state structure

- Removed local date utility from event mocks to standardize date handling.
- Updated `EUROPE_TRIP` event dates to fixed values for consistency in tests.
- Introduced a new `timer.baktest.ts` file with comprehensive tests for the Timer class, covering initialization, error handling, and event emissions.
- Enhanced `state.weekEvents` mock to reflect accurate event counts and success states, improving test reliability.
- Refactored `store.test.util.ts` to simplify state type definitions, ensuring better compatibility with mock data.

* refactor(tests): streamline mock state and enhance type definitions

- Removed unused event states from `state.weekEvents` mock to simplify the structure.
- Updated `store.test.util.ts` to improve type definitions for test state, ensuring better compatibility with mock data.
- Added `importGCal` state to `sync` in `preloadedState` for improved testing scenarios.
- Enhanced type safety in `Sidebar.render.test.tsx` by specifying types for `dateCalcs` and `measurements` props.

* Update packages/web/src/views/Day/view/DayViewContent.tsx

Co-authored-by: Copilot <[email protected]>

* refactor(tests): clean up DayCmdPalette test imports and mocks

- Removed unused imports and streamlined mock setup in `DayCmdPalette.test.tsx` to enhance test clarity and maintainability.
- Simplified the test structure by eliminating unnecessary dependencies, improving overall test performance.

* refactor(Header): improve reminder focus handling with useCallback

- Updated the `Header` component to utilize `useCallback` for the reminder focus handler, enhancing performance by memoizing the function.
- Simplified the hotkey functionality to conditionally focus the reminder based on the `showReminder` prop, improving code clarity and maintainability.

---------

Co-authored-by: Copilot <[email protected]>

Author: tyler-dane

packages/core/src/__mocks__/v1/events/events.misc.ts

@@ -33,16 +33,6 @@ export const CLIMB: Schema_Event = {
   endDate: "2022-03-01T19:00:00-06:00",
 };
 
-// Use local date to avoid timezone-dependent test failures
-const getLocalDateString = (): string => {
-  const now = new Date();
-  const year = now.getFullYear();
-  const month = String(now.getMonth() + 1).padStart(2, "0");
-  const day = String(now.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-
-const today = getLocalDateString();
 export const EUROPE_TRIP: Schema_Event = {
   _id: new ObjectId().toString(),
   user: USER,
@@ -51,8 +41,8 @@ export const EUROPE_TRIP: Schema_Event = {
   description: "Italy, Germany",
   isSomeday: true,
   priority: Priorities.SELF,
-  startDate: today,
-  endDate: today,
+  startDate: "2025-12-10T00:00:00-00:00",
+  endDate: "2025-12-10T00:00:00-00:00",
   order: 2,
 };
 export const LEARN_CHINESE: Schema_Event = {

packages/core/src/util/timer.test.ts packages/core/src/util/timer.baktest.tspackages/core/src/util/timer.test.ts renamed to packages/core/src/util/timer.baktest.ts

@@ -84,16 +84,28 @@ const customRender = (
       reducer: reducers,
       preloadedState: state,
     }),
+    wrapper: CustomWrapper,
     ...renderOptions
-  }: Omit<CustomRenderOptions, "wrapper"> = {},
+  }: CustomRenderOptions = {},
 ) => {
   sagaMiddleware.run(sagas);
 
   const options: RenderOptions = { ...renderOptions };
+  const BaseProviders = TestProviders({ store, router });
+
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    if (!CustomWrapper) return <BaseProviders>{children}</BaseProviders>;
+
+    return (
+      <BaseProviders>
+        <CustomWrapper>{children}</CustomWrapper>
+      </BaseProviders>
+    );
+  };
 
   // wraps test component with providers
   return render(ui, {
-    wrapper: TestProviders({ store, router }),
+    wrapper: Wrapper,
     ...options,
   });
 };

packages/web/src/__tests__/__mocks__/mock.render.tsx

@@ -7,19 +7,19 @@ import {
   MULTI_WEEK,
   TY_TIM,
 } from "@core/__mocks__/v1/events/events.misc";
-import { InitialReduxState } from "@web/views/Calendar/calendar.render.test.utils";
+import { InitialReduxState } from "@web/__tests__/utils/state/store.test.util";
 
 export const preloadedState: InitialReduxState = {
   events: {
     getSomedayEvents: {
       value: {
         data: [EUROPE_TRIP._id as string],
-        count: 0,
-        pageSize: 0,
+        count: 1,
+        pageSize: 10,
       },
       isProcessing: false,
-      isSuccess: false,
-      error: undefined,
+      isSuccess: true,
+      error: null,
       reason: null,
     },
     getWeekEvents: {
@@ -32,19 +32,19 @@ export const preloadedState: InitialReduxState = {
           MULTI_WEEK._id as string,
           TY_TIM._id as string,
         ],
-        count: 0,
-        pageSize: 0,
+        count: 6,
+        pageSize: 10,
       },
       isProcessing: false,
-      isSuccess: false,
-      error: undefined,
+      isSuccess: true,
+      error: null,
       reason: null,
     },
     getDayEvents: {
       value: null,
       isProcessing: false,
-      isSuccess: false,
-      error: undefined,
+      isSuccess: true,
+      error: null,
       reason: null,
     },
     entities: {
@@ -58,20 +58,35 @@ export const preloadedState: InitialReduxState = {
         [TY_TIM._id as string]: TY_TIM,
       },
     },
+    draft: {
+      event: null,
+      status: {
+        activity: null,
+        isDrafting: false,
+        eventType: null,
+        dateToResize: null,
+      },
+    },
+    pendingEvents: {
+      eventIds: [],
+    },
   },
   settings: {
     isCmdPaletteOpen: false,
   },
   sync: {
+    importGCal: {
+      importing: false,
+    },
     importLatest: {
       isFetchNeeded: false,
       reason: null,
     },
   },
   view: {
     dates: {
-      start: "",
-      end: "",
+      start: "2025-12-07T00:00:00Z",
+      end: "2025-12-13T23:59:59Z",
     },
     sidebar: {
       tab: "tasks",

packages/web/src/__tests__/__mocks__/state/state.weekEvents.ts

@@ -2,10 +2,14 @@ import { act } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { render } from "@web/__tests__/__mocks__/mock.render";
 
-export const renderWithMemoryRouter = async (ui: React.ReactElement) => {
+export const renderWithMemoryRouter = async (
+  ui: React.ReactElement,
+  initialEntries?: string[],
+) => {
   return await act(() =>
     render(
       <MemoryRouter
+        initialEntries={initialEntries}
         future={{
           v7_startTransition: true,
           v7_relativeSplatPath: true,

packages/web/src/__tests__/utils/providers/MemoryRouter.tsx

@@ -21,6 +21,7 @@ type TestState = {
       error: unknown;
       reason: string | null;
     };
+
     getWeekEvents?: {
       value: {
         data: string[];
@@ -45,6 +46,7 @@ type TestState = {
     entities?: {
       value: Record<string, unknown>;
     };
+    [key: string]: unknown;
   };
 };
 // Type for the initial state that can be passed to PreloadedState
@@ -82,34 +84,6 @@ export const createInitialState = (
         isSuccess: false,
         reason: null,
       },
-      getCurrentMonthEvents: {
-        value: null,
-        isProcessing: false,
-        error: null,
-        isSuccess: false,
-        reason: null,
-      },
-      createEvent: {
-        isProcessing: false,
-        error: null,
-        value: null,
-        isSuccess: false,
-        reason: null,
-      },
-      editEvent: {
-        isProcessing: false,
-        error: null,
-        value: null,
-        isSuccess: false,
-        reason: null,
-      },
-      deleteEvent: {
-        isProcessing: false,
-        error: null,
-        value: null,
-        isSuccess: false,
-        reason: null,
-      },
       draft: {
         event: null,
         status: {
@@ -140,6 +114,9 @@ export const createInitialState = (
       isCmdPaletteOpen: false,
     },
     sync: {
+      importGCal: {
+        importing: false,
+      },
       importLatest: {
         isFetchNeeded: false,
         reason: null,

packages/web/src/__tests__/utils/state/store.test.util.ts

@@ -142,51 +142,4 @@ describe("Event Form", () => {
       );
     });
   });
-
-  describe("Reminder", () => {
-    it("it should be focused when the 'r' keyboard shortcut is used", async () => {
-      const { container } = await act(() =>
-        render(<></>, { router, state: preloadedState }),
-      );
-
-      const reminderPlaceholder = screen.getByText(
-        "Click to add your reminder",
-      );
-
-      expect(reminderPlaceholder).toBeInTheDocument();
-
-      await act(async () => userEvent.keyboard("r"));
-
-      const reminderInput = container.querySelector('[id="reminderInput"]');
-
-      expect(reminderInput).toHaveFocus();
-    });
-
-    it("it should be focused when the 'edit reminder' btn is clicked in the command palette", async () => {
-      const user = userEvent.setup();
-
-      await act(() => render(<></>, { router, state: preloadedState }));
-
-      expect(
-        screen.getByText("Click to add your reminder"),
-      ).toBeInTheDocument();
-
-      await act(async () => {
-        await user.keyboard(`{${getModifierKey()}>}k{/${getModifierKey()}}`);
-      });
-
-      const cmdPaletteEditBtn = await screen.findByRole("button", {
-        name: /edit reminder/i,
-      });
-      await act(async () => {
-        await user.click(cmdPaletteEditBtn);
-      });
-
-      await waitFor(() => {
-        const input = document.querySelector("#reminderInput");
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveFocus();
-      });
-    }, 10000);
-  });
 });

packages/web/src/views/Calendar/Calendar.form.test.tsx

@@ -65,11 +65,7 @@ export const CalendarView = () => {
         weekProps={weekProps}
         isSidebarOpen={isSidebarOpen}
       >
-        <SidebarDraftProvider
-          dateCalcs={dateCalcs}
-          measurements={measurements}
-          weekProps={weekProps}
-        >
+        <SidebarDraftProvider dateCalcs={dateCalcs} weekProps={weekProps}>
           <Shortcuts shortcutsProps={shortcutProps}>
             <ContextMenuWrapper id="sidebar-context-menu">
               <Draft measurements={measurements} weekProps={weekProps} />

packages/web/src/views/Calendar/Calendar.tsx

@@ -1,6 +1,5 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
-import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useSidebarActions } from "../hooks/useSidebarActions";
 import { useSidebarEffects } from "../hooks/useSidebarEffects";
@@ -10,16 +9,14 @@ import { SidebarDraftContext } from "./SidebarDraftContext";
 interface Props {
   children: ReactNode;
   dateCalcs: DateCalcs;
-  measurements: Measurements_Grid;
   weekProps: WeekProps;
 }
 export const SidebarDraftProvider = ({
   children,
   dateCalcs,
-  measurements,
   weekProps,
 }: Props) => {
-  const { setters, state } = useSidebarState(measurements);
+  const { setters, state } = useSidebarState();
   const actions = useSidebarActions(dateCalcs, state, setters, weekProps);
   useSidebarEffects(state, actions);
 

packages/web/src/views/Calendar/components/Draft/sidebar/context/SidebarDraftProvider.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from "react";
+import { FC } from "react";
 import dayjs, { Dayjs } from "@core/util/date/dayjs";
 import { theme } from "@web/common/styles/theme";
 import { getCalendarHeadingLabel } from "@web/common/utils/datetime/web.date.util";
@@ -12,11 +12,9 @@ import { viewSlice } from "@web/ducks/events/slices/view.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { RootProps } from "../../calendarView.types";
 import { Util_Scroll } from "../../hooks/grid/useScroll";
-import { useReminderHotkey } from "../../hooks/shortcuts/useFocusHotkey";
 import { WeekProps } from "../../hooks/useWeek";
 import { TodayButton } from "../TodayButton/TodayButton";
 import { DayLabels } from "./DayLabels";
-import { Reminder } from "./Reminder/Reminder";
 import {
   ArrowNavigationButton,
   StyledHeaderLabel,
@@ -51,10 +49,6 @@ export const Header: FC<Props> = ({ scrollUtil, today, weekProps }) => {
     scrollToNow();
   };
 
-  const reminderRef = useRef<HTMLDivElement>(null);
-
-  useReminderHotkey(() => reminderRef.current?.focus(), [reminderRef]);
-
   return (
     <>
       <StyledHeaderRow alignItems={AlignItems.BASELINE}>
@@ -76,7 +70,6 @@ export const Header: FC<Props> = ({ scrollUtil, today, weekProps }) => {
             <Text size="xl">{headerLabel}</Text>
           </StyledHeaderLabel>
         </StyledLeftGroup>
-        <Reminder ref={reminderRef} />
         <StyledRightGroup>
           <SelectView />
           <div>