Fix prompt, and modal.

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Form, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
-import {useLocation } from "react-router-dom";
 import "./form-fields-changed.styles.scss";
 import Prompt from "../../utils/prompt";
 
@@ -12,7 +11,6 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
   const handleReset = () => {
     form.resetFields();
   };
-  const loc = useLocation();
   //if (!form.isFieldsTouched()) return <></>;
   return (
     <Form.Item
@@ -28,10 +26,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
               <Prompt
                 when={!skipPrompt}
                 beforeUnload={true}
-                message={(location) => {
+                message={t("general.messages.unsavedchangespopup")}
-                  if (loc.pathname === location.pathname) return false;
-                  return t("general.messages.unsavedchangespopup");
-                }}
               />
               <AlertComponent
                 type="warning"

client/src/utils/prompt.js

@@ -1,38 +1,44 @@
-import * as React from "react";
+import {useBeforeUnload, useBlocker} from "react-router-dom";
-import { useBeforeUnload, useBlocker } from "react-router-dom";
+import {useCallback, useEffect, useRef} from "react";
+function usePrompt(message, {beforeUnload} = {}) {
 
-function usePrompt(message, { beforeUnload } = {}) {
+    let blocker = useBlocker(
+        useCallback(
+            (location) => {
+                // This has been put in, so it does not affect transitions between the same page
+                if (location.currentLocation.pathname === location.nextLocation.pathname) {
+                    return false;
+                }
+                return typeof message === "string" ? !window.confirm(message) : false;
+            },
+            [message]
+        )
+    );
 
-let blocker = useBlocker(
+    let prevState = useRef(blocker.state);
-    React.useCallback(
-        () => (typeof message === "string" ? !window.confirm(message) : false),
-        [message]
-    )
-);
-let prevState = React.useRef(blocker.state);
 
-React.useEffect(() => {
+    useEffect(() => {
-    if (blocker.state === "blocked") {
+        if (blocker.state === "blocked") {
-        blocker.reset();
+            blocker.reset();
-    }
+        }
-    prevState.current = blocker.state;
+        prevState.current = blocker.state;
-}, [blocker]);
+    }, [blocker]);
 
-useBeforeUnload(
+    useBeforeUnload(
-    React.useCallback(
+        useCallback(
-        (event) => {
+            (event) => {
-            if (beforeUnload && typeof message === "string") {
+                if (beforeUnload && typeof message === "string") {
-                event.preventDefault();
+                    event.preventDefault();
-                event.returnValue = message;
+                    event.returnValue = message;
-            }
+                }
-        },
+            },
-        [message, beforeUnload]
+            [message, beforeUnload]
-    ),
+        ),
-    { capture: true }
+        {capture: true}
-);
+    );
 }
 
-function Prompt({ when, message, ...props }) {
+function Prompt({when, message, ...props}) {
     usePrompt(when ? message : false, props);
     return null;
 }