✨ Feat: Create sidebar drafts upon 'W' and 'M' shortcuts

Author: tyler-dane

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

@@ -3,6 +3,9 @@ import { RootState } from "@web/store";
 
 export const selectDraft = (state: RootState) => state.events.draft.event;
 
+export const selectDraftActivity = (state: RootState) =>
+  state.events.draft.status?.activity;
+
 export const selectDraftCategory = (state: RootState) =>
   state.events.draft.status?.eventType;
 

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

@@ -28,6 +28,7 @@ import {
 } from "@web/common/utils/web.date.util";
 import {
   selectDraft,
+  selectDraftActivity,
   selectDraftCategory,
   selectIsDrafting,
 } from "@web/ducks/events/selectors/draft.selectors";
@@ -59,6 +60,7 @@ export const useSidebarActions = (
   const { start, end } = useAppSelector(selectDatesInView);
   const reduxDraft = useAppSelector(selectDraft);
   const draftType = useAppSelector(selectDraftCategory);
+  const activity = useAppSelector(selectDraftActivity);
 
   const viewStart = dayjs(start);
   const viewEnd = dayjs(end);
@@ -92,6 +94,10 @@ export const useSidebarActions = (
     setIsSomedayFormOpen(false);
   };
 
+  const openForm = useCallback(() => {
+    setIsSomedayFormOpen(true);
+  }, [setIsSomedayFormOpen]);
+
   // call this when enabling DND for drafts
   const convertSomedayDraftToTimed = (
     dropItem: DropResult_ReactDND,
@@ -159,6 +165,12 @@ export const useSidebarActions = (
     );
   };
 
+  const create = useCallback(() => {
+    setDraft(reduxDraft);
+    setIsDrafting(true);
+    openForm();
+  }, [openForm, reduxDraft, setDraft, setIsDrafting]);
+
   const createDefaultSomeday = useCallback(async () => {
     const somedayDefault = await assembleDefaultEvent(
       Categories_Event.SOMEDAY_WEEK,
@@ -203,6 +215,12 @@ export const useSidebarActions = (
     }
   };
 
+  const handleChange = useCallback(() => {
+    if (activity === "createShortcut") {
+      create();
+    }
+  }, [activity, create]);
+
   const onDraft = (event: Schema_Event, category: Categories_Event) => {
     setIsDrafting(true);
     setDraft(event);
@@ -328,6 +346,7 @@ export const useSidebarActions = (
 
     createDefaultSomeday();
   };
+
   const onSubmit = async (category: Categories_Event) => {
     if (!state.draft) return;
 
@@ -424,6 +443,7 @@ export const useSidebarActions = (
     closeForm,
     createDefaultSomeday,
     discard,
+    handleChange,
     onDraft,
     onDragEnd,
     onDragStart,

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

@@ -9,10 +9,15 @@ export const useSidebarEffects = (
   actions: Actions_Sidebar,
 ) => {
   const isDNDing = useAppSelector(selectIsDNDing);
+  const { closeForm, handleChange } = actions;
+
+  useEffect(() => {
+    handleChange();
+  }, [handleChange]);
 
   useEffect(() => {
     if (isDNDing && state.isSomedayFormOpen) {
-      actions.closeForm();
+      closeForm();
     }
-  }, [isDNDing, state.isSomedayFormOpen, actions]);
+  }, [isDNDing, state.isSomedayFormOpen, closeForm]);
 };