feat: Enable drag-and-drop tasks to agenda to create timed and all-day events

packages/web/src/common/hooks/useEventDNDActions.ts

@@ -1,7 +1,8 @@
 import { useCallback } from "react";
 import { Active, DragEndEvent, Over, useDndMonitor } from "@dnd-kit/core";
 import { Categories_Event } from "@core/types/event.types";
-import dayjs from "@core/util/date/dayjs";
+import dayjs, { Dayjs } from "@core/util/date/dayjs";
+import { getUserId } from "@web/auth/auth.util";
 import {
   ID_GRID_ALLDAY_ROW,
   ID_GRID_MAIN,
@@ -12,12 +13,16 @@ import {
   setFloatingReferenceAtCursor,
 } from "@web/common/hooks/useOpenAtCursor";
 import { useUpdateEvent } from "@web/common/hooks/useUpdateEvent";
+import { Task } from "@web/common/types/task.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { reorderGrid } from "@web/common/utils/dom/grid-organization.util";
 import { getCalendarEventElementFromGrid } from "@web/common/utils/event/event.util";
 import { selectEventById } from "@web/ducks/events/selectors/event.selectors";
+import { createEventSlice } from "@web/ducks/events/slices/event.slice";
 import { store } from "@web/store";
+import { useAppDispatch } from "@web/store/store.hooks";
 import { getSnappedMinutes } from "@web/views/Day/util/agenda/agenda.util";
+import { convertTaskToEvent } from "@web/views/Day/util/task/convertTaskToEvent";
 
 const shouldSaveImmediately = (_id: string) => {
   const storeEvent = selectEventById(store.getState(), _id);
@@ -34,8 +39,38 @@ const setReference = (_id: string) => {
   });
 };
 
