From a22c4bdf8c2aa17b1abf337923d053663c533e80 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Tue, 12 Dec 2023 14:48:37 -0500 Subject: [PATCH] Updates, bug fix, prompt refactor Signed-off-by: Dave Richer --- client/package-lock.json | 8 +-- client/package.json | 2 +- client/src/components/PrivateRoute.js | 2 +- .../form-fields-changed-alert.component.jsx | 1 + client/src/index.js | 50 ++++++++++----- client/src/utils/prompt.js | 64 ++++++++++--------- 6 files changed, 76 insertions(+), 51 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 565fa3885..8583b92ba 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index b96686577..01325f29f 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/PrivateRoute.js b/client/src/components/PrivateRoute.js index ae1188407..40be7a5b2 100644 --- a/client/src/components/PrivateRoute.js +++ b/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 ; } diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx index 514fb9d27..333766bd6 100644 --- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx +++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx @@ -27,6 +27,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) { { if (loc.pathname === location.pathname) return false; return t("general.messages.unsavedchangespopup"); diff --git a/client/src/index.js b/client/src/index.js index 823660345..003d14589 100644 --- a/client/src/index.js +++ b/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( - - - - } - persistor={persistor} - > - - - - - +// const root = ReactDOM.createRoot(document.getElementById("root")); + +const router = createBrowserRouter( + createRoutesFromElements( + }> + + ) ); +export default function App() { + return ( + + + + ); +} +ReactDOM.createRoot(document.getElementById('root')).render( + } persistor={persistor}> + + ); + +// root.render( +// +// +// +// } +// persistor={persistor} +// > +// +// +// +// +// +// ); + // const onServiceWorkerUpdate = (registration) => { // console.log("onServiceWorkerUpdate", registration); diff --git a/client/src/utils/prompt.js b/client/src/utils/prompt.js index 0ed5fc761..7a060b279 100644 --- a/client/src/utils/prompt.js +++ b/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 ( -
+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; \ No newline at end of file +export default Prompt; \ No newline at end of file