✨ Feat: event window not reopening (#341)

* chore(web): refactor `GridDraft` initiate drag logic

Replacing `setIsDragging` with `startDragging` makes code more predictable and easier to maintain

* feat(web): re-open window after dragging event if it was open before drag

Author: that-one-arab

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

@@ -21,9 +21,8 @@ interface Props {
 
 export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
   const { actions, setters, state } = useDraftContext();
-  const { discard, deleteEvent, submit } = actions;
-  const { setDraft, setDateBeingChanged, setIsDragging, setIsResizing } =
-    setters;
+  const { discard, deleteEvent, submit, startDragging } = actions;
+  const { setDraft, setDateBeingChanged, setIsResizing } = setters;
   const { draft, isDragging, formProps, isFormOpen, isResizing } = state;
   const { context, getReferenceProps, getFloatingProps, x, y, refs, strategy } =
     formProps;
@@ -37,7 +36,7 @@ export const GridDraft: FC<Props> = ({ measurements, weekProps }) => {
 
   const handleClick = () => {};
   const handleDrag = () => {
-    setIsDragging(true);
+    startDragging();
   };
 
   const { onMouseDown } = useGridEventMouseDown(

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

@@ -47,6 +47,7 @@ export const useDraftActions = (
   const isAtWeeklyLimit = useAppSelector(selectIsAtWeeklyLimit);
   const somedayWeekCount = useAppSelector(selectSomedayWeekCount);
   const reduxDraft = useAppSelector(selectDraft);
+
   const {
     activity,
     dateToResize,
@@ -61,6 +62,8 @@ export const useDraftActions = (
     isDragging,
     isResizing,
     resizeStatus,
+    isFormOpen,
+    isFormOpenBeforeDragging,
   } = draftState;
 
   const {
@@ -71,6 +74,7 @@ export const useDraftActions = (
     setDateBeingChanged,
     setDraft,
     setIsFormOpen,
+    setIsFormOpenBeforeDragging,
   } = setters;
 
   const startDragging = useCallback(() => {
@@ -87,6 +91,7 @@ export const useDraftActions = (
   const stopDragging = () => {
     setIsDragging(false);
     setDragStatus(null);
+    setIsFormOpenBeforeDragging(null);
   };
 
   const stopResizing = () => {
@@ -122,7 +127,11 @@ export const useDraftActions = (
       dispatch(createEventSlice.actions.request(event));
     }
 
-    discard();
+    if (isFormOpenBeforeDragging) {
+      openForm();
+    } else {
+      discard();
+    }
   };
 
   const closeForm = () => {
@@ -411,6 +420,14 @@ export const useDraftActions = (
     openForm,
     reset,
     resize,
+    startDragging: () => {
+      // Placing `setIsFormOpenBeforeDragging` here rather than inside `startDragging`
+      // because `setIsFormOpenBeforeDragging` depends on `isFormOpen` and re-calculates
+      // `startDragging` (due to it being a react callback) which causes issues.
+      // This is a hacky solution to the issue.
+      setIsFormOpenBeforeDragging(isFormOpen);
+      startDragging();
+    },
     stopDragging,
     stopResizing,
   };

packages/web/src/views/Calendar/components/Draft/hooks/state/useDraftState.ts

@@ -16,6 +16,7 @@ export interface State_Draft_Local {
   isDragging: boolean;
   isResizing: boolean;
   isFormOpen: boolean;
+  isFormOpenBeforeDragging: boolean | null;
   resizeStatus: Status_Resize | null;
 }
 
@@ -27,6 +28,7 @@ export interface Setters_Draft {
   setResizeStatus: (value: Status_Resize | null) => void;
   setDateBeingChanged: (value: "startDate" | "endDate" | null) => void;
   setIsFormOpen: (value: boolean) => void;
+  setIsFormOpenBeforeDragging: (value: boolean | null) => void;
 }
 
 export const useDraftState = () => {
@@ -39,6 +41,9 @@ export const useDraftState = () => {
     "startDate" | "endDate" | null
   >("endDate");
   const [isFormOpen, setIsFormOpen] = useState(false);
+  const [isFormOpenBeforeDragging, setIsFormOpenBeforeDragging] = useState<
+    boolean | null
+  >(null);
 
   const state: State_Draft_Local = {
     draft,
@@ -48,6 +53,7 @@ export const useDraftState = () => {
     isResizing,
     resizeStatus,
     dateBeingChanged,
+    isFormOpenBeforeDragging,
   };
 
   const setters: Setters_Draft = {
@@ -58,6 +64,7 @@ export const useDraftState = () => {
     setResizeStatus,
     setDateBeingChanged,
     setIsFormOpen,
+    setIsFormOpenBeforeDragging,
   };
 
   return { state, setters };