♻️ Refactor: Reorganize someday hooks

packages/web/src/common/constants/web.constants.ts

@@ -13,6 +13,7 @@ export const ID_GRID_EVENTS_TIMED = "timedEvents";
 export const ID_GRID_MAIN = "mainGrid";
 export const ID_MAIN = "mainSection";
 export const ID_DATEPICKER_SIDEBAR = "sidebarDatePicker";
+export const ID_SIDEBAR = "sidebar";
 export const ID_SOMEDAY_DRAFT = "somedayDraft";
 export const ID_SOMEDAY_EVENTS = "ID_SOMEDAY_EVENTS";
 export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form";

packages/web/src/common/types/web.event.types.ts

@@ -1,11 +1,6 @@
 import { z } from "zod";
-import {
-  Categories_Event,
-  CoreEventSchema,
-  Schema_Event,
-} from "@core/types/event.types";
+import { CoreEventSchema, Schema_Event } from "@core/types/event.types";
 import { SelectOption } from "@web/common/types/component.types";
-import { Activity_DraftEvent } from "@web/ducks/events/slices/draft.slice.types";
 
 export enum Recurrence_Selection {
   NONE = "none",
@@ -22,7 +17,7 @@ export const GridEventSchema = CoreEventSchema.extend({
 export interface Schema_GridEvent extends Schema_Event {
   hasFlipped?: boolean;
   isOpen?: boolean;
-  row?: number; //TODO: delete if not used
+  row?: number;
   position: {
     isOverlapping: boolean;
     widthMultiplier: number; // EG: 0.5 for half width

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

@@ -4,6 +4,7 @@ import { Categories_Event } from "@core/types/event.types";
 import {
   ID_GRID_EVENTS_ALLDAY,
   ID_GRID_EVENTS_TIMED,
+  ID_SIDEBAR,
 } from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { roundToNext } from "@web/common/utils";
@@ -67,10 +68,11 @@ export const getDraftTimes = (isCurrentWeek: boolean, startOfWeek: Dayjs) => {
   return { startDate, endDate };
 };
 
-export const getDraftContainer = (isAllDay: boolean) => {
-  if (isAllDay) {
-    return getElemById(ID_GRID_EVENTS_ALLDAY);
+export const getDraftContainer = (category: Categories_Event) => {
+  switch (category) {
+    case Categories_Event.ALLDAY:
+      return getElemById(ID_GRID_EVENTS_ALLDAY);
+    case Categories_Event.TIMED:
+      return getElemById(ID_GRID_EVENTS_TIMED);
   }
-
-  return getElemById(ID_GRID_EVENTS_TIMED);
 };

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

@@ -241,7 +241,7 @@ export const prepEvtAfterDraftDrop = (
 };
 
 export const prepEvtBeforeSubmit = (
-  draft: Schema_GridEvent,
+  draft: Schema_Event | Schema_GridEvent,
   userId: string,
 ) => {
   const _event = {

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

@@ -3,18 +3,27 @@ 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;
+
+export const selectDraftId = (state: RootState) =>
+  state.events.draft.event?._id;
+
 export const selectDraftStatus = (state: RootState) =>
   state.events.draft.status;
 
+export const selectIsDNDing = (state: RootState) =>
+  state.events.draft.status?.activity === "dnd";
+
 export const selectIsDrafting = (state: RootState) =>
-  state.events.draft.status.isDrafting;
+  state.events.draft.status?.isDrafting;
 
 export const selectIsDraftingExisting = (state: RootState) =>
   state.events.draft.event?._id !== undefined;
 
 export const selectIsDraftingSomeday = (state: RootState) =>
-  state.events.draft.status.eventType === Categories_Event.SOMEDAY_WEEK ||
-  state.events.draft.status.eventType === Categories_Event.SOMEDAY_MONTH;
-
-export const selectDraftId = (state: RootState) =>
-  state.events.draft.event?._id;
+  state.events.draft.status?.eventType === Categories_Event.SOMEDAY_WEEK ||
+  state.events.draft.status?.eventType === Categories_Event.SOMEDAY_MONTH;

packages/web/src/ducks/events/slices/draft.slice.ts

@@ -34,24 +34,34 @@ export const draftSlice = createSlice({
     },
 
     startResizing: (state, action: Action_Draft_Resize) => {
-      const { event, dateToChange } = action.payload;
+      const { category, event, dateToChange } = action.payload;
       return {
         event,
         status: {
           ...state.status,
           activity: "resizing",
           dateToResize: dateToChange,
+          eventType: category,
           isDrafting: true,
         },
       };
     },
 
+    startDnd: (state) => {
+      state.status = {
+        ...state.status,
+        activity: "dnd",
+        isDrafting: true,
+      };
+    },
+
     startDragging: (state, action) => {
-      const { event } = action.payload;
+      const { category, event } = action.payload;
       state.event = event;
       state.status = {
         ...state.status,
         activity: "dragging",
+        eventType: category,
         isDrafting: true,
       };
     },

packages/web/src/ducks/events/slices/draft.slice.types.ts

@@ -7,8 +7,9 @@ export interface Action_DraftEvent extends Action {
 }
 export type Activity_DraftEvent =
   | "createShortcut"
-  | "eventRightClick"
+  | "dnd"
   | "dragging"
+  | "eventRightClick"
   | "gridClick"
   | "resizing"
   | "sidebarClick";
@@ -35,6 +36,7 @@ interface Payload_DraftEvent {
 }
 
 interface Payload_Draft_Resize {
+  category: Categories_Event;
   event: Schema_Event;
   dateToChange: "startDate" | "endDate";
 }

packages/web/src/views/Calendar/Calendar.tsx

@@ -9,9 +9,10 @@ import { RootProps } from "./calendarView.types";
 import { Dedication } from "./components/Dedication";
 import { Draft } from "./components/Draft/Draft";
 import { DraftProvider } from "./components/Draft/context/DraftProvider";
+import { SidebarDraftProvider } from "./components/Draft/sidebar/context/SidebarDraftProvider";
 import { Grid } from "./components/Grid/";
 import { Header } from "./components/Header";
-import { Sidebar } from "./components/Sidebar";
+import { Sidebar } from "./components/Sidebar/Sidebar";
 import { useDateCalcs } from "./hooks/grid/useDateCalcs";
 import { useGridLayout } from "./hooks/grid/useGridLayout";
 import { useScroll } from "./hooks/grid/useScroll";
@@ -67,15 +68,17 @@ export const CalendarView = () => {
         weekProps={weekProps}
         isSidebarOpen={isSidebarOpen}
       >
-        <Draft measurements={measurements} weekProps={weekProps} />
-        {isSidebarOpen && (
-          <Sidebar
-            dateCalcs={dateCalcs}
-            measurements={measurements}
-            weekProps={weekProps}
-            gridRefs={gridRefs}
-          />
-        )}
+        <SidebarDraftProvider dateCalcs={dateCalcs} measurements={measurements}>
+          <Draft measurements={measurements} weekProps={weekProps} />
+          {isSidebarOpen && (
+            <Sidebar
+              dateCalcs={dateCalcs}
+              measurements={measurements}
+              weekProps={weekProps}
+              gridRefs={gridRefs}
+            />
+          )}
+        </SidebarDraftProvider>
         <StyledCalendar direction={FlexDirections.COLUMN} id={ID_MAIN}>
           <Header
             rootProps={rootProps}

packages/web/src/views/Calendar/components/Draft/Draft.tsx

@@ -1,50 +1,43 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { createPortal } from "react-dom";
 import { Categories_Event } from "@core/types/event.types";
 import { getDraftContainer } from "@web/common/utils/draft/draft.util";
-import { getCategory } from "@web/common/utils/event.util";
-import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
+import { selectDraftCategory } from "@web/ducks/events/selectors/draft.selectors";
 import { useAppSelector } from "@web/store/store.hooks";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
-import { GridDraft } from "./GridDraft";
 import { useDraftContext } from "./context/useDraftContext";
-import { useGridClick } from "./hooks/grid/useGridClick";
-import { useGridMouseMove } from "./hooks/grid/useGridMouseMove";
+import { GridDraft } from "./grid/GridDraft";
+import { useGridClick } from "./grid/hooks/useGridClick";
+import { useGridMouseMove } from "./grid/hooks/useGridMouseMove";
 
 interface Props {
   measurements: Measurements_Grid;
   weekProps: WeekProps;
 }
 
 export const Draft: FC<Props> = ({ measurements, weekProps }) => {
-  const [isLoadingDOM, setIsLoadingDOM] = useState(true);
-
-  useEffect(() => {
-    setIsLoadingDOM(false);
-  }, []);
-
   useGridClick();
   useGridMouseMove();
 
+  const category = useAppSelector(selectDraftCategory);
   const { state } = useDraftContext();
   const { draft, isDragging, isResizing } = state;
-  const isDrafting = useAppSelector(selectIsDrafting);
-
-  if (isLoadingDOM || !draft || !isDrafting) return null;
 
   if (draft?.isAllDay === undefined) {
-    console.error("draft.isAllDay is undefined", draft);
     return null;
   }
-  const container = getDraftContainer(draft.isAllDay);
-  const category = getCategory(draft);
-  const isGridEvent =
+  if (!category) return null;
+
+  const container = getDraftContainer(category);
+  if (!container) return null;
+
+  const isGridDraft =
     category === Categories_Event.ALLDAY || category === Categories_Event.TIMED;
 
   return createPortal(
     <>
-      {isGridEvent && (
+      {isGridDraft && (
         <GridDraft
           draft={draft}
           isDragging={isDragging}

packages/web/src/views/Calendar/components/Draft/context/DraftProvider.tsx

@@ -1,10 +1,13 @@
 import React from "react";
+import { Categories_Event } from "@core/types/event.types";
+import { selectDraftCategory } from "@web/ducks/events/selectors/draft.selectors";
+import { useAppSelector } from "@web/store/store.hooks";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useDraftActions } from "../hooks/actions/useDraftActions";
 import { useDraftForm } from "../hooks/state/useDraftForm";
 import { useDraftState } from "../hooks/state/useDraftState";
-import { DraftContext, State_Draft_Combined } from "./DraftContext";
+import { DraftContext, State_Draft } from "./DraftContext";
 
 interface DraftProviderProps {
   children: React.ReactNode;
@@ -29,9 +32,18 @@ export const DraftProvider = ({
   const { discard, reset } = actions;
   const { isFormOpen } = originalState;
   const { setIsFormOpen } = setters;
-  const formProps = useDraftForm(isFormOpen, discard, reset, setIsFormOpen);
 
-  const state: State_Draft_Combined = {
+  const _category = useAppSelector(selectDraftCategory);
+  const category = _category || Categories_Event.TIMED;
+  const formProps = useDraftForm(
+    category,
+    isFormOpen,
+    discard,
+    reset,
+    setIsFormOpen,
+  );
+
+  const state: State_Draft = {
     ...originalState,
     formProps,
   };

packages/web/src/views/Calendar/components/Draft/GridDraft.tsx → packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx

@@ -6,8 +6,8 @@ import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { EventForm } from "@web/views/Forms/EventForm";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
-import { GridEvent } from "../Event/Grid";
-import { useDraftContext } from "./context/useDraftContext";
+import { GridEvent } from "../../Event/Grid";
+import { useDraftContext } from "../context/useDraftContext";
 
 interface Props {
   draft: Schema_GridEvent;

packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts

@@ -152,7 +152,7 @@ export const useDraftActions = (
     }
 
     if (reduxDraft || reduxDraftType) {
-      dispatch(draftSlice.actions.discard({}));
+      dispatch(draftSlice.actions.discard());
     }
   }, [dispatch, draft, reduxDraft, reduxDraftType]);
 
@@ -254,8 +254,7 @@ export const useDraftActions = (
   const reset = () => {
     setDraft(null);
     setIsDragging(false);
-    // closeForm();
-    setIsFormOpen(false);
+    closeForm();
     setIsResizing(false);
     setDragStatus(null);
     setResizeStatus(null);
@@ -297,8 +296,7 @@ export const useDraftActions = (
           }
         }
 
-        // closeForm();
-        setIsFormOpen(false);
+        closeForm();
         setDraft((_draft) => {
           return {
             ..._draft,