✨ Feat(web): Add migrate forward/backward functionality if a someday event is focused (#601)

* feat(web): Add migrate forward/backward functionality if a someday event is focused

* chore(web): Add TODO for date validation in SomedayEventContainer tests

Author: that-one-arab

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

@@ -84,4 +84,130 @@ describe("SomedayEventContainer keyboard interactions", () => {
       Categories_Event.SOMEDAY_WEEK,
     );
   });
+
+  it("migrates event to Someday Week when Meta+Ctrl+ArrowUp is pressed", async () => {
+    const onSubmit = jest.fn();
+    const contextValue = {
+      state: {
+        draft: null,
+        isDrafting: false,
+        isOverGrid: false,
+        isSomedayFormOpen: false,
+      } as any,
+      setters: {
+        setIsSomedayFormOpen: jest.fn(),
+      } as any,
+      actions: {
+        onDraft: jest.fn(),
+        onMigrate: jest.fn(),
+        discard: jest.fn(),
+        reset: jest.fn(),
+        closeForm: jest.fn(),
+        close: jest.fn(),
+        onSubmit,
+      } as any,
+    };
+
+    const weekViewRange = { startDate: "2020-01-05", endDate: "2020-01-11" };
+
+    render(
+      <SidebarDraftContext.Provider value={contextValue as any}>
+        <SomedayEventContainer
+          category={Categories_Event.SOMEDAY_MONTH}
+          event={LEARN_CHINESE}
+          isDrafting={false}
+          isDragging={false}
+          isOverGrid={false}
+          onSubmit={onSubmit}
+          provided={
+            {
+              draggableProps: {
+                "data-rfd-draggable-context-id": "mock-context",
+                "data-rfd-draggable-id": "mock-id",
+                style: {},
+              },
+              dragHandleProps: null,
+              innerRef: jest.fn(),
+            } as DraggableProvided
+          }
+          snapshot={{ isDragging: false } as DraggableStateSnapshot}
+          setEvent={jest.fn()}
+          weekViewRange={weekViewRange}
+        />
+      </SidebarDraftContext.Provider>,
+    );
+
+    const btn = document.querySelector(
+      `[data-event-id="${LEARN_CHINESE._id}"]`,
+    )! as HTMLElement;
+    btn.focus();
+    fireEvent.keyDown(btn, { key: "ArrowUp", metaKey: true, ctrlKey: true });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+
+    // TODO: Do a date validation
+  });
+
+  it("migrates event to Someday Month when Meta+Ctrl+ArrowDown is pressed", async () => {
+    const onSubmit = jest.fn();
+    const contextValue = {
+      state: {
+        draft: null,
+        isDrafting: false,
+        isOverGrid: false,
+        isSomedayFormOpen: false,
+      } as any,
+      setters: {
+        setIsSomedayFormOpen: jest.fn(),
+      } as any,
+      actions: {
+        onDraft: jest.fn(),
+        onMigrate: jest.fn(),
+        discard: jest.fn(),
+        reset: jest.fn(),
+        closeForm: jest.fn(),
+        close: jest.fn(),
+        onSubmit,
+      } as any,
+    };
+
+    const weekViewRange = { startDate: "2020-01-01", endDate: "2020-01-07" };
+
+    render(
+      <SidebarDraftContext.Provider value={contextValue as any}>
+        <SomedayEventContainer
+          category={Categories_Event.SOMEDAY_WEEK}
+          event={LEARN_CHINESE}
+          isDrafting={false}
+          isDragging={false}
+          isOverGrid={false}
+          onSubmit={onSubmit}
+          provided={
+            {
+              draggableProps: {
+                "data-rfd-draggable-context-id": "mock-context",
+                "data-rfd-draggable-id": "mock-id",
+                style: {},
+              },
+              dragHandleProps: null,
+              innerRef: jest.fn(),
+            } as DraggableProvided
+          }
+          snapshot={{ isDragging: false } as DraggableStateSnapshot}
+          setEvent={jest.fn()}
+          weekViewRange={weekViewRange}
+        />
+      </SidebarDraftContext.Provider>,
+    );
+
+    const btn = document.querySelector(
+      `[data-event-id="${LEARN_CHINESE._id}"]`,
+    )! as HTMLElement;
+    btn.focus();
+    fireEvent.keyDown(btn, { key: "ArrowDown", metaKey: true, ctrlKey: true });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+
+    // TODO: Do a date validation
+  });
 });

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

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
+import { toast } from "react-toastify";
 import { Key } from "ts-key-enum";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
+import { computeCurrentEventDateRange } from "@web/common/utils/web.date.util";
 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";
@@ -53,10 +55,44 @@ export const SomedayEventContainer = ({
   const [isFocused, setIsFocused] = useState(false);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    // ENTER opens the edit form
     if (e.key === Key.Enter) {
       e.preventDefault();
       e.stopPropagation();
       actions.onDraft(event, category);
+      return;
+    }
+
+    // META + CTRL + UP/DOWN should migrate the event between Someday lists
+    const isMetaCtrl = e.metaKey && e.ctrlKey;
+    const isArrowUp = e.key === "ArrowUp";
+    const isArrowDown = e.key === "ArrowDown";
+
+    if (isMetaCtrl && (isArrowUp || isArrowDown)) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Prevent migrating recurring events
+      const canMigrate =
+        !event.recurrence?.rule || event.recurrence?.rule.length === 0;
+
+      if (!canMigrate) {
+        toast.error("Can't migrate recurring events");
+        return;
+      }
+
+      const duration = isArrowUp ? "week" : "month";
+      const targetCategory = isArrowUp
+        ? Categories_Event.SOMEDAY_WEEK
+        : Categories_Event.SOMEDAY_MONTH;
+
+      const updatedEvent = computeCurrentEventDateRange(
+        { duration },
+        event,
+        weekViewRange,
+      );
+
+      actions.onSubmit(targetCategory, updatedEvent);
     }
   };