♻️ Refactor: Update overlapping event type safety (#238)

* ✨ Feat: Add isOptimisticEvent utility and integrate into GridEvent and AllDayEvent components

* ✨ Feat: Refactor event handling to use Schema_GridEvent and improve type safety

Author: tyler-dane

packages/web/src/common/utils/event.util.ts

@@ -88,7 +88,6 @@ export const getCategory = (event: Schema_Event) => {
 export const assembleGridEvent = (
   event: Partial<Schema_GridEvent>
 ): Schema_GridEvent => {
-  // TODO: Maybe move to a constants file?
   const DEFAULT_POSITION = {
     isOverlapping: false,
     widthMultiplier: 1,
@@ -203,6 +202,11 @@ export const isEventInRange = (
   return isStartDateInRange || isEndDateInRange;
 };
 
+export const isOptimisticEvent = (event: Schema_GridEvent) => {
+  const isOptimistic = event._id?.startsWith(ID_OPTIMISTIC_PREFIX) || false;
+  return isOptimistic;
+};
+
 export const prepEvtAfterDraftDrop = (
   category: Categories_Event,
   dropItem: DropResult,

packages/web/src/common/utils/grid.util.ts

@@ -43,7 +43,12 @@ export const assignEventToRow = (
   return { fits, rowNum };
 };
 
-export const assignEventsToRow = (allDayEvents: Schema_Event[]) => {
+export const assignEventsToRow = (
+  allDayEvents: Schema_Event[]
+): {
+  rowsCount: number;
+  allDayEvents: Schema_GridEvent[];
+} => {
   const rows: number[][] = [];
   // makes copy of all event objects to allow for adding a 'row' field
   // can likely be optimized using immer's `produce` and `draft`
@@ -442,7 +447,8 @@ export const getAbsoluteLeftPosition = (
         }
 
         if (
-          event.position?.isOverlapping &&
+          !event.isAllDay &&
+          event.position.isOverlapping &&
           event.position.horizontalOrder > 1
         ) {
           positionStart += eventWidth * (event.position.horizontalOrder - 1);

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

@@ -5,16 +5,18 @@ import { assignEventsToRow } from "@web/common/utils/grid.util";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { assembleGridEvent } from "@web/common/utils/event.util";
 
+type Schema_GridEvent_NoPosition = Omit<Schema_GridEvent, "position">;
+
 export const selectAllDayEvents = createSelector(
   (state: RootState) => state.events.entities.value || {},
   (state: RootState) => state.events.getWeekEvents.value || [],
   (entities, weekIds) => {
     if (!("data" in weekIds) || weekIds.data.length === 0) return [];
 
-    const weekEvents: Schema_Event[] = weekIds.data.map(
+    const weekEvents: Schema_GridEvent_NoPosition[] = weekIds.data.map(
       (_id: string) => entities[_id]
     );
-    const _allDayEvents: Schema_Event[] = weekEvents.filter(
+    const _allDayEvents: Schema_GridEvent_NoPosition[] = weekEvents.filter(
       (e: Schema_Event) => e !== undefined && e.isAllDay
     );
     const { allDayEvents } = assignEventsToRow(_allDayEvents);

packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx

@@ -6,7 +6,9 @@ import React, {
   useMemo,
 } from "react";
 import dayjs from "dayjs";
+import { Priorities } from "@core/constants/core.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { isOptimisticEvent } from "@web/common/utils/event.util";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { Flex } from "@web/components/Flex";
@@ -18,10 +20,7 @@ import {
 import { getPosition } from "@web/views/Calendar/hooks/event/getPosition";
 import { getLineClamp } from "@web/common/utils/grid.util";
 import { getTimesLabel } from "@web/common/utils/web.date.util";
-import {
-  ID_OPTIMISTIC_PREFIX,
-  ZIndex,
-} from "@web/common/constants/web.constants";
+import { ZIndex } from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
@@ -59,8 +58,8 @@ const _GridEvent = (
   const { component } = weekProps;
 
   const isInPast = dayjs().isAfter(dayjs(_event.endDate));
-  const isOptimistic = _event._id?.startsWith(ID_OPTIMISTIC_PREFIX);
   const event = _event;
+  const isOptimistic = isOptimisticEvent(event);
 
   const position = getPosition(
     event,
@@ -78,7 +77,7 @@ const _GridEvent = (
   return (
     <StyledEvent
       allDay={event.isAllDay || false}
-      className={isDraft ? "active" : null}
+      className={isDraft ? "active" : undefined}
       height={position.height || 0}
       isDragging={isDragging}
       isInPast={isInPast}
@@ -92,7 +91,7 @@ const _GridEvent = (
 
         onEventMouseDown(event, e);
       }}
-      priority={event.priority}
+      priority={event.priority || Priorities.UNASSIGNED}
       ref={ref}
       role="button"
       tabindex="0"
@@ -111,7 +110,10 @@ const _GridEvent = (
           <>
             {(isDraft || !isInPast) && (
               <Text role="textbox" size="xs" zIndex={ZIndex.LAYER_3}>
-                {getTimesLabel(event.startDate, event.endDate)}
+                {getTimesLabel(
+                  event.startDate as string,
+                  event.endDate as string
+                )}
               </Text>
             )}
             <>

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

@@ -1,7 +1,9 @@
 import dayjs from "dayjs";
 import React, { memo, MouseEvent } from "react";
-import { Schema_Event } from "@core/types/event.types";
+import { Priorities } from "@core/constants/core.constants";
 import { Flex } from "@web/components/Flex";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
+import { isOptimisticEvent } from "@web/common/utils/event.util";
 import { AlignItems, FlexDirections } from "@web/components/Flex/styled";
 import { SpaceCharacter } from "@web/components/SpaceCharacter";
 import { getPosition } from "@web/views/Calendar/hooks/event/getPosition";
@@ -12,12 +14,12 @@ import { Text } from "@web/components/Text";
 import { StyledEvent } from "../../Event/styled";
 
 interface Props {
-  event: Schema_Event;
+  event: Schema_GridEvent;
   isPlaceholder: boolean;
   measurements: Measurements_Grid;
   startOfView: WeekProps["component"]["startOfView"];
   endOfView: WeekProps["component"]["endOfView"];
-  onMouseDown: (e: MouseEvent, event: Schema_Event) => void;
+  onMouseDown: (e: MouseEvent, event: Schema_GridEvent) => void;
 }
 
 const AllDayEvent = ({
@@ -36,18 +38,21 @@ const AllDayEvent = ({
     false
   );
 
+  const isOptimistic = isOptimisticEvent(event);
+
   return (
     <StyledEvent
-      allDay={event.isAllDay}
+      allDay={event.isAllDay || true}
       height={position.height}
       isDragging={false}
       isInPast={dayjs().isAfter(dayjs(event.endDate))}
       isPlaceholder={isPlaceholder}
+      isOptimistic={isOptimistic}
       isResizing={false}
       left={position.left}
       lineClamp={1}
       onMouseDown={(e) => onMouseDown(e, event)}
-      priority={event.priority}
+      priority={event.priority || Priorities.UNASSIGNED}
       role="button"
       top={position.top}
       width={position.width}

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

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from "react";
-import { Schema_Event } from "@core/types/event.types";
 import { ID_GRID_EVENTS_ALLDAY } from "@web/common/constants/web.constants";
+import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
@@ -26,7 +26,7 @@ export const AllDayEvents = ({
   const draftId = useAppSelector(selectDraftId);
   const dispatch = useAppDispatch();
 
-  const onMouseDown = (e: MouseEvent, event: Schema_Event) => {
+  const onMouseDown = (e: MouseEvent, event: Schema_GridEvent) => {
     e.stopPropagation();
 
     if (isSomedayEventFormOpen()) {
@@ -38,7 +38,7 @@ export const AllDayEvents = ({
 
   return (
     <StyledEvents id={ID_GRID_EVENTS_ALLDAY}>
-      {allDayEvents.map((event: Schema_Event, i) => {
+      {allDayEvents.map((event: Schema_GridEvent, i) => {
         return (
           <AllDayEventMemo
             key={`${event.title}-${i}`}

packages/web/src/views/Calendar/hooks/event/getPosition.ts

@@ -16,14 +16,12 @@ import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 
 export const getPosition = (
-  event: Schema_GridEvent | null,
+  event: Schema_GridEvent,
   startOfView: Dayjs,
   endOfView: Dayjs,
   measurements: Measurements_Grid,
   isDraft: boolean
 ) => {
-  if (!event) return null; // TS Guard
-
   const { colWidths } = measurements;
   const start = dayjs(event.startDate);
   const end = dayjs(event.endDate);