refactor(checkpoint): move sidebar state into Context

Author: tyler-dane

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

@@ -18,8 +18,10 @@ import { useRefresh } from "./hooks/useRefresh";
 import { Sidebar } from "./components/Sidebar";
 import { Dedication } from "./components/Dedication";
 import { CmdPalette } from "../CmdPalette";
-import { Draft } from "./components/Draft/Draft";
 import { DraftProvider } from "./components/Draft/context/DraftProvider";
+import { Draft } from "./components/Draft/Draft";
+import { SidebarDraftProvider } from "./components/Draft/sidebar/context/SidebarDraftProvider";
+
 export const CalendarView = () => {
   const isSidebarOpen = useAppSelector(selectIsSidebarOpen);
 
@@ -66,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

@@ -10,10 +10,11 @@ import {
   selectIsDrafting,
 } from "@web/ducks/events/selectors/draft.selectors";
 
-import { GridDraft } from "./GridDraft";
-import { useGridClick } from "./hooks/grid/useGridClick";
-import { useGridMouseMove } from "./hooks/grid/useGridMouseMove";
+import { useGridClick } from "./grid/hooks/useGridClick";
+import { useGridMouseMove } from "./grid/hooks/useGridMouseMove";
 import { useDraftContext } from "./context/useDraftContext";
+import { SomedayDraft } from "./sidebar/SomedayDraft";
+import { GridDraft } from "./grid/GridDraft";
 
 interface Props {
   measurements: Measurements_Grid;
@@ -41,10 +42,17 @@ export const Draft: FC<Props> = ({ measurements, weekProps }) => {
     console.error("draft.isAllDay is undefined", draft);
     return null;
   }
-  const container = getDraftContainer(draft.isAllDay);
+
+  if (!category) return null;
+
+  const container = getDraftContainer(category);
   const isGridEvent =
     category === Categories_Event.ALLDAY || category === Categories_Event.TIMED;
 
+  const isSomedayEvent =
+    category === Categories_Event.SOMEDAY_WEEK ||
+    category === Categories_Event.SOMEDAY_MONTH;
+
   return createPortal(
     <>
       {isGridEvent && (
@@ -56,6 +64,14 @@ export const Draft: FC<Props> = ({ measurements, weekProps }) => {
           weekProps={weekProps}
         />
       )}
+      {isSomedayEvent && (
+        <SomedayDraft
+          category={category}
+          draft={draft}
+          index={0}
+          isOverGrid={false}
+        />
+      )}
     </>,
     container,
   );

…/Calendar/components/Draft/GridDraft.tsx …ndar/components/Draft/grid/GridDraft.tsxpackages/web/src/views/Calendar/components/Draft/GridDraft.tsx renamed to packages/web/src/views/Calendar/components/Draft/grid/GridDraft.tsx packages/web/src/views/Calendar/components/Draft/GridDraft.tsx renamed to 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 { EventForm } from "@web/views/Forms/EventForm";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
-import { GridEvent } from "../Event/Grid";
-import { useDraftContext } from "./context/useDraftContext";
+import { useDraftContext } from "../context/useDraftContext";
+import { GridEvent } from "../../Event/Grid";
 
 interface Props {
   draft: Schema_GridEvent;

…ponents/Draft/hooks/grid/useGridClick.ts …ponents/Draft/grid/hooks/useGridClick.tspackages/web/src/views/Calendar/components/Draft/hooks/grid/useGridClick.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridClick.ts packages/web/src/views/Calendar/components/Draft/hooks/grid/useGridClick.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridClick.ts

@@ -44,3 +44,5 @@ export const useDraftForm = (
   const formProps = useEventForm("grid", isFormOpen, onIsFormOpenChange);
   return formProps;
 };
+
+export type Props_DraftForm = ReturnType<typeof useDraftForm>;

…nts/Draft/hooks/grid/useGridMouseMove.ts …nts/Draft/grid/hooks/useGridMouseMove.tspackages/web/src/views/Calendar/components/Draft/hooks/grid/useGridMouseMove.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseMove.ts packages/web/src/views/Calendar/components/Draft/hooks/grid/useGridMouseMove.ts renamed to packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseMove.ts

@@ -0,0 +1,31 @@
+import React, { FC } from "react";
+import { Categories_Event, Schema_Event } from "@core/types/event.types";
+import { DraggableSomedayEvent } from "../../Sidebar/SomedayTab/SomedayEvents/Wrappers/DraggableSomedayEvent";
+import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants";
+
+interface Props {
+  category: Categories_Event;
+  draft: Schema_Event;
+  index: number;
+  isOverGrid: boolean;
+}
+
+export const SomedayDraft: FC<Props> = ({
+  category,
+  draft,
+  index,
+  isOverGrid,
+}) => {
+  console.log(draft);
+  return (
+    <DraggableSomedayEvent
+      category={category}
+      draftId={ID_SOMEDAY_DRAFT}
+      event={draft}
+      index={index}
+      isDrafting={true}
+      isOverGrid={isOverGrid}
+      key={ID_SOMEDAY_DRAFT}
+    />
+  );
+};

packages/web/src/views/Calendar/components/Draft/hooks/grid/useGridDraft.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { Actions_Sidebar } from "../hooks/useSidebarActions";
+import { Setters_Sidebar, State_Sidebar } from "../hooks/useSidebarState";
+
+interface SidebarDraftContextValue {
+  state: State_Sidebar;
+  setters: Setters_Sidebar;
+  actions: Actions_Sidebar;
+}
+export const SidebarDraftContext =
+  createContext<SidebarDraftContextValue | null>(null);