✨ 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,

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";
@@ -22,8 +24,6 @@ import { ZIndex } from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
-import { Priorities } from "@core/constants/core.constants";
-import { isOptimisticEvent } from "@web/common/utils/event.util";
 
 interface Props {
   event: Schema_GridEvent;

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";
@@ -10,17 +12,14 @@ import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent } from "../../Event/styled";
-import { Schema_GridEvent } from "@web/common/types/web.event.types";
-import { Priorities } from "@core/constants/core.constants";
-import { isOptimisticEvent } from "@web/common/utils/event.util";
 
 interface Props {
   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 = ({

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}`}