Skip to content

Commit

Permalink
refactor(router): sw-625 remove react-router
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 28, 2024
1 parent 0554de3 commit d65d521
Show file tree
Hide file tree
Showing 34 changed files with 852 additions and 1,026 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
171 changes: 37 additions & 134 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 @@ -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>
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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
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 d65d521

Please sign in to comment.