feat(web): WIP Synthetically drag someday event to other list when reaching end/beginning of list

This commit is a WIP. Its in a flaky state and has a number of issues that needs fixing

Author: that-one-arab

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

@@ -555,6 +555,7 @@ export const useSidebarActions = (
     onPlaceholderClick,
     onSubmit,
     reset,
+    onReorder: reorder,
     resetLocalDraftStateIfNeeded,
     setDraft,
   };

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { Schema_Event } from "@core/types/event.types";
+import { Categories_Event, Schema_Event } from "@core/types/event.types";
 import { COLUMN_MONTH, COLUMN_WEEK } from "@web/common/constants/web.constants";
+import { Schema_SomedayEvent } from "@web/common/types/web.event.types";
 import { selectIsDNDing } from "@web/ducks/events/selectors/draft.selectors";
 import { selectCategorizedEvents } from "@web/ducks/events/selectors/someday.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
@@ -37,6 +38,16 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
 
   const shouldPreviewOnGrid = isDNDing && isOverGrid;
 
+  const getEventsByCategory = (
+    category: Categories_Event,
+  ): Schema_SomedayEvent[] => {
+    return somedayEvents.columns[
+      category === Categories_Event.SOMEDAY_WEEK ? COLUMN_WEEK : COLUMN_MONTH
+    ].eventIds.map((id) =>
+      Object.values(categorizedEvents.events).find((event) => event._id === id),
+    ) as Schema_SomedayEvent[];
+  };
+
   const state = {
     draft,
     somedayIds,
@@ -53,6 +64,7 @@ export const useSidebarState = (measurements: Measurements_Grid) => {
     mouseCoords,
     shouldPreviewOnGrid,
     somedayEvents,
+    getEventsByCategory,
   };
   const setters = {
     setDraft,

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

@@ -50,6 +50,7 @@ export const DraggableSomedayEvent: FC<Props> = ({
                 snapshot={snapshot}
                 setEvent={setters.setDraft}
                 weekViewRange={{ startDate: start, endDate: end }}
+                index={index}
               />
             </>
           );

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

@@ -1,11 +1,20 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
-import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import {
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DropResult,
+} from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
+import { COLUMN_MONTH, COLUMN_WEEK } from "@web/common/constants/web.constants";
 import { useDraftForm } from "@web/views/Calendar/components/Draft/hooks/state/useDraftForm";
 import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 import { Setters_Sidebar } from "@web/views/Calendar/components/Draft/sidebar/hooks/useSidebarState";
+import {
+  canSendToOtherSection,
+  useKeyboardDrag,
+} from "@web/views/Calendar/hooks/keyboard/useKeyboardDrag";
 import { SIDEBAR_OPEN_WIDTH } from "@web/views/Calendar/layout.constants";
 import { SomedayEventForm } from "@web/views/Forms/SomedayEventForm/SomedayEventForm";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
@@ -25,6 +34,8 @@ export interface Props {
     startDate: string;
     endDate: string;
   };
+  index: number;
+  totalEvents: number;
 }
 
 export const SomedayEventContainer = ({
@@ -38,8 +49,12 @@ export const SomedayEventContainer = ({
   snapshot,
   setEvent,
   weekViewRange,
+  index,
 }: Props) => {
-  const { actions, setters, state } = useSidebarContext();
+  // Using non-null assertion since `useSidebarContext` throws if context is missing.
+
+  const { actions, setters, state } = useSidebarContext()!;
+  const events = state.getEventsByCategory(category);
 
   const formProps = useDraftForm(
     category,
@@ -50,10 +65,101 @@ export const SomedayEventContainer = ({
   );
 
   const [isFocused, setIsFocused] = useState(false);
+  const [hasCrossColumnReorder, setHasCrossColumnReorder] = useState(null);
 
   const isDraftingThisEvent =
     state.isDrafting && state.draft?._id === event._id;
 
+  useEffect(() => {
+    if (hasCrossColumnReorder) {
+      setTimeout(() => {
+        // Perform synthetic space bar press
+        // select data-event-id
+        const el = document.querySelector(
+          `[data-event-id="${hasCrossColumnReorder}"]`,
+        );
+        if (el) {
+          const spaceEvent = new KeyboardEvent("keydown", {
+            key: " ",
+            code: "Space",
+            keyCode: 32,
+            charCode: 32,
+            bubbles: true,
+          });
+          el.dispatchEvent(spaceEvent);
+        }
+      }, 100);
+
+      setHasCrossColumnReorder(null);
+    }
+  }, [hasCrossColumnReorder]);
+
+  const handleKeyDown = useKeyboardDrag({
+    event,
+    category,
+    index,
+    isDragging: isDragging || isDrafting,
+    onExitDrag: (index) => {
+      const _canSendToOtherSection = canSendToOtherSection(
+        events.length,
+        category,
+        index,
+      );
+      if (!_canSendToOtherSection) {
+        return;
+      }
+
+      // Programmatically dispatch a "space" keydown event on the currently
+      // focused element. In `@hello-pangea/dnd`, pressing the space key while
+      // in keyboard-dragging mode finalises (drops) the draggable, therefore
+      // this emulates the user pressing space to exit drag mode when they
+      // reach either end of the list.
+
+      const activeEl = document.activeElement as HTMLElement;
+      const keyboardEvent = new KeyboardEvent("keydown", {
+        key: " ",
+        code: "Space",
+        keyCode: 32,
+        charCode: 32,
+        bubbles: true,
+      });
+      activeEl.dispatchEvent(keyboardEvent);
+
+      // After "dropping" the item via space-bar event, perform a synthetic
+      // cross-column drag so the item is moved from week → month or vice-versa.
+      const sourceDroppableId =
+        category === Categories_Event.SOMEDAY_WEEK ? COLUMN_WEEK : COLUMN_MONTH;
+
+      const destinationDroppableId =
+        category === Categories_Event.SOMEDAY_WEEK ? COLUMN_MONTH : COLUMN_WEEK;
+
+      const syntheticResult: DropResult = {
+        draggableId: event._id!,
+        source: {
+          droppableId: sourceDroppableId,
+          index,
+        },
+        destination: {
+          droppableId: destinationDroppableId,
+          index: 0, // place at top of destination list
+        },
+        // The fields below are not used by the `reorder` helper but are
+        // required by the `DropResult` type. We can safely set sensible
+        // defaults.
+        combine: null,
+        mode: "FLUID",
+        reason: "DROP",
+        type: "DEFAULT",
+      } as DropResult;
+
+      // Trigger sidebar state update + backend sync
+      actions.onReorder(syntheticResult);
+
+      // Set flag to trigger useEffect for synthetic space bar press
+      setHasCrossColumnReorder(event._id);
+    },
+  });
+
   return (
     <>
       <SomedayEvent
@@ -68,7 +174,9 @@ export const SomedayEventContainer = ({
           actions.onDraft(event, category);
         }}
         onFocus={() => setIsFocused(true)}
-        onKeyDown={() => console.log("onKeyDown")}
+        onKeyDown={(e) => {
+          if (isDragging) handleKeyDown(e);
+        }}
         priority={event.priority || Priorities.UNASSIGNED}
         provided={provided}
         snapshot={snapshot}

packages/web/src/views/Calendar/hooks/keyboard/useKeyboardDrag.ts

@@ -0,0 +1,97 @@
+import { useRef } from "react";
+import { Categories_Event, Schema_Event } from "@core/types/event.types";
+import { COLUMN_MONTH, COLUMN_WEEK } from "@web/common/constants/web.constants";
+import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
+
+interface UseKeyboardDragProps {
+  event: Schema_Event;
+  category: Categories_Event;
+  index: number;
+  isDragging: boolean;
+  onExitDrag: (index: number) => void;
+}
+
+export function canSendToOtherSection(
+  numberOfEvents: number,
+  category: Categories_Event,
+  index: number,
+) {
+  if (category === Categories_Event.SOMEDAY_MONTH) {
+    return numberOfEvents > index + 1;
+  } else {
+    // Someday week
+    return index !== 0;
+  }
+}
+
+export const useKeyboardDrag = ({
+  event,
+  category,
+  index,
+  isDragging,
+  onExitDrag,
+}: UseKeyboardDragProps) => {
+  const sidebarContext = useSidebarContext();
+
+  // TS Guard
+  if (!sidebarContext)
+    throw new Error(
+      "useSidebarContext must be used within SidebarDraftProvider",
+    );
+
+  const { state } = sidebarContext;
+  const column =
+    state.somedayEvents.columns[
+      category === Categories_Event.SOMEDAY_WEEK ? COLUMN_WEEK : COLUMN_MONTH
+    ];
+  const totalEvents = column.eventIds.length;
+
+  // Keep track of current index in a ref to persist between renders
+  const currentIndexRef = useRef<number>(index);
+  const isDraggingRef = useRef<boolean>(isDragging);
+
+  const updateIndex = (newIndex: number) => {
+    currentIndexRef.current = newIndex;
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    // Update the ref with the latest index prop on each keyboard event
+    if (isDraggingRef.current !== isDragging) {
+      isDraggingRef.current = isDragging;
+      currentIndexRef.current = index;
+    }
+
+    // Track index changes based on arrow keys
+    if (e.key === "ArrowUp") {
+      // If we are at the beginning of the list
+      if (currentIndexRef.current === 0) {
+        console.log(
+          "Reached beginning of list:",
+          event.title,
+          "current index:",
+          currentIndexRef.current,
+        );
+        return onExitDrag(currentIndexRef.current);
+      }
+
+      const newIndex = Math.max(0, currentIndexRef.current - 1);
+      updateIndex(newIndex);
+    } else if (e.key === "ArrowDown") {
+      // If we are at the end of the list
+      if (currentIndexRef.current === totalEvents - 1) {
+        console.log(
+          "Reached end of list:",
+          event.title,
+          "current index:",
+          currentIndexRef.current,
+        );
+
+        return onExitDrag(currentIndexRef.current);
+      }
+      const newIndex = Math.min(totalEvents - 1, currentIndexRef.current + 1);
+      updateIndex(newIndex);
+    }
+  };
+
+  return handleKeyDown;
+};