♻️ Refactor: Reorganize someday hooks (#265)

* 🔧 Fix: Update import path for DateCalcs hook

* 🔧 Fix: Allow null draft event in sidebar utility hook

* 🧹 Chore: alphabetize useSidebarUtil

* 🔧 Fix: Update import paths for sidebar hooks in SomedayEvents

* 🐛 Fix: update how onPlaceholderClick creates a new draft

* 🧹 Chore: Remove unused imports and clean up web event types

* 🧹 Chore: Remove TODO comments

* ♻️ Refactor: Restore closeForm() in draft actions

* ♻️ Refator: use isSomedayFormOpen instead of draft.isOpen

* 🔧 Fix: Add optional chaining to draft status selectors

* ✨ Feat: Add drag and drop (DnD) state management for sidebar events

* ♻️ Refactor: Update GridEventPreview and SomedayEvents imports and types

* ♻️ Refactor: Update DraggableSomedayEvents types

* chore: remove onClick handlers in Header and Sidebar

* ✨ Feat: Improve draft category selection in Draft component

* ✨ Feat: Add sidebar ID constant and update draft container selection

* refactor(checkpoint): move sidebar state into Context

* fix: simplify state in DraggableSomedayEvent

* 🔧 Fix: imports from merge

* 🧹 Chore: improve type-safety by adding category to resizing and drag

* 🧹 Chore: remove Someday conditional from Draft.tsx

Going to do this in the sidebar for now for simplicity

* ♻️  refactor(checkpoint): use isSomedayFormOpen state for sidebar

currently opening the correct form when clicking an existing draft

need to update for new drafts (and shortcuts)

* ♻️  refactor(checkpoint): close someday form on ESC

need to update for new drafts (and shortcuts)

* 🔧 fix: prompt for confirmation before deleting someday event from shortcut

* 🔧 fix(checkpoint): update form props based on draft category

the placement value is currently correct, but the form is still visually appearing in the wrong location. this is likely due to how the refs are handled

* 🧹 Chore: enable DND by fixing id check in DraggableSomedayEvent

* 🧹 chore(checkpoint): recompute form position within each SomedayEventContainer

* 🧹 Chore: fix type issues in sidebar hooks

* 🧹 Chore: cleanup sidebar draft effects and actions

* 🧹 Chore: delete old effects in useSidebarEffects

* 🐛: Fix ESLint configuration for Prettier plugin

Replaced direct plugin usage in eslint config with plugin object.

The flat config system expects each item in the array to be a valid configuration object
Plugins need to be explicitly registered in the plugins field

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

* 🧹 Chore: Remove unused imports and commented-out code in Draft component

* 🔧Chore: remove ID_SIDEBAR as a valid response for draft container

the sidebar isn't being used as a container now, so this makes the code easier to understand

* 🧹Chore: rearrange someday files

Author: tyler-dane

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,
   };