Updates, bug fix, prompt refactor

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

client/package-lock.json

@@ -28,7 +28,7 @@
         "exifr": "^7.1.3",
         "firebase": "^10.7.1",
         "graphql": "^16.6.0",
-        "i18next": "^23.7.8",
+        "i18next": "^23.7.9",
         "i18next-browser-languagedetector": "^7.0.1",
         "jsoneditor": "^9.9.0",
         "jsreport-browser-client-dist": "^1.3.0",
@@ -11594,9 +11594,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "23.7.8",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.7.8.tgz",
-      "integrity": "sha512-yCe9964O+1abdIG01AOzk6P9mQi0HVJV1B57whYJQu6TjmrB9JHHDYonDI8amGt6M6b9bP3x3R0Zh7ROmvX7JQ==",
+      "version": "23.7.9",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.7.9.tgz",
+      "integrity": "sha512-wturtxTfJLJdLzHhyfxXo2l9Cbu2Iz4wF4065oWThPvdFJMUUG3fhXD3BLCHgrv4VxfScORq0i9sfCdjVPbgiw==",
       "funding": [
         {
           "type": "individual",

client/package.json

@@ -24,7 +24,7 @@
     "exifr": "^7.1.3",
     "firebase": "^10.7.1",
     "graphql": "^16.6.0",
-    "i18next": "^23.7.8",
+    "i18next": "^23.7.9",
     "i18next-browser-languagedetector": "^7.0.1",
     "jsoneditor": "^9.9.0",
     "jsreport-browser-client-dist": "^1.3.0",

client/src/components/PrivateRoute.js

@@ -9,7 +9,7 @@ function PrivateRoute({component: Component, isAuthorized, ...rest}) {
         if (!isAuthorized) {
             navigate(`/signin?redirect=${location.pathname}`);
         }
-    }, [isAuthorized, navigate]);
+    }, [isAuthorized, navigate,location]);
 
     return <Outlet/>;
 }

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

@@ -27,6 +27,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
             <Space direction="vertical" style={{ width: "100%" }}>
               <Prompt
                 when={!skipPrompt}
+                beforeUnload={true}
                 message={(location) => {
                   if (loc.pathname === location.pathname) return false;
                   return t("general.messages.unsavedchangespopup");

client/src/index.js

@@ -5,7 +5,7 @@ import Dinero from "dinero.js";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import { BrowserRouter as Router } from "react-router-dom";
+import {createBrowserRouter, createRoutesFromElements, Route, RouterProvider} from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
 import AppContainer from "./App/App.container";
 import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
@@ -47,22 +47,42 @@ if (process.env.NODE_ENV !== "development") {
   });
 }
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-    <React.StrictMode>
-      <Provider store={store}>
-        <Router>
-          <PersistGate
-              loading={<LoadingSpinner message="Restoring your settings..." />}
-              persistor={persistor}
-          >
-            <AppContainer />
-          </PersistGate>
-        </Router>
-      </Provider>
-    </React.StrictMode>
+// const root = ReactDOM.createRoot(document.getElementById("root"));
+
+const router = createBrowserRouter(
+    createRoutesFromElements(
+        <Route path="*" element={<AppContainer />}>
+        </Route>
+    )
 );
 
+export default function App() {
+    return (
+        <Provider store={store}>
+            <RouterProvider router={router} />
+        </Provider>
+    );
+}
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PersistGate loading={<LoadingSpinner message="Restoring your settings..." />} persistor={persistor}>
+        <App />
+    </PersistGate>);
+
+// root.render(
+//     <React.StrictMode>
+//       <Provider store={store}>
+//         <BrowserRouter>
+//           <PersistGate
+//               loading={<LoadingSpinner message="Restoring your settings..." />}
+//               persistor={persistor}
+//           >
+//             <AppContainer />
+//           </PersistGate>
+//         </BrowserRouter>
+//       </Provider>
+//     </React.StrictMode>
+// );
+
 // const onServiceWorkerUpdate = (registration) => {
 //   console.log("onServiceWorkerUpdate", registration);
 

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;