fix(web): grid events losing position when changing to next/prev week

disable rendering events when a backend request is occurring, that way we address the issue where events lose position whenever we switch current week.

Author: that-one-arab

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

@@ -10,6 +10,9 @@ export const selectIsProcessing = (state: RootState) =>
   isProcessing(state.events.createEvent) ||
   isProcessing(state.events.getWeekEvents);
 
+export const selectIsGetWeekEventsProcessing = (state: RootState) =>
+  isProcessing(state.events.getWeekEvents);
+
 export const selectEventIdsBySectionType = (
   state: RootState,
   type: SectionType,

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

@@ -5,6 +5,7 @@ import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { isLeftClick } from "@web/common/utils/mouse/mouse.util";
 import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectAllDayEvents } from "@web/ducks/events/selectors/event.selectors";
+import { selectIsGetWeekEventsProcessing } from "@web/ducks/events/selectors/util.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
@@ -24,6 +25,7 @@ export const AllDayEvents = ({
   endOfView,
 }: Props) => {
   const allDayEvents = useAppSelector(selectAllDayEvents);
+  const isProcessing = useAppSelector(selectIsGetWeekEventsProcessing);
   const draftId = useAppSelector(selectDraftId);
   const dispatch = useAppDispatch();
 
@@ -54,24 +56,25 @@ export const AllDayEvents = ({
 
   return (
     <StyledEvents id={ID_GRID_EVENTS_ALLDAY}>
-      {allDayEvents.map((event: Schema_GridEvent, i) => {
-        return (
-          <AllDayEventMemo
-            key={`${event.title}-${i}`}
-            isPlaceholder={event._id === draftId}
-            event={event}
-            startOfView={startOfView}
-            endOfView={endOfView}
-            measurements={measurements}
-            onMouseDown={(e, event) => {
-              if (!isLeftClick(e)) {
-                return;
-              }
-              onMouseDown(e, event);
-            }}
-          />
-        );
-      })}
+      {!isProcessing &&
+        allDayEvents.map((event: Schema_GridEvent, i) => {
+          return (
+            <AllDayEventMemo
+              key={`${event.title}-${i}`}
+              isPlaceholder={event._id === draftId}
+              event={event}
+              startOfView={startOfView}
+              endOfView={endOfView}
+              measurements={measurements}
+              onMouseDown={(e, event) => {
+                if (!isLeftClick(e)) {
+                  return;
+                }
+                onMouseDown(e, event);
+              }}
+            />
+          );
+        })}
     </StyledEvents>
   );
 };

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

@@ -5,6 +5,7 @@ import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { adjustOverlappingEvents } from "@web/common/utils/overlap/overlap";
 import { selectDraftId } from "@web/ducks/events/selectors/draft.selectors";
 import { selectGridEvents } from "@web/ducks/events/selectors/event.selectors";
+import { selectIsGetWeekEventsProcessing } from "@web/ducks/events/selectors/util.selectors";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { useGridEventMouseDown } from "@web/views/Calendar/hooks/grid/useGridEventMouseDown";
@@ -21,6 +22,7 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
   const dispatch = useAppDispatch();
 
   const timedEvents = useAppSelector(selectGridEvents);
+  const isProcessing = useAppSelector(selectIsGetWeekEventsProcessing);
   const draftId = useAppSelector(selectDraftId);
 
   const adjustedEvents = adjustOverlappingEvents(timedEvents);
@@ -66,32 +68,33 @@ export const MainGridEvents = ({ measurements, weekProps }: Props) => {
 
   return (
     <div id={ID_GRID_EVENTS_TIMED}>
-      {adjustedEvents.map((event: Schema_GridEvent) => {
-        return (
-          <GridEventMemo
-            event={event}
-            isDragging={false}
-            isDraft={false}
-            isPlaceholder={event._id === draftId}
-            isResizing={false}
-            key={`initial-${event._id}`}
-            measurements={measurements}
-            onEventMouseDown={(event, e) => {
-              onMouseDown(e, event);
-            }}
-            onScalerMouseDown={(
-              event,
-              e,
-              dateToChange: "startDate" | "endDate",
-            ) => {
-              e.stopPropagation();
-              e.preventDefault();
-              resizeTimedEvent(event, dateToChange);
-            }}
-            weekProps={weekProps}
-          />
-        );
-      })}
+      {!isProcessing &&
+        adjustedEvents.map((event: Schema_GridEvent) => {
+          return (
+            <GridEventMemo
+              event={event}
+              isDragging={false}
+              isDraft={false}
+              isPlaceholder={event._id === draftId}
+              isResizing={false}
+              key={`initial-${event._id}`}
+              measurements={measurements}
+              onEventMouseDown={(event, e) => {
+                onMouseDown(e, event);
+              }}
+              onScalerMouseDown={(
+                event,
+                e,
+                dateToChange: "startDate" | "endDate",
+              ) => {
+                e.stopPropagation();
+                e.preventDefault();
+                resizeTimedEvent(event, dateToChange);
+              }}
+              weekProps={weekProps}
+            />
+          );
+        })}
     </div>
   );
 };