Updates, bug fix, prompt refactor

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

client/src/utils/prompt.js

@@ -1,36 +1,40 @@
-import { unstable_usePrompt as useBlocker } from 'react-router-dom'
+import * as React from "react";
+import { useBeforeUnload, useBlocker } from "react-router-dom";
 
-function Prompt(props) {
-    const block = props.when
+function usePrompt(message, { beforeUnload } = {}) {
 
-    useBlocker(() => {
-        if (block) {
-            return ! window.confirm(props.message)
-        }
-        return false
-    })
-
-    return (
-        <div key={block}/>
+let blocker = useBlocker(
+    React.useCallback(
+        () => (typeof message === "string" ? !window.confirm(message) : false),
+        [message]
     )
+);
+let prevState = React.useRef(blocker.state);
+
+React.useEffect(() => {
+    if (blocker.state === "blocked") {
+        blocker.reset();
+    }
+    prevState.current = blocker.state;
+}, [blocker]);
+
+useBeforeUnload(
+    React.useCallback(
+        (event) => {
+            if (beforeUnload && typeof message === "string") {
+                event.preventDefault();
+                event.returnValue = message;
+            }
+        },
+        [message, beforeUnload]
+    ),
+    { capture: true }
+);
 }
 
-export default Prompt;
+function Prompt({ when, message, ...props }) {
+    usePrompt(when ? message : false, props);
+    return null;
+}
 
-
-// Potential new solution:
-// import { useBlocker } from 'react-router-dom';
-//
-// function Prompt({ when, message }) {
-//     useBlocker((transition) => {
-//         if (when) {
-//             transition.retry();
-//             return !window.confirm(message);
-//         }
-//         return false;
-//     }, when);
-//
-//     return null;
-// }
-//
-// export default Prompt;
+export default Prompt;