refactor: separate draft effects into useDraftEffects hook for improved clarity and organization

Author: tyler-dane

packages/web/src/views/Calendar/hooks/draft/actions/useDraftActions.ts

@@ -33,8 +33,9 @@ import {
 } from "@web/ducks/events/selectors/draft.selectors";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
 import { State_Draft_Local } from "../state/useDraftState";
+import { useDraftEffects } from "../effects/useDraftEffects";
 
-type DraftActionSetters = {
+export type Setters_Draft_Actions = {
   setIsDragging: (isDragging: boolean) => void;
   setIsResizing: (isResizing: boolean) => void;
   setDragStatus: (status: any) => void;
@@ -46,7 +47,7 @@ type DraftActionSetters = {
 
 export const useDraftActions = (
   draftState: State_Draft_Local,
-  setters: DraftActionSetters,
+  setters: Setters_Draft_Actions,
   dateCalcs: DateCalcs,
   weekProps: WeekProps,
   isSidebarOpen: boolean
@@ -82,27 +83,6 @@ export const useDraftActions = (
     setIsFormOpen,
   } = setters;
 
-  //TODO change into user action for changing week
-  useEffect(() => {
-    reset();
-    discard();
-  }, [weekProps.component.week]);
-
-  useEffect(() => {
-    if (isResizing) {
-      setDateBeingChanged(dateBeingChanged);
-      setIsFormOpen(false);
-    }
-  }, [dateBeingChanged, isResizing]);
-
-  useEffect(() => {
-    const isStaleDraft = !isDrafting && isFormOpen;
-    if (isStaleDraft) {
-      setDraft(null);
-      return;
-    }
-  }, [isDrafting, isFormOpen]);
-
   const startDragging = useCallback(() => {
     setDraft(reduxDraft);
     setIsDragging(true);
@@ -413,27 +393,7 @@ export const useDraftActions = (
     isDrafting,
   ]);
 
-  useEffect(() => {
-    handleChange();
-  }, [handleChange]);
-
-  useEffect(() => {
-    if (isDragging) {
-      setIsFormOpen(false);
-      setDraft((_draft) => {
-        const durationMin = dayjs(_draft.endDate).diff(
-          _draft.startDate,
-          "minutes"
-        );
-
-        setDragStatus({
-          durationMin,
-        });
-
-        return draft;
-      });
-    }
-  }, [isDragging]);
+  useDraftEffects(draftState, setters, weekProps, isDrafting, handleChange);
 
   return {
     stopDragging,

packages/web/src/views/Calendar/hooks/draft/effects/useDraftEffects.ts

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import dayjs from "dayjs";
+import { State_Draft_Local } from "../state/useDraftState";
+import { Setters_Draft_Actions } from "../actions/useDraftActions";
+import { WeekProps } from "../../useWeek";
+
+export const useDraftEffects = (
+  state: State_Draft_Local,
+  setters: Setters_Draft_Actions,
+  weekProps: WeekProps,
+  isDrafting: boolean,
+  handleChange: () => Promise<void>
+) => {
+  const { draft, isDragging, isResizing, isFormOpen, dateBeingChanged } = state;
+  const {
+    setDraft,
+    setIsDragging,
+    setIsFormOpen,
+    setIsResizing,
+    setResizeStatus,
+    setDragStatus,
+    setDateBeingChanged,
+  } = setters;
+
+  useEffect(() => {
+    setDraft(null);
+    setIsDragging(false);
+    setIsFormOpen(false);
+    setIsResizing(false);
+    setDragStatus(null);
+    setResizeStatus(null);
+    setDateBeingChanged(null);
+  }, [weekProps.component.week]);
+
+  useEffect(() => {
+    if (isResizing) {
+      setDateBeingChanged(dateBeingChanged);
+      setIsFormOpen(false);
+    }
+  }, [dateBeingChanged, isResizing]);
+
+  useEffect(() => {
+    const isStaleDraft = !isDrafting && isFormOpen;
+    if (isStaleDraft) {
+      setDraft(null);
+    }
+  }, [isDrafting, isFormOpen]);
+
+  useEffect(() => {
+    handleChange();
+  }, [handleChange]);
+
+  useEffect(() => {
+    if (isDragging) {
+      setIsFormOpen(false);
+      setDraft((_draft) => {
+        const durationMin = dayjs(_draft.endDate).diff(
+          _draft.startDate,
+          "minutes"
+        );
+
+        setDragStatus({
+          durationMin,
+        });
+
+        return draft;
+      });
+    }
+  }, [isDragging]);
+};