-export function useEventDNDActions() {
+export function useEventDNDActions(dateInView?: Dayjs) {
   const updateEvent = useUpdateEvent();
+  const dispatch = useAppDispatch();
+
+  const convertTaskToEventOnAgenda = useCallback(
+    async (task: Task, active: Active, over: Over, deleteTask: () => void) => {
+      const snappedMinutes = getSnappedMinutes(active, over);
+
+      if (snappedMinutes === null) return;
+
+      const userId = await getUserId();
+      if (!userId) return;
+
+      const currentDate = dateInView || dayjs();
+      const startTime = currentDate
+        .startOf("day")
+        .add(snappedMinutes, "minute");
+
+      // Convert task to event
+      const event = convertTaskToEvent(task, startTime, 15, userId);
+
+      // Delete the task
+      deleteTask();
+
+      // Create the event optimistically
+      dispatch(createEventSlice.actions.request(event));
+
+      reorderGrid();
+      setReference(event._id!);
+    },
+    [dispatch, dateInView],
+  );
 
   const moveTimedAroundMainGridDayView = useCallback(
     (event: Schema_GridEvent, active: Active, over: Over) => {
@@ -126,25 +161,37 @@ export function useEventDNDActions() {
     (e: DragEndEvent) => {
       const { active, over } = e;
       const { data } = active;
-      const { view, type, event } = data.current ?? {};
+      const { view, type, event, task, deleteTask } = data.current ?? {};
 
-      if (!over?.id || !event) return;
+      if (!over?.id) return;
 
       const switchCase = `${view}-${type}-to-${over.id}`;
 
       switch (switchCase) {
+        case `day-task-to-${ID_GRID_MAIN}`:
+          if (task && deleteTask) {
+            convertTaskToEventOnAgenda(task, active, over, deleteTask);
+          }
+          break;
         case `day-${Categories_Event.ALLDAY}-to-${ID_GRID_MAIN}`:
-          moveAllDayToMainGridDayView(event, active, over);
+          if (event) {
+            moveAllDayToMainGridDayView(event, active, over);
+          }
           break;
         case `day-${Categories_Event.TIMED}-to-${ID_GRID_MAIN}`:
-          moveTimedAroundMainGridDayView(event, active, over);
+          if (event) {
+            moveTimedAroundMainGridDayView(event, active, over);
+          }
           break;
         case `day-${Categories_Event.TIMED}-to-${ID_GRID_ALLDAY_ROW}`:
-          moveTimedToAllDayGridDayView(event);
+          if (event) {
+            moveTimedToAllDayGridDayView(event);
+          }
           break;
       }
     },
     [
+      convertTaskToEventOnAgenda,
       moveAllDayToMainGridDayView,
       moveTimedAroundMainGridDayView,
       moveTimedToAllDayGridDayView,

packages/web/src/components/DND/Draggable.tsx

@@ -18,12 +18,25 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { useMergeRefs } from "@floating-ui/react";
 import { Categories_Event } from "@core/types/event.types";
+import { Task } from "@web/common/types/task.types";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 
+export type DraggableDataType = Categories_Event | "task";
+
+/**
+ * Data structure for draggable items in the application
+ * @property type - The type of item being dragged (event category or "task")
+ * @property event - The event data (required when type is a Categories_Event)
+ * @property task - The task data (required when type is "task")
+ * @property view - The view where the drag originated ("day" | "week" | "now")
+ * @property deleteTask - Optional function to delete a task (used when converting task to event)
+ */
 export interface DraggableDNDData {
-  type: Categories_Event;
-  event: Schema_GridEvent | null;
+  type: DraggableDataType;
+  event?: Schema_GridEvent | null;
+  task?: Task | null;
   view: "day" | "week" | "now";
+  deleteTask?: () => void;
 }
 
 export interface DNDChildProps

packages/web/src/views/Day/components/Task/DraggableTask.test.tsx

@@ -1,5 +1,4 @@
 import React, { act } from "react";
-import { DragDropContext, Droppable } from "@hello-pangea/dnd";
 import { fireEvent, screen } from "@testing-library/react";
 import { render } from "@web/__tests__/__mocks__/mock.render";
 import { Task } from "@web/common/types/task.types";
@@ -52,22 +51,7 @@ const renderDraggableTask = (
   tasksProps = defaultTasksProps,
 ) => {
   return act(() =>
-    render(
-      <DragDropContext onDragEnd={jest.fn()}>
-        <Droppable droppableId="test-droppable">
-          {(provided) => (
-            <div ref={provided.innerRef} {...provided.droppableProps}>
-              <DraggableTask
-                task={task}
-                index={index}
-                tasksProps={tasksProps}
-              />
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>,
-    ),
+    render(<DraggableTask task={task} index={index} tasksProps={tasksProps} />),
   );
 };
 
@@ -135,24 +119,4 @@ describe("DraggableTask", () => {
     // Visible on focus
     expect(dragHandle).toHaveClass("focus:opacity-100");
   });
-
-  test("drag handle should be visible when dragging the handler button", () => {
-    const draggingTask = { ...mockTask, id: "task-dragging" };
-
-    renderDraggableTask(draggingTask);
-
-    const dragHandle = screen.getByRole("button", {
-      name: /Reorder Test Task/i,
-    });
-
-    expect(dragHandle).toHaveClass("opacity-0");
-
-    act(() => {
-      fireEvent.mouseOver(dragHandle);
-      fireEvent.mouseDown(dragHandle, { bubbles: true });
-      fireEvent.mouseMove(dragHandle, { clientY: 100 });
-    });
-
-    expect(dragHandle).toHaveClass("opacity-100");
-  });
 });

packages/web/src/views/Day/components/Task/DraggableTask.tsx

@@ -1,9 +1,10 @@
 import classNames from "classnames";
+import { useDraggable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
 import { autoUpdate, inline, offset, useFloating } from "@floating-ui/react";
-import { Draggable } from "@hello-pangea/dnd";
 import { DotsSixVerticalIcon } from "@phosphor-icons/react";
 import { Task as ITask } from "@web/common/types/task.types";
-import { getStyle } from "@web/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvent/styled";
+import { Draggable } from "@web/components/DND/Draggable";
 import { Task } from "@web/views/Day/components/Task/Task";
 import { useTasks } from "@web/views/Day/hooks/tasks/useTasks";
 
@@ -38,79 +39,71 @@ export function DraggableTask({
     onTitleChange,
     onStatusToggle,
     migrateTask,
+    deleteTask,
   } = tasksProps;
 
   return (
     <Draggable
-      draggableId={task.id}
-      index={index}
-      isDragDisabled={tasks.length === 1}
-      disableInteractiveElementBlocking
+      dndProps={{
+        id: task.id,
+        data: {
+          type: "task",
+          task,
+          view: "day",
+          deleteTask: () => deleteTask(task.id),
+        },
+        disabled: tasks.length === 1,
+      }}
+      as="div"
+      id={task.id}
+      className={`group relative mr-2 select-none`}
+      ref={(e) => {
+        refs.setReference(e);
+        update();
+      }}
     >
-      {(draggableProvider, draggableSnapshot) => (
-        <div
-          {...draggableProvider.draggableProps}
-          id={task.id}
-          className={`group relative mr-2 select-none`}
-          style={getStyle(
-            draggableSnapshot,
-            false,
-            draggableProvider.draggableProps.style,
+      {tasks.length > 1 ? (
+        <button
+          ref={refs.setFloating}
+          style={floatingStyles}
+          aria-label={`Reorder ${task.title}`}
+          aria-describedby={`description-${task.id}`}
+          onFocus={() => setSelectedTaskIndex(index)}
+          className={classNames(
+            "opacity-0",
+            "hover:bg-border-primary hover:cursor-grab",
+            "rounded-xs py-2 transition-colors",
+            "group-hover:opacity-100 hover:opacity-100 focus:opacity-100",
+            "max-w-48 text-white",
+            "focus:bg-white/20 focus:ring-2 focus:ring-white/50",
+            "focus:outline-none disabled:cursor-default disabled:opacity-0",
+            {
+              hidden: tasks.length === 1,
+            },
           )}
-          ref={(e) => {
-            draggableProvider.innerRef(e);
-            refs.setReference(e);
-            update();
-          }}
         >
-          {tasks.length > 1 ? (
-            <button
-              {...draggableProvider.dragHandleProps}
-              ref={refs.setFloating}
-              style={floatingStyles}
-              aria-label={`Reorder ${task.title}`}
-              aria-describedby={`description-${task.id}`}
-              onFocus={() => setSelectedTaskIndex(index)}
-              className={classNames(
-                "opacity-0",
-                "hover:bg-border-primary hover:cursor-grab",
-                "rounded-xs py-2 transition-colors",
-                "group-hover:opacity-100 hover:opacity-100 focus:opacity-100",
-                "max-w-48 text-white",
-                "focus:bg-white/20 focus:ring-2 focus:ring-white/50",
-                "focus:outline-none disabled:cursor-default disabled:opacity-0",
-                {
-                  hidden: tasks.length === 1,
-                  "opacity-100":
-                    draggableSnapshot.isDragging ||
-                    draggableSnapshot.isDropAnimating,
-                },
-              )}
-            >
-              <DotsSixVerticalIcon size={24} />
-            </button>
-          ) : null}
+          <DotsSixVerticalIcon size={24} />
+        </button>
+      ) : null}
 
-          <Task
-            task={task}
-            index={index}
-            isEditing={editingTaskId === task.id}
-            onFocus={setSelectedTaskIndex}
-            onCheckboxKeyDown={onCheckboxKeyDown}
-            onInputBlur={onInputBlur}
-            onInputKeyDown={onInputKeyDown}
-            onInputClick={onInputClick}
-            onTitleChange={onTitleChange}
-            onStatusToggle={onStatusToggle}
-            onMigrate={migrateTask}
-            title={editingTaskId === task.id ? editingTitle : task.title}
-          />
+      <Task
+        task={task}
+        index={index}
+        isEditing={editingTaskId === task.id}
+        onFocus={setSelectedTaskIndex}
+        onCheckboxKeyDown={onCheckboxKeyDown}
+        onInputBlur={onInputBlur}
+        onInputKeyDown={onInputKeyDown}
+        onInputClick={onInputClick}
+        onTitleChange={onTitleChange}
+        onStatusToggle={onStatusToggle}
+        onMigrate={migrateTask}
+        title={editingTaskId === task.id ? editingTitle : task.title}
+      />
 
-          <div id={`description-${task.id}`} className="hidden">
-            Press space to start dragging this task.
-          </div>
-        </div>
-      )}
+      <div id={`description-${task.id}`} className="hidden">
+        Press space to start dragging this task.
+      </div>
     </Draggable>
   );
 }

packages/web/src/views/Day/components/TaskList/TaskList.tsx

@@ -5,7 +5,6 @@ import { TaskContextMenuWrapper } from "@web/views/Day/components/ContextMenu/Ta
 import { TaskListHeader } from "@web/views/Day/components/TaskList/TaskListHeader";
 import { Tasks } from "@web/views/Day/components/Tasks/Tasks";
 import { useTaskListInputFocus } from "@web/views/Day/components/Tasks/useTaskListInputFocus";
-import { DNDTasksProvider } from "@web/views/Day/context/DNDTasksContext";
 import { useTasks } from "@web/views/Day/hooks/tasks/useTasks";
 
 export function TaskList() {
@@ -64,9 +63,7 @@ export function TaskList() {
         className="flex flex-1 flex-col gap-2 overflow-hidden p-4"
       >
         <TaskContextMenuWrapper>
-          <DNDTasksProvider>
-            <Tasks />
-          </DNDTasksProvider>
+          <Tasks />
         </TaskContextMenuWrapper>
 
         <div className="mr-4 ml-2">