7499 - Update react router dom

.github/dependabot.yml

@@ -28,7 +28,6 @@ updates:
       - dependency-name: '@typescript-eslint/parser'
       - dependency-name: eslint #6784
       - dependency-name: fetch-mock
-      - dependency-name: react-router-dom
       - dependency-name: react-datepicker
       - dependency-name: recharts
       - dependency-name: '@headlessui/react'

app/react/App/App.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Outlet, useLocation, useParams } from 'react-router-dom';
+import { Outlet, useLocation, useParams } from 'react-router';
 import { useAtom } from 'jotai';
 import Notifications from 'app/Notifications';
 import Cookiepopup from 'app/App/Cookiepopup';

app/react/App/Menu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { bindActionCreators, Dispatch } from 'redux';
 import { connect, ConnectedProps } from 'react-redux';
 import { fromJS } from 'immutable';

app/react/App/specs/Menu.spec.js

@@ -3,8 +3,8 @@ import { I18NLink } from 'app/I18N';
 import { renderConnected } from 'app/utils/test/renderConnected';
 import { Menu } from '../Menu';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: () => ({
     search: '?q=(searchTerm:%27asd%27)',
   }),

app/react/Attachments/components/ViewDocumentLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { CurrentLocationLink } from 'app/Layout';
 import { EntitySchema } from 'shared/types/entityType';
 

app/react/Attachments/components/specs/ViewDocumentLink.spec.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import React from 'react';
 import { shallow } from 'enzyme';
 
@@ -13,8 +13,8 @@ const mockUseLocation = jest.fn().mockImplementation(() => ({
   pathname: `?page=${pathname}`,
 }));
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: () => mockUseLocation(),
 }));
 const renderComponent = (entity: EntitySchema) => {

app/react/Forms/components/MultiSelect.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable class-methods-use-this,max-lines */
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import ShowIf from 'app/App/ShowIf';
 import { filterOptions } from 'shared/optionsUtils';
 import { t, Translate } from 'app/I18N';

app/react/I18N/I18NLinkV2.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { NavLinkProps, NavLink } from 'react-router';
 import { useAtomValue } from 'jotai';
-import { NavLinkProps, NavLink } from 'react-router-dom';
 import { localeAtom } from 'V2/atoms';
 
 type I18NLinkProps = NavLinkProps & { to: string; activeClassname?: string };

app/react/I18N/components/I18NLink.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { useNavigate, NavLink, useLocation } from 'react-router-dom';
+import { useNavigate, NavLink, useLocation } from 'react-router';
 import { omit } from 'lodash';
 
 const defaultProps = {
@@ -48,20 +48,20 @@ const I18NLink = (props: I18NLinkProps) => {
     }, delay);
   };
 
