chore: Handle back navigation when editing

SteveGT96 · Jan 9, 2025 · 2710930 · 2710930
1 parent 2ba9d23
commit 2710930
Showing 1 changed file with 44 additions and 14 deletions.
diff --git a/src/libraries/hooks/ui/useDiscardHelpers.ts b/src/libraries/hooks/ui/useDiscardHelpers.ts
@@ -1,23 +1,12 @@
-import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useCallback, useEffect, useState } from "react";
 import { useBlocker, useNavigate } from "react-router";
 
 export function useDiscardHelpers() {
-  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const [isBlocking, setIsBlocking] = useState(false);
+  const [isGoingBack, setIsGoingBack] = useState(false);
   const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
-  const handleCancelConfirmationDialog = useCallback(
-    (value: boolean) => () => {
-      setOpenCancelConfirmation(value);
-      if (isBlocking && !value) {
-        setIsBlocking(false);
-        blocker.reset?.();
-      }
-    },
-    [setOpenCancelConfirmation]
-  );
 
   const blocker = useBlocker(function () {
     if (openCancelConfirmation) {
@@ -28,15 +17,56 @@ export function useDiscardHelpers() {
     return true;
   });
 
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+      if (isBlocking && !value) {
+        setIsBlocking(false);
+        blocker.reset?.();
+      }
+      if (isGoingBack) {
+        setIsGoingBack(false);
+      }
+    },
+    [setOpenCancelConfirmation, blocker, isBlocking, setIsBlocking]
+  );
+
   const handleCancelConfirmation = useCallback(() => {
     if (isBlocking) {
       blocker.proceed?.();
       setIsBlocking(false);
+    } else if (isGoingBack) {
+      setIsGoingBack(false);
+      navigate(-1);
     } else {
       navigate(-1);
     }
     setOpenCancelConfirmation(false);
-  }, [navigate, setOpenCancelConfirmation]);
+  }, [
+    navigate,
+    setOpenCancelConfirmation,
+    blocker,
+    setIsBlocking,
+    isBlocking,
+    setIsGoingBack,
+    isGoingBack,
+  ]);
+
+  const handleGoBack = useCallback(
+    (event: PopStateEvent) => {
+      event.preventDefault();
+      setIsGoingBack(true);
+      setOpenCancelConfirmation(true);
+    },
+    [setIsBlocking, setOpenCancelConfirmation]
+  );
+
+  useEffect(() => {
+    window.addEventListener("popstate", handleGoBack);
+    return () => {
+      window.removeEventListener("popstate", handleGoBack);
+    };
+  }, [handleGoBack]);
 
   return {
     openCancelConfirmation,