✨ Feat: Add drag and drop (DnD) state management for sidebar events

Author: tyler-dane

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

@@ -9,6 +9,9 @@ export const selectDraftStatus = (state: RootState) =>
 export const selectIsDrafting = (state: RootState) =>
   state.events.draft.status?.isDrafting;
 
+export const selectIsDNDing = (state: RootState) =>
+  state.events.draft.status?.activity === "dnd";
+
 export const selectIsDraftingExisting = (state: RootState) =>
   state.events.draft.event?._id !== undefined;
 

packages/web/src/ducks/events/slices/draft.slice.ts

@@ -47,6 +47,14 @@ export const draftSlice = createSlice({
       };
     },
 
+    startDnd: (state) => {
+      state.status = {
+        ...state.status,
+        activity: "dnd",
+        isDrafting: true,
+      };
+    },
+
     startDragging: (state, action) => {
       const { event } = action.payload;
       state.event = event;

packages/web/src/ducks/events/slices/draft.slice.types.ts

@@ -7,8 +7,9 @@ export interface Action_DraftEvent extends Action {
 }
 export type Activity_DraftEvent =
   | "createShortcut"
-  | "eventRightClick"
+  | "dnd"
   | "dragging"
+  | "eventRightClick"
   | "gridClick"
   | "resizing"
   | "sidebarClick";

packages/web/src/views/Calendar/components/Draft/hooks/sidebar/useMousePosition.ts

@@ -7,7 +7,7 @@ import {
 import { Coordinates } from "@web/common/types/util.types";
 
 export const useMousePosition = (
-  isDragging: boolean,
+  isDNDing: boolean,
   isFormOpen: boolean,
   measurements: Measurements_Grid,
 ) => {
@@ -40,14 +40,14 @@ export const useMousePosition = (
       setMouseCoords({ x, y });
     };
 
-    if (!isDragging || isFormOpen) return;
+    if (!isDNDing) return;
 
     window.addEventListener("mousemove", handleMouseMove);
 
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
     };
-  }, [allDayRow?.bottom, allDayRow?.top, isDragging, isFormOpen]);
+  }, [allDayRow?.bottom, allDayRow?.top, isDNDing, isFormOpen]);
 
   return { isOverAllDayRow, isOverGrid, isOverMainGrid, mouseCoords };
 };

packages/web/src/views/Calendar/components/Draft/hooks/sidebar/useSidebarState.ts

@@ -3,7 +3,10 @@ import { Schema_Event } from "@core/types/event.types";
 import { COLUMN_MONTH, COLUMN_WEEK } from "@web/common/constants/web.constants";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { useAppSelector } from "@web/store/store.hooks";
-import { selectDraftStatus } from "@web/ducks/events/selectors/draft.selectors";
+import {
+  selectDraftStatus,
+  selectIsDNDing,
+} from "@web/ducks/events/selectors/draft.selectors";
 import { selectCategorizedEvents } from "@web/ducks/events/selectors/someday.selectors";
 
 import { useMousePosition } from "./useMousePosition";
@@ -17,6 +20,7 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
   }, [categorizedEvents]);
 
   const { eventType: draftType } = useAppSelector(selectDraftStatus);
+  const isDNDing = useAppSelector(selectIsDNDing);
 
   const [draft, setDraft] = useState<Schema_Event | null>(null);
   const [isDrafting, setIsDrafting] = useState(false);
@@ -25,7 +29,7 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
 
   const isDragging = isDrafting && draft !== null;
   const { isOverAllDayRow, isOverGrid, isOverMainGrid, mouseCoords } =
-    useMousePosition(isDragging, isSomedayFormOpen, measurements);
+    useMousePosition(isDNDing, isSomedayFormOpen, measurements);
 
   const somedayWeekIds = somedayEvents.columns[COLUMN_WEEK]
     .eventIds as string[];
@@ -36,8 +40,7 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
   const isDraftingNew =
     isDrafting && !isDraftingExisting && !somedayIds.includes(draft?._id);
 
-  const shouldPreviewOnGrid =
-    draft !== null && isOverGrid && !isSomedayFormOpen;
+  const shouldPreviewOnGrid = isDNDing && isOverGrid;
 
   return {
     draft,

packages/web/src/views/Calendar/components/Draft/hooks/sidebar/useSidebarUtil.ts

@@ -13,7 +13,6 @@ import {
 import { DropResult } from "@hello-pangea/dnd";
 import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants";
 import { DropResult_ReactDND } from "@web/common/types/dnd.types";
-import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import {
   prepEvtAfterDraftDrop,
   assembleDefaultEvent,
@@ -187,6 +186,7 @@ export const useSidebarUtil = (
   const onDraft = (event: Schema_Event, category: Categories_Event) => {
     state.setIsDrafting(true);
     state.setDraft(event);
+    setIsSomedayFormOpen(true);
 
     dispatch(
       draftSlice.actions.start({
@@ -244,25 +244,22 @@ export const useSidebarUtil = (
     close();
   };
 
-  const onDragStart = (props: { draggableId: string }) => {
+  const onDragStart = async (props: { draggableId: string }) => {
     const existingEvent = state.somedayEvents.events[props.draggableId];
     const isExisting = existingEvent !== undefined;
 
-    let _draft: Schema_GridEvent;
+    dispatch(draftSlice.actions.startDnd());
+
     if (isExisting) {
-      _draft = {
-        ...existingEvent,
-        isOpen: false,
-      };
+      state.setDraft(existingEvent);
     } else {
       console.log("REMINDER: update for monthly");
-      const defaultSomeday = assembleDefaultEvent(
+      const defaultSomeday = await assembleDefaultEvent(
         Categories_Event.SOMEDAY_WEEK,
       );
-      _draft = { ...defaultSomeday, isOpen: false };
+      state.setDraft(defaultSomeday);
     }
 
-    state.setDraft(_draft);
     state.setIsDrafting(true);
   };
 

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx

@@ -65,7 +65,7 @@ export const SomedayEvents: FC<Props> = ({
 
   return (
     <DragDropContext onDragEnd={util.onDragEnd} onDragStart={util.onDragStart}>
-      {state.shouldPreviewOnGrid && (
+      {state.shouldPreviewOnGrid && state.draft && (
         <GridEventPreview
           dateCalcs={dateCalcs}
           dayIndex={dayIndex}