fix(web): stabilize empty event selectors (#1832)

Author: Uarmagan

packages/web/src/ducks/events/selectors/event.selectors.test.ts

@@ -0,0 +1,36 @@
+import { type RootState } from "@web/store";
+import {
+  selectAllDayDayEvents,
+  selectDayEvents,
+  selectEventEntities,
+  selectTimedDayEvents,
+} from "./event.selectors";
+
+const createDayRefreshStateBeforeEventsLoad = (): RootState =>
+  ({
+    events: {
+      entities: {},
+      getDayEvents: {
+        value: null,
+      },
+    },
+  }) as RootState;
+
+const dayViewRefreshSelectors: Array<[string, (state: RootState) => unknown]> =
+  [
+    ["event entities", selectEventEntities],
+    ["day events", selectDayEvents],
+    ["timed day events", selectTimedDayEvents],
+    ["all-day day events", selectAllDayDayEvents],
+  ];
+
+describe("Day View event selector stability", () => {
+  it.each(
+    dayViewRefreshSelectors,
+  )("keeps %s stable before the event request succeeds", (_label, selector) => {
+    const state = createDayRefreshStateBeforeEventsLoad();
+    const selected = selector(state);
+
+    expect(selector(state)).toBe(selected);
+  });
+});

packages/web/src/ducks/events/selectors/event.selectors.ts

@@ -8,10 +8,17 @@ import {
   hasEventDates,
 } from "@web/common/utils/event/event.util";
 import { assignEventsToRow } from "@web/common/utils/grid/assign.row";
+import { type Entities_Event } from "@web/ducks/events/event.types";
 import { type RootState } from "@web/store";
 
 type Schema_GridEvent_NoPosition = Omit<Schema_GridEvent, "position">;
 
+const EMPTY_EVENT_ENTITIES: Entities_Event = {};
+const EMPTY_EVENT_IDS: string[] = [];
+
+export const selectEventEntities = (state: RootState) =>
+  state.events.entities.value ?? EMPTY_EVENT_ENTITIES;
+
 export const selectAllDayEvents = createSelector(
   (state: RootState) => state.events.entities.value || {},
   (state: RootState) => state.events.getWeekEvents.value || [],
@@ -35,9 +42,6 @@ export const selectEventById = (
   id: string,
 ): Schema_Event | null => selectEventEntities(state)[id] ?? null;
 
-export const selectEventEntities = (state: RootState) =>
-  state.events.entities.value || {};
-
 export const selectGridEvents = createSelector(
   (state: RootState) => state.events.entities.value || {},
   (state: RootState) => state.events.getWeekEvents.value || [],
@@ -67,18 +71,11 @@ export const selectRowCount = createSelector(
   },
 );
 
-const selectDayEventIds = (state: RootState) => {
-  const value = state.events.getDayEvents.value;
-
-  if (!value || !("data" in value)) {
-    return [];
-  }
-
-  return value.data ?? [];
-};
+const selectDayEventIds = (state: RootState) =>
+  state.events.getDayEvents.value?.data ?? EMPTY_EVENT_IDS;
 
 export const selectDayEvents = createSelector(
-  (state: RootState) => state.events.entities.value || {},
+  selectEventEntities,
   selectDayEventIds,
   (entities, ids) =>
     ids