refactor(router): sw-625 remove react-router

cdcabrera · Sep 26, 2024 · a139cf2 · a139cf2
1 parent 0554de3
commit a139cf2
Show file tree

Hide file tree

Showing 27 changed files with 169 additions and 634 deletions.
diff --git a/config/jest.setupTests.js b/config/jest.setupTests.js
@@ -56,14 +56,6 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn()
 }));
 
-/**
- * Emulate react router dom useLocation
- */
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({ hash: '', search: '' })
-}));
-
 /**
  * Add the displayName property to function based components. Makes sure that snapshot tests have named components
  * instead of displaying a generic "<Component.../>".

diff --git a/package.json b/package.json
@@ -105,8 +105,6 @@
     "react-dom": "18.2.0",
     "react-i18next": "^15.0.1",
     "react-redux": "^9.1.2",
-    "react-router": "6.26.2",
-    "react-router-dom": "6.26.2",
     "react-use": "^17.5.1",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",

diff --git a/src/app.js b/src/app.js
@@ -4,9 +4,10 @@ import { useMount } from 'react-use';
 import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
 import { reduxActions, storeHooks } from './redux';
 import { I18n } from './components/i18n/i18n';
-import { Router } from './components/router';
 import Authentication from './components/authentication/authentication';
 import { helpers } from './common';
+import { Loader } from './components/loader/loader';
+const ProductView = React.lazy(() => import('./components/productView/productView'));
 
 /**
  * @memberof Base
@@ -47,7 +48,9 @@ const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSe
     <I18n locale={locale}>
       {platformNotifications}
       <Authentication>
-        <Router />
+        <React.Suspense fallback={<Loader variant="title" />}>
+          <ProductView />
+        </React.Suspense>
       </Authentication>
     </I18n>
   );

diff --git a/src/components/README.md b/src/components/README.md
@@ -127,9 +127,6 @@ recreate the core component.
 <dd></dd>
 <dt><a href="#ProductView.module_ProductViewMissing">ProductViewMissing</a></dt>
 <dd></dd>
-<dt><a href="#Components.module_Router">Router</a></dt>
-<dd><p>Route component loader.</p>
-</dd>
 <dt><a href="#Router.module_RouterContext">RouterContext</a></dt>
 <dd></dd>
 <dt><a href="#Router.module_RouterHelpers">RouterHelpers</a></dt>
@@ -623,6 +620,7 @@ Default props.
 Allow, and return, SVG compatible HTML for axis labels.
 
 **Kind**: inner method of [<code>ChartAxisLabel</code>](#Chart.module_ChartAxisLabel)  
+**Returns**: <code>function</code> - s  
 <table>
   <thead>
     <tr>
@@ -5193,90 +5191,22 @@ On click, update history.
     </tr>  </tbody>
 </table>
 
-<a name="Components.module_Router"></a>
-
-## Router
-Route component loader.
-
-**Properties**
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th><th>Type</th>
-    </tr>
-  </thead>
-  <tbody>
-<tr>
-    <td>RouterContext</td><td><code>module</code></td>
-    </tr><tr>
-    <td>RouterHelpers</td><td><code>module</code></td>
-    </tr>  </tbody>
-</table>
-
-
-* [Router](#Components.module_Router)
-    * [~Router(props)](#Components.module_Router..Router) ⇒ <code>React.ReactNode</code>
-        * [.propTypes](#Components.module_Router..Router.propTypes) : <code>Object</code>
-        * [.defaultProps](#Components.module_Router..Router.defaultProps) : <code>Object</code>
-
-<a name="Components.module_Router..Router"></a>
-
-### Router~Router(props) ⇒ <code>React.ReactNode</code>
-Create and load routes. Start cycle for loading product configuration via hook by setting route details.
-
-**Kind**: inner method of [<code>Router</code>](#Components.module_Router)  
-<table>
-  <thead>
-    <tr>
-      <th>Param</th><th>Type</th>
-    </tr>
-  </thead>
-  <tbody>
-<tr>
-    <td>props</td><td><code>object</code></td>
-    </tr><tr>
-    <td>props.redirectRoute</td><td><code>object</code></td>
-    </tr><tr>
-    <td>props.routes</td><td><code>Array</code></td>
-    </tr><tr>
-    <td>props.useSetRouteDetail</td><td><code>function</code></td>
-    </tr>  </tbody>
-</table>
-
-
-* [~Router(props)](#Components.module_Router..Router) ⇒ <code>React.ReactNode</code>
-    * [.propTypes](#Components.module_Router..Router.propTypes) : <code>Object</code>
-    * [.defaultProps](#Components.module_Router..Router.defaultProps) : <code>Object</code>
-
-<a name="Components.module_Router..Router.propTypes"></a>
-
-#### Router.propTypes : <code>Object</code>
-Prop types.
-
-**Kind**: static property of [<code>Router</code>](#Components.module_Router..Router)  
-<a name="Components.module_Router..Router.defaultProps"></a>
-
-#### Router.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>Router</code>](#Components.module_Router..Router)  
 <a name="Router.module_RouterContext"></a>
 
 ## RouterContext
 
 * [RouterContext](#Router.module_RouterContext)
     * [~useLocation(options)](#Router.module_RouterContext..useLocation) ⇒ <code>Object</code>
     * [~useNavigate(options)](#Router.module_RouterContext..useNavigate) ⇒ <code>function</code>
+    * [~useSetRouteDetail(options)](#Router.module_RouterContext..useSetRouteDetail) ⇒ <code>\*</code> \| <code>string</code>
     * [~useRouteDetail(options)](#Router.module_RouterContext..useRouteDetail) ⇒ <code>Object</code>
     * [~useSearchParams(options)](#Router.module_RouterContext..useSearchParams) ⇒ <code>Array</code>
         * [~setSearchParams](#Router.module_RouterContext..useSearchParams..setSearchParams)
-    * [~useSetRouteDetail(options)](#Router.module_RouterContext..useSetRouteDetail) ⇒ <code>\*</code> \| <code>string</code>
 
 <a name="Router.module_RouterContext..useLocation"></a>
 
 ### RouterContext~useLocation(options) ⇒ <code>Object</code>
-Combine react-router-dom useLocation with actual window location.
+Combine react-use useLocation with actual window location.
 Focused on exposing replace and href.
 
 **Kind**: inner method of [<code>RouterContext</code>](#Router.module_RouterContext)  
@@ -5317,7 +5247,35 @@ update. Dispatches the same type leveraged by the initialize hook, useSetRouteDe
     </tr><tr>
     <td>options.useLocation</td><td><code>function</code></td>
     </tr><tr>
-    <td>options.useNavigate</td><td><code>function</code></td>
+    <td>options.windowHistory</td><td><code>*</code></td>
+    </tr>  </tbody>
+</table>
+
+<a name="Router.module_RouterContext..useSetRouteDetail"></a>
+
+### RouterContext~useSetRouteDetail(options) ⇒ <code>\*</code> \| <code>string</code>
+Initialize and store product path, parameter, in a "state" update parallel to routing.
+We're opting to use "window.location.pathname" directly since it appears to be quicker,
+and returns a similar structured value as useParam.
+
+**Kind**: inner method of [<code>RouterContext</code>](#Router.module_RouterContext)  
+<table>
+  <thead>
+    <tr>
+      <th>Param</th><th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+<tr>
+    <td>options</td><td><code>object</code></td>
+    </tr><tr>
+    <td>options.useSelector</td><td><code>function</code></td>
+    </tr><tr>
+    <td>options.useDispatch</td><td><code>function</code></td>
+    </tr><tr>
+    <td>options.useLocation</td><td><code>function</code></td>
+    </tr><tr>
+    <td>options.windowLocation</td><td><code>*</code></td>
     </tr>  </tbody>
 </table>
 
@@ -5338,11 +5296,15 @@ configuration context.
 <tr>
     <td>options</td><td><code>object</code></td>
     </tr><tr>
+    <td>options.disableIsClosest</td><td><code>boolean</code></td>
+    </tr><tr>
     <td>options.t</td><td><code>function</code></td>
     </tr><tr>
     <td>options.useChrome</td><td><code>function</code></td>
     </tr><tr>
     <td>options.useSelectors</td><td><code>function</code></td>
+    </tr><tr>
+    <td>options.useSetRouteDetail</td><td><code>function</code></td>
     </tr>  </tbody>
 </table>
 
@@ -5364,7 +5326,7 @@ Search parameter, return
     </tr><tr>
     <td>options.useLocation</td><td><code>function</code></td>
     </tr><tr>
-    <td>options.useSearchParams</td><td><code>function</code></td>
+    <td>options.windowHistory</td><td><code>*</code></td>
     </tr>  </tbody>
 </table>
 
@@ -5395,64 +5357,23 @@ This hook defaults to merging search objects instead of overwriting them.
     </tr>  </tbody>
 </table>
 
-<a name="Router.module_RouterContext..useSetRouteDetail"></a>
-
-### RouterContext~useSetRouteDetail(options) ⇒ <code>\*</code> \| <code>string</code>
-Initialize and store product path, parameter, in a "state" update parallel to routing.
-We're opting to use "window.location.pathname" directly since it appears to be quicker,
-and returns a similar structured value as useParam.
-
-**Kind**: inner method of [<code>RouterContext</code>](#Router.module_RouterContext)  
-<table>
-  <thead>
-    <tr>
-      <th>Param</th><th>Type</th>
-    </tr>
-  </thead>
-  <tbody>
-<tr>
-    <td>options</td><td><code>object</code></td>
-    </tr><tr>
-    <td>options.useSelector</td><td><code>function</code></td>
-    </tr><tr>
-    <td>options.useDispatch</td><td><code>function</code></td>
-    </tr><tr>
-    <td>options.windowLocation</td><td><code>*</code></td>
-    </tr>  </tbody>
-</table>
-
 <a name="Router.module_RouterHelpers"></a>
 
 ## RouterHelpers
 
 * [RouterHelpers](#Router.module_RouterHelpers)
     * [~appName](#Router.module_RouterHelpers..appName) : <code>string</code>
-    * [~redirectRoute](#Router.module_RouterHelpers..redirectRoute) : <code>object</code>
-    * [~routes](#Router.module_RouterHelpers..routes) ⇒ <code>Array</code>
     * [~getRouteConfigByPath](#Router.module_RouterHelpers..getRouteConfigByPath) ⇒ <code>Object</code>
     * [~parseSearchParams](#Router.module_RouterHelpers..parseSearchParams) ⇒ <code>Object</code>
     * [~pathJoin](#Router.module_RouterHelpers..pathJoin) ⇒ <code>string</code>
     * [~dynamicBaseName(params)](#Router.module_RouterHelpers..dynamicBaseName) ⇒ <code>string</code>
     * [~dynamicBasePath(params)](#Router.module_RouterHelpers..dynamicBasePath) ⇒ <code>string</code>
-    * [~importView(component)](#Router.module_RouterHelpers..importView) ⇒ <code>Node</code>
 
 <a name="Router.module_RouterHelpers..appName"></a>
 
 ### RouterHelpers~appName : <code>string</code>
 Platform name/id.
 
-**Kind**: inner constant of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)  
-<a name="Router.module_RouterHelpers..redirectRoute"></a>
-
-### RouterHelpers~redirectRoute : <code>object</code>
-The first redirect route.
-
-**Kind**: inner constant of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)  
-<a name="Router.module_RouterHelpers..routes"></a>
-
-### RouterHelpers~routes ⇒ <code>Array</code>
-Return array of objects that describes routing.
-
 **Kind**: inner constant of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)  
 <a name="Router.module_RouterHelpers..getRouteConfigByPath"></a>
 
@@ -5560,24 +5481,6 @@ App basePath. Return a base path.
     </tr>  </tbody>
 </table>
 
-<a name="Router.module_RouterHelpers..importView"></a>
-
-### RouterHelpers~importView(component) ⇒ <code>Node</code>
-Import a route component.
-
-**Kind**: inner method of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)  
-<table>
-  <thead>
-    <tr>
-      <th>Param</th><th>Type</th>
-    </tr>
-  </thead>
-  <tbody>
-<tr>
-    <td>component</td><td><code>Node</code></td>
-    </tr>  </tbody>
-</table>
-
 <a name="Components.module_Table"></a>
 
 ## Table

diff --git a/src/components/productView/__tests__/__snapshots__/productViewMissing.test.js.snap b/src/components/productView/__tests__/__snapshots__/productViewMissing.test.js.snap
@@ -14,20 +14,9 @@ exports[`ProductViewMissing Component should render a basic component: basic 1`]
   "store": {},
   "children": [
     {
-      "displayName": "MemoryRouter",
+      "displayName": "ProductViewMissing",
       "props": {
-        "initialEntries": [
-          "/"
-        ],
-        "children": {
-          "key": null,
-          "ref": null,
-          "props": {
-            "availableProductsRedirect": 1
-          },
-          "_owner": null,
-          "_store": {}
-        }
+        "availableProductsRedirect": 1
       }
     }
   ]

diff --git a/src/components/productView/__tests__/productViewMissing.test.js b/src/components/productView/__tests__/productViewMissing.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 import { ProductViewMissing } from '../productViewMissing';
 import { store } from '../../../redux';
 
@@ -12,9 +11,7 @@ describe('ProductViewMissing Component', () => {
 
     const component = renderComponent(
       <Provider store={store}>
-        <MemoryRouter initialEntries={['/']}>
-          <ProductViewMissing {...props} />
-        </MemoryRouter>
+        <ProductViewMissing {...props} />
       </Provider>
     );
 

diff --git a/src/components/productView/productView.js b/src/components/productView/productView.js
@@ -11,6 +11,7 @@ import InventoryTabs, { InventoryTab } from '../inventoryTabs/inventoryTabs';
 import { InventoryCardInstances } from '../inventoryCardInstances/inventoryCardInstances';
 import { InventoryCardSubscriptions } from '../inventoryCardSubscriptions/inventoryCardSubscriptions';
 import { translate } from '../i18n/i18n';
+import { ProductViewMissing } from './productViewMissing';
 
 /**
  * Primary product display component, and config context provider.
@@ -33,7 +34,7 @@ import { translate } from '../i18n/i18n';
  * @returns {React.ReactNode}
  */
 const ProductView = ({ t, useRouteDetail: useAliasRouteDetail }) => {
-  const { firstMatch, productGroup } = useAliasRouteDetail();
+  const { disableIsClosest, firstMatch, productGroup } = useAliasRouteDetail();
 
   const renderProduct = useCallback(() => {
     const updated = config => {
@@ -85,6 +86,10 @@ const ProductView = ({ t, useRouteDetail: useAliasRouteDetail }) => {
     return updated(firstMatch);
   }, [firstMatch, t]);
 
+  if (disableIsClosest) {
+    return <ProductViewMissing />;
+  }
+
   return (
     (productGroup && (
       <PageLayout>

diff --git a/src/components/productView/productViewMissing.js b/src/components/productView/productViewMissing.js
@@ -87,6 +87,7 @@ const ProductViewMissing = ({
                   variant="link"
                   isInline
                   onClick={event => {
+                    event.stopPropagation();
                     event.preventDefault();
                     onNavigate(productPath);
                   }}