✨ Feat: move someday event to from week or month section using keyboard shortcuts (#533)

* chore(web): extract start-end date update logic into dedicated functions

* feat(web): move someday event from/to week or month section using keyboard shortcuts

Author: that-one-arab

packages/web/src/common/utils/web.date.util.ts

@@ -7,7 +7,11 @@ import {
   YMDHAM_FORMAT,
   YMDHM_FORMAT,
 } from "@core/constants/date.constants";
-import { Categories_Event, Direction_Migrate } from "@core/types/event.types";
+import {
+  Categories_Event,
+  Direction_Migrate,
+  Schema_Event,
+} from "@core/types/event.types";
 import { Option_Time } from "@web/common/types/util.types";
 import { GRID_TIME_STEP } from "@web/views/Calendar/layout.constants";
 import { roundToNext } from ".";
@@ -345,3 +349,29 @@ const _getWeeklyMigrationDates = (
 
   return { startDate, endDate };
 };
+
+export const setEventStartEndDatesToCurrentWeek = (
+  event: Schema_Event,
+): Schema_Event => {
+  const weekStart = dayjs(new Date()).startOf("week");
+  const weekEnd = dayjs(new Date()).endOf("week");
+
+  return {
+    ...event,
+    startDate: weekStart.format(),
+    endDate: weekEnd.format(),
+  };
+};
+
+export const setEventStartEndDatesToCurrentMonth = (
+  event: Schema_Event,
+): Schema_Event => {
+  const monthStart = dayjs(new Date()).startOf("month");
+  const monthEnd = dayjs(new Date()).endOf("month");
+
+  return {
+    ...event,
+    startDate: monthStart.format(),
+    endDate: monthEnd.format(),
+  };
+};

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

@@ -26,6 +26,8 @@ import { getX } from "@web/common/utils/grid.util";
 import {
   getDatesByCategory,
   getMigrationDates,
+  setEventStartEndDatesToCurrentMonth,
+  setEventStartEndDatesToCurrentWeek,
 } from "@web/common/utils/web.date.util";
 import {
   selectDraft,
@@ -359,28 +361,37 @@ export const useSidebarActions = (
     createDefaultSomeday();
   };
 
-  const onSubmit = async (category: Categories_Event) => {
-    if (!state.draft) return;
+  const onSubmit = async (
+    category: Categories_Event,
+    event: Schema_Event | null = state.draft,
+  ) => {
+    if (!event) return;
 
-    const { startDate, endDate } = getDatesByCategory(
-      category,
-      viewStart,
-      viewEnd,
-    );
-    const _event = { ...state.draft, startDate, endDate };
+    let _event = { ...event };
+
+    if (!_event.startDate || !_event.endDate) {
+      // This probably means we are creating a new event, hence why we don't have start/end dates
+      const { startDate, endDate } = getDatesByCategory(
+        category,
+        viewStart,
+        viewEnd,
+      );
+      _event.startDate = startDate;
+      _event.endDate = endDate;
+    }
 
     const userId = await getUserId();
-    const event = prepEvtBeforeSubmit(_event, userId);
+    _event = prepEvtBeforeSubmit(_event, userId);
 
-    const isExisting = event._id;
+    const isExisting = _event._id;
     if (isExisting) {
-      const isRecurring = event.recurrence?.rule;
-      const wasRecurring = event.recurrence?.rule === null;
+      const isRecurring = _event.recurrence?.rule;
+      const wasRecurring = _event.recurrence?.rule === null;
 
       dispatch(
         editEventSlice.actions.request({
-          _id: event._id,
-          event,
+          _id: _event._id,
+          event: _event,
           applyTo: isRecurring || wasRecurring ? "all" : null,
         }),
       );
@@ -391,7 +402,7 @@ export const useSidebarActions = (
           : state.somedayMonthIds.length;
 
       const eventWithOrder = {
-        ...event,
+        ..._event,
         order,
       };
       dispatch(createEventSlice.actions.request(eventWithOrder));
@@ -438,38 +449,24 @@ export const useSidebarActions = (
     };
     setSomedayEvents(newState);
 
-    const draggedEvent = state.somedayEvents.events[draggableId];
+    let draggedEvent = state.somedayEvents.events[draggableId];
 
     const draggedToMonthColumn = destColumn.id === COLUMN_MONTH;
 
-    let newStartDate;
-    let newEndDate;
-
     if (draggedToMonthColumn) {
-      // set month start-end to current month
-      const monthStart = dayjs(new Date()).startOf("month");
-      const monthEnd = dayjs(new Date()).endOf("month");
-      newStartDate = monthStart.format();
-      newEndDate = monthEnd.format();
+      draggedEvent = setEventStartEndDatesToCurrentMonth(draggedEvent);
     } else {
-      // set week start-end to current week
-      const weekStart = dayjs(new Date()).startOf("week");
-      const weekEnd = dayjs(new Date()).endOf("week");
-      newStartDate = weekStart.format();
-      newEndDate = weekEnd.format();
+      draggedEvent = setEventStartEndDatesToCurrentWeek(draggedEvent);
     }
 
     const newOrder = destEventIds.indexOf(draggableId);
 
+    draggedEvent.order = newOrder;
+
     dispatch(
       editEventSlice.actions.request({
         _id: draggedEvent._id,
-        event: {
-          ...draggedEvent,
-          startDate: newStartDate,
-          endDate: newEndDate,
-          order: newOrder,
-        },
+        event: draggedEvent,
       }),
     );
   };

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

@@ -42,7 +42,7 @@ export const DraggableSomedayEvent: FC<Props> = ({
                 isDrafting={isDraftingThisEvent}
                 isOverGrid={isOverGrid}
                 onMigrate={actions.onMigrate}
-                onSubmit={() => actions.onSubmit(category)}
+                onSubmit={(event) => actions.onSubmit(category, event)}
                 provided={provided}
                 snapshot={snapshot}
                 setEvent={setters.setDraft}

packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx

@@ -6,6 +6,10 @@ import "react-toastify/dist/ReactToastify.css";
 import { Key } from "ts-key-enum";
 import { ID_SOMEDAY_EVENT_FORM } from "@web/common/constants/web.constants";
 import { colorByPriority } from "@web/common/styles/theme.util";
+import {
+  setEventStartEndDatesToCurrentMonth,
+  setEventStartEndDatesToCurrentWeek,
+} from "@web/common/utils/web.date.util";
 import { getSomedayEventsSlice } from "@web/ducks/events/slices/someday.slice";
 import { useAppDispatch } from "@web/store/store.hooks";
 import { useDraftContext } from "@web/views/Calendar/components/Draft/context/useDraftContext";
@@ -125,6 +129,28 @@ export const SomedayEventForm: React.FC<FormProps> = ({
     [_onSubmit],
   );
 
+  useHotkeys(
+    "ctrl+meta+up",
+    (e) => {
+      e.preventDefault();
+      const updatedEvent = setEventStartEndDatesToCurrentWeek(event);
+      onSubmit(updatedEvent);
+    },
+    hotkeysOptions,
+    [event],
+  );
+
+  useHotkeys(
+    "ctrl+meta+down",
+    async (e) => {
+      e.preventDefault();
+      const updatedEvent = setEventStartEndDatesToCurrentMonth(event);
+      onSubmit(updatedEvent);
+    },
+    hotkeysOptions,
+    [event],
+  );
+
   const onSetEventField: SetEventFormField = (field) => {
     const newEvent = { ...event, ...field };