fix(grid): sync placeholder color with active draft

Author: tyler-dane

packages/web/src/views/Week/components/Grid/AllDayRow/AllDayEvents.tsx

@@ -3,7 +3,10 @@ import { Categories_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_ALLDAY } from "@web/common/constants/web.constants";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import { Week_AsyncStateContextReason } from "@web/ducks/events/context/week.context";
-import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
+import {
+  selectDraft,
+  selectDraftId,
+} from "@web/ducks/events/selectors/draft.selectors";
 import { selectAllDayEvents } from "@web/ducks/events/selectors/event.selectors";
 import { selectIsGetWeekEventsProcessingWithReason } from "@web/ducks/events/selectors/util.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
@@ -27,6 +30,7 @@ export const AllDayEvents = ({
   endOfView,
 }: Props) => {
   const allDayEvents = useAppSelector(selectAllDayEvents);
+  const draft = useAppSelector(selectDraft);
   const { isProcessing, reason } = useAppSelector(
     selectIsGetWeekEventsProcessingWithReason,
   );
@@ -63,11 +67,15 @@ export const AllDayEvents = ({
             event._id && pendingEventIds.includes(event._id),
           );
           const isPlaceholder = event._id === draftId;
+          const eventForDisplay =
+            isPlaceholder && draft && draft._id === event._id
+              ? { ...event, ...draft }
+              : event;
 
           return (
             <AllDayEventItem
               endOfView={endOfView}
-              event={event}
+              event={eventForDisplay}
               isPending={isPending}
               isPlaceholder={isPlaceholder}
               key={event._id}

packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx

@@ -6,14 +6,18 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import { act } from "react";
 import { Provider } from "react-redux";
-import { type Schema_Event } from "@core/types/event.types";
+import { Priorities } from "@core/constants/core.constants";
+import { Categories_Event, type Schema_Event } from "@core/types/event.types";
 import dayjs, { type Dayjs } from "@core/util/date/dayjs";
 import { createInitialState } from "@web/__tests__/utils/state/store.test.util";
 import {
   ID_GRID_COLUMNS_TIMED,
   ZIndex,
 } from "@web/common/constants/web.constants";
+import { gridColorByPriority } from "@web/common/styles/theme.util";
+import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { pendingEventsSlice } from "@web/ducks/events/slices/pending.slice";
 import { reducers } from "@web/store/reducers";
 import { DraftContext } from "@web/views/Week/components/Draft/context/DraftContext";
@@ -65,7 +69,10 @@ const measurements = {
   },
 } satisfies Measurements_Grid;
 
-const createStore = (events: Schema_Event[] = []) => {
+const createStore = (
+  events: Schema_Event[] = [],
+  draftEvent: Schema_Event | null = null,
+) => {
   const preloadedState = createInitialState();
   const eventIds: string[] = [];
   const eventEntities: Record<string, Schema_Event> = {};
@@ -88,6 +95,20 @@ const createStore = (events: Schema_Event[] = []) => {
     pageSize: eventIds.length || 1,
   };
 
+  if (draftEvent) {
+    preloadedState.events.draft = {
+      event: draftEvent,
+      status: {
+        activity: "keyboardEdit",
+        dateToResize: null,
+        eventType: draftEvent.isAllDay
+          ? Categories_Event.ALLDAY
+          : Categories_Event.TIMED,
+        isDrafting: true,
+      },
+    };
+  }
+
   return configureStore({
     preloadedState,
     reducer: reducers,
@@ -482,6 +503,46 @@ describe("Week calendar accessibility", () => {
     expect(getHoveredCalendarEventTarget()).toBeNull();
   });
 
+  it("updates the timed placeholder color when the active draft priority changes", async () => {
+    const savedEvent = createSavedEvent({
+      _id: "priority-event",
+      title: "Priority event",
+    });
+    const store = createStore([savedEvent], savedEvent);
+
+    render(
+      <Provider store={store}>
+        <MainGridEvents
+          measurements={measurements}
+          weekProps={createWeekProps()}
+        />
+      </Provider>,
+    );
+
+    const eventButton = screen.getByRole("button", {
+      name: /priority event/i,
+    });
+
+    expect(eventButton.style.getPropertyValue("--event-bg")).toBe(
+      gridColorByPriority[Priorities.UNASSIGNED],
+    );
+
+    act(() => {
+      store.dispatch(
+        draftSlice.actions.setEvent({
+          ...savedEvent,
+          priority: Priorities.WORK,
+        }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(eventButton.style.getPropertyValue("--event-bg")).toBe(
+        gridColorByPriority[Priorities.WORK],
+      );
+    });
+  });
+
   it("gives all-day events an all-day accessible name and target type", () => {
     const store = createStore([
       createSavedEvent({
@@ -515,6 +576,50 @@ describe("Week calendar accessibility", () => {
     ).toBe("all-day");
   });
 
+  it("updates the all-day placeholder color when the active draft priority changes", async () => {
+    const savedEvent = createSavedEvent({
+      _id: "all-day-priority-event",
+      isAllDay: true,
+      startDate: "2024-01-15T00:00:00.000Z",
+      endDate: "2024-01-16T00:00:00.000Z",
+      title: "All-day priority event",
+    });
+    const store = createStore([savedEvent], savedEvent);
+
+    render(
+      <Provider store={store}>
+        <AllDayEvents
+          endOfView={startOfView.endOf("week")}
+          measurements={measurements}
+          startOfView={startOfView}
+        />
+      </Provider>,
+    );
+
+    const eventButton = screen.getByRole("button", {
+      name: /all-day event: all-day priority event/i,
+    });
+
+    expect(eventButton.style.getPropertyValue("--event-bg")).toBe(
+      gridColorByPriority[Priorities.UNASSIGNED],
+    );
+
+    act(() => {
+      store.dispatch(
+        draftSlice.actions.setEvent({
+          ...savedEvent,
+          priority: Priorities.RELATIONS,
+        }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(eventButton.style.getPropertyValue("--event-bg")).toBe(
+        gridColorByPriority[Priorities.RELATIONS],
+      );
+    });
+  });
+
   it("keeps full-week all-day events spanning seven columns", () => {
     const store = createStore([
       createSavedEvent({

packages/web/src/views/Week/components/Grid/MainGrid/MainGridEvents.tsx

@@ -7,7 +7,10 @@ import {
 import { ID_GRID_EVENTS_TIMED } from "@web/common/constants/web.constants";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import { Week_AsyncStateContextReason } from "@web/ducks/events/context/week.context";
-import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
+import {
+  selectDraft,
+  selectDraftId,
+} from "@web/ducks/events/selectors/draft.selectors";
 import { selectGridEvents } from "@web/ducks/events/selectors/event.selectors";
 import { selectIsGetWeekEventsProcessingWithReason } from "@web/ducks/events/selectors/util.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
@@ -29,6 +32,7 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
   const dispatch = useAppDispatch();
 
   const timedEvents = useAppSelector(selectGridEvents);
+  const draft = useAppSelector(selectDraft);
   const { isProcessing, reason } = useAppSelector(
     selectIsGetWeekEventsProcessingWithReason,
   );
@@ -65,11 +69,15 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
             event._id && pendingEventIds.includes(event._id),
           );
           const isPlaceholder = event._id === draftId;
+          const eventForDisplay =
+            isPlaceholder && draft && draft._id === event._id
+              ? { ...event, ...draft }
+              : event;
 
           return (
             <MainGridEventItem
               deckLayout={deckLayout}
-              event={event}
+              event={eventForDisplay}
               isPending={isPending}
               isPlaceholder={isPlaceholder}
               key={`initial-${event._id}`}