FIX Reinstate unsaved changes dialog #1458
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,7 +6,7 @@ import $ from 'jquery'; | |
| import React from 'react'; | ||
| import { Provider as ReduxProvider } from 'react-redux'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import { createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom'; | ||
| import Config from 'lib/Config'; | ||
| import pageRouter from 'lib/Router'; | ||
| import reactRouteRegister from 'lib/ReactRouteRegister'; | ||
|
|
@@ -15,8 +15,9 @@ import { ApolloProvider } from '@apollo/client'; | |
| import i18n from 'i18n'; | ||
| import { isDirty } from 'redux-form'; | ||
| import getFormState from 'lib/getFormState'; | ||
| import { Route } from 'react-router'; | ||
| import { joinUrlPaths } from 'lib/urls'; | ||
| import NavigationBlocker from '../components/NavigationBlocker/NavigationBlocker'; | ||
|
|
||
| /** | ||
| * Bootstraps routes | ||
|
|
@@ -35,8 +36,7 @@ class BootRoutes { | |
| const base = Config.get('absoluteBaseUrl'); | ||
| pageRouter.setAbsoluteBase(base); | ||
|
|
||
|
Comment on lines
-38
to
-39
There was a problem hiding this comment. Neither of these functions is passed into downstream components anymore, so we don't need explicit binds. |
||
| this.shouldConfirmBeforeUnload = this.shouldConfirmBeforeUnload.bind(this); | ||
| } | ||
|
|
||
| setStore(store) { | ||
|
|
@@ -109,18 +109,30 @@ class BootRoutes { | |
| initReactRouter() { | ||
| reactRouteRegister.updateRootRoute({ component: App }); | ||
| const rootRoute = reactRouteRegister.getRootRoute(); | ||
| const router = createBrowserRouter( | ||
| createRoutesFromElements( | ||
| <Route | ||
| path={rootRoute.path} | ||
| element={ | ||
| <rootRoute.component> | ||
| <NavigationBlocker shouldBlockFn={this.shouldConfirmBeforeUnload} blockMessage={this.getUnsavedChangesMessage()} /> | ||
| </rootRoute.component> | ||
| } | ||
| > | ||
| {reactRouteRegister.getChildRoutes().map( | ||
| (route) => ( | ||
| <Route key={route.path} path={route.path} element={<route.component />} /> | ||
| ) | ||
| )} | ||
| </Route> | ||
| ), | ||
| { basename: joinUrlPaths(Config.get('baseUrl'), Config.get('adminUrl')) } | ||
| ); | ||
|
|
||
| ReactDOM.createRoot(document.getElementsByClassName('cms-content')[0]).render( | ||
| <ApolloProvider client={this.client}> | ||
| <ReduxProvider store={this.store}> | ||
| <RouterProvider router={router} /> | ||
| </ReduxProvider> | ||
| </ApolloProvider> | ||
|
Comment on lines
-112
to
137
There was a problem hiding this comment. Ultimately the only differences here are:
See #1458 (comment) for the reason we had to change the way we're doing the browserrouter etc. |
||
| ); | ||
|
|
@@ -134,12 +146,7 @@ class BootRoutes { | |
| const store = this.store; | ||
|
|
||
| pageRouter('*', (ctx, next) => { | ||
| const msg = this.getUnsavedChangesMessage(); | ||
| if (!this.shouldConfirmBeforeUnload() || window.confirm(msg)) { | ||
| // eslint-disable-next-line no-param-reassign | ||
| ctx.store = store; | ||
|
|
@@ -218,22 +225,10 @@ class BootRoutes { | |
| return changedForms.length > 0; | ||
| } | ||
|
|
||
|
Comment on lines
-221
to
-236
There was a problem hiding this comment. Neither of these is needed anymore |
||
| getUnsavedChangesMessage() { | ||
| return i18n._t('Admin.CONFIRMUNSAVED', `Are you sure you want to navigate away | ||
| from this page?\n\nWARNING: Your changes have not been saved.\n\n | ||
| Press OK to continue, or Cancel to stay on the current page.`); | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { unstable_useBlocker as useBlocker } from 'react-router-dom'; | ||
|
|
||
| export default function NavigationBlocker({ shouldBlockFn, blockMessage }) { | ||
| const blocker = useBlocker(shouldBlockFn); | ||
| useEffect(() => { | ||
|
There was a problem hiding this comment. Has to be in an effect to avoid the console error I mentioned in #1458 (comment) |
||
| if (blocker.state === 'blocked') { | ||
| // eslint-disable-next-line no-alert | ||
| const canUnload = confirm(blockMessage); | ||
| if (canUnload) { | ||
| blocker.proceed(); | ||
| } else { | ||
| blocker.reset(); | ||
| } | ||
| } | ||
| }, [blocker.state]); | ||
|
|
||
| // Don't actually render anything - this component exists purely to hold the blocker | ||
| // logic, which we put here to (hopefully) avoid rerendering the entire app when blocker | ||
| // state changes. | ||
| return null; | ||
| } | ||
|
|
||
| NavigationBlocker.propTypes = { | ||
| shouldBlockFn: PropTypes.func.isRequired, | ||
| blockMessage: PropTypes.string.isRequired, | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to use
createBrowserRouter()andcreateRoutesFromElements()instead of adding theBrowserRouterandRoutescomponents ourselves because theRouterProviderdoesn't like us doing it ourself - and we have to use theRouterProviderbecause this instantiates a "data router" which is necessary to use the newuseBlockerhook.