-  const _navigate = () => {
-    navigate(to, { replace });
+  const _navigate = async () => {
+    await navigate(to, { replace });
     scrollToHashWithRetry(location.hash);
   };
 
-  const onClickHandler = (e: { preventDefault: () => void }) => {
+  const onClickHandler = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
     if (disabled) return;
 
     if (onClick && confirmTitle) {
       props.mainContext.confirm({
-        accept: () => {
+        accept: async () => {
           onClick(e);
-          _navigate();
+          await _navigate();
         },
         title: confirmTitle,
         message: confirmMessage,
@@ -71,10 +71,10 @@ const I18NLink = (props: I18NLinkProps) => {
 
     if (onClick) {
       onClick(e);
-      _navigate();
+      await _navigate();
       return;
     }
-    _navigate();
+    await _navigate();
   };
 
   useEffect(() => {

app/react/I18N/components/I18NMenu.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-multi-comp */
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Location, useLocation } from 'react-router-dom';
+import { Location, useLocation } from 'react-router';
 import { useAtom, useAtomValue } from 'jotai';
 import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
 import { LanguagesListSchema } from 'shared/types/commonTypes';
-import { NeedAuthorization } from 'V2/Components/UI';
+import { Translate, t } from 'app/I18N';
 import { useOnClickOutsideElement } from 'app/utils/useOnClickOutsideElementHook';
+import { NeedAuthorization } from 'V2/Components/UI';
 import { inlineEditAtom, localeAtom, settingsAtom, userAtom } from 'V2/atoms';
-import { Translate, t } from 'app/I18N';
 
 const locationSearch = (location: Location) => {
   const cleanSearch = location.search.split(/page=\d+|&page=\d+/).join('');

app/react/I18N/components/specs/I18NLink.spec.js

@@ -4,8 +4,8 @@
 /* eslint-disable max-statements */
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import { I18NLink } from '../I18NLink';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 
 describe('I18NLink', () => {
   let props;

app/react/I18N/components/specs/I18NMenu.spec.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { act, fireEvent, RenderResult, screen, render } from '@testing-library/react';
-import { Location, MemoryRouter } from 'react-router-dom';
+import { Location, MemoryRouter } from 'react-router';
 import { createStore, Provider } from 'jotai';
 import { ClientUserSchema } from 'app/apiResponseTypes';
 import { inlineEditAtom, localeAtom, settingsAtom, userAtom } from 'V2/atoms';

app/react/I18N/specs/I18NLinkV2.spec.tsx

@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { render, RenderResult } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { TestAtomStoreProvider } from 'V2/testing';
 import { localeAtom } from 'V2/atoms';
 import { I18NLink } from '../I18NLinkV2';

app/react/Layout/CurrentLocationLink.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 
 const validProps = props => {
   const { to, ...valid } = props;

app/react/Layout/DocumentsList.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { toUrlParams } from 'shared/JSONRequest';
 import rison from 'rison-node';
 import { SearchBar } from 'app/Library/components/SearchBar';

app/react/Layout/specs/CurrentLocationLink.spec.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { CurrentLocationLink } from '../CurrentLocationLink';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: () => ({ pathname: 'pathanem', search: 'param=value&param2=value2' }),
 }));
 

app/react/Library/Library.js

@@ -1,15 +1,13 @@
 import React from 'react';
+import { Outlet, matchPath } from 'react-router';
 import RouteHandler from 'app/App/RouteHandler';
 import { actions } from 'app/BasicReducer';
 import { enterLibrary, unsetDocuments, zoomIn, zoomOut } from 'app/Library/actions/libraryActions';
-import DocumentsList from 'app/Library/components/DocumentsList';
-import { requestState } from 'app/Library/helpers/requestState';
-import LibraryLayout from 'app/Library/LibraryLayout';
 import { wrapDispatch } from 'app/Multireducer';
 import { withRouter } from 'app/componentWrappers';
-import { trackPage } from 'app/App/GoogleAnalytics';
+import { routes as appRoutes } from 'app/appRoutes';
 
-class Library extends RouteHandler {
+class LibraryRootComponent extends RouteHandler {
   constructor(props, context) {
     super(props, context);
     this.superComponentWillReceiveProps = super.componentWillReceiveProps;
@@ -22,26 +20,51 @@ class Library extends RouteHandler {
     this.state = { scrollCount: 0 };
   }
 
-  static async requestState(requestParams, globalResources) {
-    return requestState(requestParams, globalResources);
-  }
-
   urlHasChanged(nextProps) {
     const nextSearchParams = new URLSearchParams(nextProps.location.search);
     const currentSearchParams = new URLSearchParams(this.props.location.search);
     return nextSearchParams.get('q') !== currentSearchParams.get('q');
   }
 
-  componentWillUnmount() {
-    this.emptyState();
-  }
-
   componentDidUpdate(prevProps) {
     if (this.urlHasChanged(prevProps)) {
       this.getClientState(this.props);
     }
   }
 
+  findMatchingRoute = (pathname, routes, parentPath = '') => {
+    let result = null;
+
+    routes.every(route => {
+      if (result !== null) {
+        return false;
+      }
+
+      const currentPath = `${parentPath}/${route.path || ''}`.replace('//', '/');
+      const match = matchPath({ path: currentPath, end: false }, pathname);
+
+      if (match) {
+        if (currentPath === pathname && route.handle?.library) result = route;
+
+        if (route.children) {
+          const childMatch = this.findMatchingRoute(pathname, route.children, currentPath);
+          if (childMatch) result = childMatch;
+        }
+      }
+      return true;
+    });
+
+    return result;
+  };
+
+  componentWillUnmount() {
+    const nextLocation = window?.location?.pathname;
+    const matchedRoute = this.findMatchingRoute(nextLocation, appRoutes);
+    if (!matchedRoute && !nextLocation.includes('library')) {
+      this.emptyState();
+    }
+  }
+
   emptyState() {
     wrapDispatch(this.context.store.dispatch, 'library')(unsetDocuments());
     actions.set('library.sidepanel.quickLabelState', {});
@@ -56,26 +79,19 @@ class Library extends RouteHandler {
   }
 
   render() {
-    trackPage();
-    return (
-      <LibraryLayout
-        sidePanelMode={this.props.sidePanelMode}
-        scrollCallback={this.scrollCallback}
-        scrollCount={this.state.scrollCount}
-      >
-        <DocumentsList
-          storeKey="library"
-          CollectionViewer={this.props.viewer}
-          zoomIn={this.zoomIn}
-          zoomOut={this.zoomOut}
-          scrollCount={this.state.scrollCount}
-        />
-      </LibraryLayout>
-    );
+    if (this.props.children) {
+      return this.props.children;
+    }
+
+    return <Outlet />;
   }
 }
 
-const SSRLibrary = withRouter(Library);
+const SSRLibrary = withRouter(LibraryRootComponent);
+
+export const LibraryRoot = Object.assign(SSRLibrary, {
+  requestState: LibraryRootComponent.requestState,
+});
 
-export const LibraryCards = Object.assign(SSRLibrary, { requestState: Library.requestState });
-export default Library;
+export { LibraryRootComponent };
+export default LibraryRoot;

app/react/Library/LibraryCards.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LibraryRootComponent } from 'app/Library/Library';
+import LibraryLayout from 'app/Library/LibraryLayout';
+import DocumentsList from 'app/Library/components/DocumentsList';
+import { withRouter } from 'app/componentWrappers';
+import { trackPage } from 'app/App/GoogleAnalytics';
+import { requestState } from 'app/Library/helpers/requestState';
+
+class LibraryCardsComponent extends LibraryRootComponent {
+  static async requestState(requestParams, globalResources) {
+    return requestState(requestParams, globalResources);
+  }
+
+  render() {
+    trackPage();
+    return (
+      <LibraryLayout
+        sidePanelMode={this.props.sidePanelMode}
+        scrollCallback={this.scrollCallback}
+        scrollCount={this.state.scrollCount}
+      >
+        <DocumentsList
+          storeKey="library"
+          CollectionViewer={this.props.viewer}
+          zoomIn={this.zoomIn}
+          zoomOut={this.zoomOut}
+          scrollCount={this.state.scrollCount}
+        />
+      </LibraryLayout>
+    );
+  }
+}
+
+const SSRLibraryComponent = withRouter(LibraryCardsComponent);
+
+const LibraryCards = Object.assign(SSRLibraryComponent, {
+  requestState: LibraryCardsComponent.requestState,
+});
+
+export { LibraryCardsComponent };
+export { LibraryCards };

app/react/Library/LibraryMap.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { withRouter } from 'app/componentWrappers';
 import { requestState } from 'app/Library/helpers/requestState';
 import { MapView } from 'app/Library/components/MapView';
+import { LibraryRootComponent } from 'app/Library/Library';
 import LibraryLayout from 'app/Library/LibraryLayout';
-import Library from 'app/Library/Library';
 import LibraryModeToggleButtons from 'app/Library/components/LibraryModeToggleButtons';
 import { trackPage } from 'app/App/GoogleAnalytics';
 
-class LibraryMapComponent extends Library {
+class LibraryMapComponent extends LibraryRootComponent {
   static async requestState(requestParams, globalResources) {
     return requestState(requestParams, globalResources, { geolocation: true });
   }

app/react/Library/LibraryTable.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { TableViewer } from 'app/Layout/TableViewer';
-import Library from 'app/Library/Library';
+import { LibraryRootComponent } from 'app/Library/Library';
 import LibraryLayout from 'app/Library/LibraryLayout';
 import DocumentsList from 'app/Library/components/DocumentsList';
 import { requestState } from 'app/Library/helpers/requestState';
 import { withRouter } from 'app/componentWrappers';
 import { trackPage } from 'app/App/GoogleAnalytics';
 
-class LibraryTableComponent extends Library {
+class LibraryTableComponent extends LibraryRootComponent {
   static async requestState(requestParams, globalResources) {
     return requestState(requestParams, globalResources, { calculateTableColumns: true });
   }