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

Author: tyler-dane

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

@@ -32,7 +32,7 @@ export const SomedayTab: FC<Props> = ({
 }) => {
   const isProcessing = useAppSelector(selectIsGetSomedayEventsProcessing);
 
-  const somedayRef = useRef();
+  const somedayRef = useRef<HTMLDivElement>(null);
   const weekLabel = useMemo(
     () => getWeekRangeLabel(viewStart, viewEnd),
     [viewEnd, viewStart],

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { ReferenceType } from "@floating-ui/react";
 import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
@@ -22,9 +21,6 @@ interface Props {
   onMigrate: Actions_Sidebar["onMigrate"];
   priority: Priorities;
   provided: DraggableProvided;
-  // formRef: ((node: ReferenceType | null) => void) &
-  // ref: ((node: ReferenceType | null) => void) &
-  // ((node: ReferenceType | null) => void);
   formProps: Props_DraftForm;
   snapshot: DraggableStateSnapshot;
 }
@@ -62,20 +58,14 @@ export const SomedayEvent = ({
       onKeyDown={onKeyDown}
       priority={priority}
       role="button"
-      // ref={ref}
       ref={provided.innerRef}
     >
-      {/* <div ref={formProps.refs.setReference} {...formProps.getReferenceProps()}> */}
-      <div ref={formProps.refs.setReference}>
-        <SomedayEventRectangle
-          category={category}
-          event={event}
-          onMigrate={onMigrate}
-          // ref={formProps.refs.setReference}
-          // ref={ref}
-          // {...formProps.getReferenceProps()}
-        />
-      </div>
+      <SomedayEventRectangle
+        category={category}
+        event={event}
+        onMigrate={onMigrate}
+        formProps={formProps}
+      />
     </StyledNewSomedayEvent>
   );
 };

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

@@ -3,11 +3,11 @@ import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
+import { useDraftForm } from "@web/views/Calendar/components/Draft/hooks/state/useDraftForm";
 import { useSidebarContext } from "@web/views/Calendar/components/Draft/sidebar/context/useSidebarContext";
 import { SIDEBAR_OPEN_WIDTH } from "@web/views/Calendar/layout.constants";
 import { SomedayEventForm } from "@web/views/Forms/SomedayEventForm/SomedayEventForm";
 import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
-import { Actions_Sidebar } from "../../../../../Draft/sidebar/hooks/useSidebarActions";
 import { Setters_Sidebar } from "../../../../../Draft/sidebar/hooks/useSidebarState";
 import { SomedayEvent } from "../SomedayEvent/SomedayEvent";
 
@@ -17,7 +17,6 @@ export interface Props {
   isDrafting: boolean;
   isDragging: boolean;
   isOverGrid: boolean;
-  onMigrate: Actions_Sidebar["onMigrate"];
   onSubmit: (event?: Schema_Event) => void;
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
@@ -30,15 +29,20 @@ export const SomedayEventContainer = ({
   isDrafting,
   isDragging,
   isOverGrid,
-  onMigrate,
   onSubmit,
   provided,
   snapshot,
   setEvent,
 }: Props) => {
   const { actions, setters, state } = useSidebarContext();
 
-  const { formProps } = state;
+  const formProps = useDraftForm(
+    category,
+    state.isSomedayFormOpen && state.draft?._id === event._id,
+    actions.discard,
+    actions.reset,
+    setters.setIsSomedayFormOpen,
+  );
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -61,18 +65,8 @@ export const SomedayEventContainer = ({
         priority={event.priority || Priorities.UNASSIGNED}
         provided={provided}
         snapshot={snapshot}
-        onMigrate={onMigrate}
+        onMigrate={actions.onMigrate}
         formProps={formProps}
-        // ref={formProps.refs.setReference}
-        // ref={provided.innerRef}
-        // ref={(node) => {
-        //   if (node) {
-        //     // ref(node);
-        //     formProps.refs.setReference(node);
-        //     provided.innerRef(node);
-        //   }
-        // }}
-        // {...formProps.getReferenceProps()}
       />
 
       {state.isSomedayFormOpen && isDraftingThisEvent && (
@@ -83,7 +77,6 @@ export const SomedayEventContainer = ({
               strategy={formProps.strategy}
               top={formProps.y}
               left={SIDEBAR_OPEN_WIDTH}
-              {...formProps.getFloatingProps()}
             >
               <SomedayEventForm
                 event={event}

packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/SomedayEvents/SomedayEventContainer/SomedayEventRectangle.tsx

@@ -4,26 +4,29 @@ import { Flex } from "@web/components/Flex";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { FlexDirections } from "@web/components/Flex/styled";
 import { Text } from "@web/components/Text";
+import { Props_DraftForm } from "@web/views/Calendar/components/Draft/context/DraftContext";
 import { Actions_Sidebar } from "../../../../../Draft/sidebar/hooks/useSidebarActions";
 import { StyledMigrateArrow, StyledRecurrenceText } from "./styled";
 
 interface Props {
   category: Categories_Event;
   event: Schema_Event;
   onMigrate: Actions_Sidebar["onMigrate"];
+  formProps: Props_DraftForm;
 }
 
 export const SomedayEventRectangle = ({
   category,
   event,
+  formProps,
   onMigrate,
 }: Props) => {
   const target = category === Categories_Event.SOMEDAY_WEEK ? "week" : "month";
   const canMigrate =
     !event.recurrence?.rule || event.recurrence?.rule.length === 0;
 
   return (
-    <>
+    <div ref={formProps.refs.setReference} {...formProps.getReferenceProps()}>
       <Flex
         alignItems={AlignItems.CENTER}
         direction={FlexDirections.ROW}
@@ -68,6 +71,6 @@ export const SomedayEventRectangle = ({
           </Flex>
         )}
       </Flex>
-    </>
+    </div>
   );
 };

packages/web/src/views/Forms/hooks/useEventForm.ts

@@ -57,7 +57,7 @@ export const useEventForm = (
   const { context, x, y, refs, strategy } = useFloating({
     ...options,
     open: isOpen,
-    onOpenChange(newIsOpen, event, reason) {
+    onOpenChange(newIsOpen: boolean, event: Event, reason?: OpenChangeReason) {
       onIsFormOpenChange(newIsOpen, event, reason);
     },
   });