Skip to content

Commit

Permalink
refactor: sw-2981 remove react-router
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 30, 2024
1 parent df24f61 commit d252f0b
Show file tree
Hide file tree
Showing 35 changed files with 867 additions and 1,090 deletions.
8 changes: 0 additions & 8 deletions config/jest.setupTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.../>".
Expand Down
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 5 additions & 2 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
);
Expand Down
236 changes: 52 additions & 184 deletions src/components/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -5193,108 +5190,14 @@ 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>
* [~useSetRouteProduct(options)](#Router.module_RouterContext..useSetRouteProduct) ⇒ <code>Object</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.
Focused on exposing replace and href.

**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.useLocation</td><td><code>function</code></td>
</tr><tr>
<td>options.windowLocation</td><td><code>*</code></td>
</tr> </tbody>
</table>

<a name="Router.module_RouterContext..useNavigate"></a>

Expand All @@ -5313,19 +5216,18 @@ update. Dispatches the same type leveraged by the initialize hook, useSetRouteDe
<tr>
<td>options</td><td><code>object</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.useNavigate</td><td><code>function</code></td>
<td>options.windowHistory</td><td><code>*</code></td>
</tr> </tbody>
</table>

<a name="Router.module_RouterContext..useRouteDetail"></a>
<a name="Router.module_RouterContext..useSetRouteProduct"></a>

### RouterContext~useRouteDetail(options) ⇒ <code>Object</code>
Get a route detail from "state". Consume useSetRouteDetail and set basis for product
configuration context.
### RouterContext~useSetRouteProduct(options) ⇒ <code>Object</code>
Initialize and store a product path, parameter, in a "state" update parallel to variant detail.
We're opting to use "window.location.pathname" directly because its faster.
and returns a similar structured value as useParam.

**Kind**: inner method of [<code>RouterContext</code>](#Router.module_RouterContext)
<table>
Expand All @@ -5338,71 +5240,22 @@ configuration context.
<tr>
<td>options</td><td><code>object</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> </tbody>
</table>

<a name="Router.module_RouterContext..useSearchParams"></a>

### RouterContext~useSearchParams(options) ⇒ <code>Array</code>
Search parameter, return

**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>
<td>options.disableIsClosestMatch</td><td><code>boolean</code></td>
</tr><tr>
<td>options.useLocation</td><td><code>function</code></td>
</tr><tr>
<td>options.useSearchParams</td><td><code>function</code></td>
</tr> </tbody>
</table>

<a name="Router.module_RouterContext..useSearchParams..setSearchParams"></a>

#### useSearchParams~setSearchParams
Alias returned React Router Dom useSearchParams hook to something expected.
This hook defaults to merging search objects instead of overwriting them.

**Kind**: inner constant of [<code>useSearchParams</code>](#Router.module_RouterContext..useSearchParams)
<table>
<thead>
<tr>
<th>Param</th><th>Type</th><th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>updatedQuery</td><td><code>object</code></td><td></td>
</tr><tr>
<td>options</td><td><code>object</code></td><td></td>
</tr><tr>
<td>options.isMerged</td><td><code>boolean</code></td><td><p>Merge search with existing search, or don&#39;t</p>
</td>
</tr><tr>
<td>options.currentSearch</td><td><code>string</code> | <code>*</code></td><td><p>search returned from useLocation</p>
</td>
<td>options.useSelector</td><td><code>function</code></td>
</tr> </tbody>
</table>

<a name="Router.module_RouterContext..useSetRouteDetail"></a>
<a name="Router.module_RouterContext..useRouteDetail"></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.
### RouterContext~useRouteDetail(options) ⇒ <code>Object</code>
Aggregate display settings and configuration. Get a product route detail.
Consumes useSetRouteProduct to return a display configuration for use in productView context.

**Kind**: inner method of [<code>RouterContext</code>](#Router.module_RouterContext)
**Returns**: <code>Object</code> - }
<table>
<thead>
<tr>
Expand All @@ -5413,11 +5266,11 @@ and returns a similar structured value as useParam.
<tr>
<td>options</td><td><code>object</code></td>
</tr><tr>
<td>options.useSelector</td><td><code>function</code></td>
<td>options.t</td><td><code>function</code></td>
</tr><tr>
<td>options.useDispatch</td><td><code>function</code></td>
<td>options.useChrome</td><td><code>function</code></td>
</tr><tr>
<td>options.windowLocation</td><td><code>*</code></td>
<td>options.useSetRouteProduct</td><td><code>useSetRouteProduct</code></td>
</tr> </tbody>
</table>

Expand All @@ -5427,32 +5280,19 @@ and returns a similar structured value as useParam.

* [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>
* [~dynamicPath(params)](#Router.module_RouterHelpers..dynamicPath) ⇒ <code>string</code>
* [~cleanPath(params)](#Router.module_RouterHelpers..cleanPath) ⇒ <code>string</code> \| <code>undefined</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>

Expand All @@ -5474,7 +5314,9 @@ given the appropriate alias, group, product, and/or path identifiers provided wi
</tr><tr>
<td>params.pathName</td><td><code>string</code></td>
</tr><tr>
<td>params.configs</td><td><code>Array</code></td>
<td>[params.configs]</td><td><code>Array</code></td>
</tr><tr>
<td>[params.cleanPath]</td><td><code>cleanPath</code></td>
</tr> </tbody>
</table>

Expand Down Expand Up @@ -5560,10 +5402,32 @@ App basePath. Return a base path.
</tr> </tbody>
</table>

<a name="Router.module_RouterHelpers..importView"></a>
<a name="Router.module_RouterHelpers..dynamicPath"></a>

### RouterHelpers~dynamicPath(params) ⇒ <code>string</code>
App basePath. Return a base path.

**Kind**: inner method of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)
<table>
<thead>
<tr>
<th>Param</th><th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>params</td><td><code>object</code></td>
</tr><tr>
<td>params.pathName</td><td><code>string</code></td>
</tr><tr>
<td>params.appName</td><td><code>string</code></td>
</tr> </tbody>
</table>

<a name="Router.module_RouterHelpers..cleanPath"></a>

### RouterHelpers~importView(component) ⇒ <code>Node</code>
Import a route component.
### RouterHelpers~cleanPath(params) ⇒ <code>string</code> \| <code>undefined</code>
Trim, clean, and remove irrelevant strings to help provide more exact product configuration matches.

**Kind**: inner method of [<code>RouterHelpers</code>](#Router.module_RouterHelpers)
<table>
Expand All @@ -5574,7 +5438,11 @@ Import a route component.
</thead>
<tbody>
<tr>
<td>component</td><td><code>Node</code></td>
<td>params</td><td><code>object</code></td>
</tr><tr>
<td>params.pathName</td><td><code>string</code></td>
</tr><tr>
<td>params.appName</td><td><code>string</code></td>
</tr> </tbody>
</table>

Expand Down
2 changes: 1 addition & 1 deletion src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ exports[`I18n Component should generate a predictable locale key output snapshot
"keys": [
{
"key": "curiosity-view.title",
"match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: firstMatch?.productGroup })",
"match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: productGroup })",
},
],
},
Expand Down
Loading

0 comments on commit d252f0b

Please sign in to comment.