From cde4448d7284a02383ec8beb6ca69d80960af4b3 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Mon, 6 Feb 2023 16:08:51 -0500 Subject: [PATCH] refactor(useRouter): sw-625 combine routerContext (#1045) --- .../authentication/authenticationContext.js | 5 +- src/components/productView/productView.js | 4 +- .../productView/productViewMissing.js | 5 +- .../__snapshots__/routerContext.test.js.snap | 21 ++++++++ .../router/__tests__/routerContext.test.js | 17 ++++++- src/components/router/index.js | 3 +- src/components/router/routerContext.js | 50 +++++++++++++++++-- .../__snapshots__/useRouter.test.js.snap | 28 ----------- src/hooks/__tests__/useRouter.test.js | 22 -------- src/hooks/useRouter.js | 40 --------------- 10 files changed, 92 insertions(+), 103 deletions(-) delete mode 100644 src/hooks/__tests__/__snapshots__/useRouter.test.js.snap delete mode 100644 src/hooks/__tests__/useRouter.test.js delete mode 100644 src/hooks/useRouter.js diff --git a/src/components/authentication/authenticationContext.js b/src/components/authentication/authenticationContext.js index 252d8c0c9..0709343c2 100644 --- a/src/components/authentication/authenticationContext.js +++ b/src/components/authentication/authenticationContext.js @@ -1,9 +1,8 @@ import React, { useContext, useState } from 'react'; import { useMount, useUnmount } from 'react-use'; import { reduxActions, storeHooks } from '../../redux'; -import { routerHooks } from '../../hooks/useRouter'; import { helpers } from '../../common'; -import { routerHelpers } from '../router'; +import { routerContext, routerHelpers } from '../router'; /** * Base context. @@ -44,7 +43,7 @@ const useGetAuthorization = ({ onNavigation = reduxActions.platform.onNavigation, setAppName = reduxActions.platform.setAppName, useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch, - useHistory: useAliasHistory = routerHooks.useHistory, + useHistory: useAliasHistory = routerContext.useHistory, useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse } = {}) => { const [unregister, setUnregister] = useState(() => helpers.noop); diff --git a/src/components/productView/productView.js b/src/components/productView/productView.js index 36732bab0..d448b13e3 100644 --- a/src/components/productView/productView.js +++ b/src/components/productView/productView.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useRouteDetail } from '../../hooks/useRouter'; +import { routerContext } from '../router'; import { ProductViewContext } from './productViewContext'; import { PageLayout, PageHeader, PageSection, PageToolbar, PageMessages, PageColumns } from '../pageLayout/pageLayout'; import { GraphCard } from '../graphCard/graphCard'; @@ -112,7 +112,7 @@ ProductView.propTypes = { */ ProductView.defaultProps = { t: translate, - useRouteDetail + useRouteDetail: routerContext.useRouteDetail }; export { ProductView as default, ProductView }; diff --git a/src/components/productView/productViewMissing.js b/src/components/productView/productViewMissing.js index 82b6316e0..0b68816c3 100644 --- a/src/components/productView/productViewMissing.js +++ b/src/components/productView/productViewMissing.js @@ -4,8 +4,7 @@ import { Button, Card, CardBody, CardFooter, CardTitle, Gallery, Title, PageSect import { ArrowRightIcon } from '@patternfly/react-icons'; import { useMount } from 'react-use'; import { PageLayout, PageHeader } from '../pageLayout/pageLayout'; -import { routerHelpers } from '../router'; -import { routerHooks } from '../../hooks/useRouter'; +import { routerContext, routerHelpers } from '../router'; import { helpers } from '../../common'; import { translate } from '../i18n/i18n'; @@ -111,7 +110,7 @@ ProductViewMissing.propTypes = { ProductViewMissing.defaultProps = { availableProductsRedirect: 4, t: translate, - useHistory: routerHooks.useHistory + useHistory: routerContext.useHistory }; export { ProductViewMissing as default, ProductViewMissing }; diff --git a/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap b/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap index fb94f13f7..90f4befdf 100644 --- a/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap @@ -6,6 +6,23 @@ exports[`RouterContext should apply a hook for return routeDetail: route details } `; +exports[`RouterContext should apply a hook for useHistory: history push 1`] = ` +[ + [ + "/dolor/sit", + undefined, + ], + [ + "/rhel", + undefined, + ], + [ + "/rhel", + undefined, + ], +] +`; + exports[`RouterContext should return specific properties: specific properties 1`] = ` { "DEFAULT_CONTEXT": [ @@ -57,7 +74,11 @@ exports[`RouterContext should return specific properties: specific properties 1` ], "_threadCount": 0, }, + "useHistory": [Function], + "useLocation": [Function], + "useParams": [Function], "useRouteDetail": [Function], + "useRouteMatch": [Function], "useRouterContext": [Function], } `; diff --git a/src/components/router/__tests__/routerContext.test.js b/src/components/router/__tests__/routerContext.test.js index a3c1f9898..2b5d7fa0c 100644 --- a/src/components/router/__tests__/routerContext.test.js +++ b/src/components/router/__tests__/routerContext.test.js @@ -1,4 +1,4 @@ -import { context, useRouteDetail } from '../routerContext'; +import { context, useHistory, useRouteDetail } from '../routerContext'; describe('RouterContext', () => { it('should return specific properties', () => { @@ -16,4 +16,19 @@ describe('RouterContext', () => { const { result } = shallowHook(() => useRouteDetail({ useRouterContext: mockUseRouterContext })); expect(result).toMatchSnapshot('route details'); }); + + it('should apply a hook for useHistory', () => { + const mockHistoryPush = jest.fn(); + const { result: mockUseHistory } = shallowHook(() => + useHistory({ + useHistory: () => ({ push: mockHistoryPush }) + }) + ); + + mockUseHistory.push('/dolor/sit'); + mockUseHistory.push('rhel'); + mockUseHistory.push('insights'); + + expect(mockHistoryPush.mock.calls).toMatchSnapshot('history push'); + }); }); diff --git a/src/components/router/index.js b/src/components/router/index.js index 493436635..e3e6354d6 100644 --- a/src/components/router/index.js +++ b/src/components/router/index.js @@ -1,5 +1,6 @@ import { Redirect } from './redirect'; import { Router } from './router'; +import { context as routerContext } from './routerContext'; import { routerHelpers } from './routerHelpers'; -export { Redirect, Router, routerHelpers }; +export { Redirect, Router, routerContext, routerHelpers }; diff --git a/src/components/router/routerContext.js b/src/components/router/routerContext.js index 530c5063e..3ab07f12e 100644 --- a/src/components/router/routerContext.js +++ b/src/components/router/routerContext.js @@ -1,4 +1,6 @@ import React, { useContext } from 'react'; +import { useHistory as useHistoryRRD, useLocation, useParams, useRouteMatch } from 'react-router-dom'; +import { routerHelpers } from './routerHelpers'; import { helpers } from '../../common/helpers'; /** @@ -32,11 +34,53 @@ const useRouteDetail = ({ useRouterContext: useAliasRouterContext = useRouterCon return routeDetail; }; +/** + * Pass useHistory methods. Proxy useHistory push with Platform specific navigation update. + * + * @param {object} options + * @param {Function} options.useHistory + * @returns {object} + */ +const useHistory = ({ useHistory: useAliasHistory = useHistoryRRD } = {}) => { + const history = useAliasHistory(); + + return { + ...history, + push: (pathLocation, historyState) => { + const pathName = (typeof pathLocation === 'string' && pathLocation) || pathLocation?.pathname; + const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName }); + const { hash, search } = window.location; + + return history?.push( + (firstMatch?.productPath && `${routerHelpers.pathJoin('/', firstMatch?.productPath)}${search}${hash}`) || + (pathName && `${pathName}${search}${hash}`) || + pathLocation, + historyState + ); + } + }; +}; + const context = { RouterContext, DEFAULT_CONTEXT, - useRouterContext, - useRouteDetail + useHistory, + useLocation, + useParams, + useRouteDetail, + useRouteMatch, + useRouterContext }; -export { context as default, context, RouterContext, DEFAULT_CONTEXT, useRouterContext, useRouteDetail }; +export { + context as default, + context, + RouterContext, + DEFAULT_CONTEXT, + useHistory, + useLocation, + useParams, + useRouteDetail, + useRouteMatch, + useRouterContext +}; diff --git a/src/hooks/__tests__/__snapshots__/useRouter.test.js.snap b/src/hooks/__tests__/__snapshots__/useRouter.test.js.snap deleted file mode 100644 index c4968dad7..000000000 --- a/src/hooks/__tests__/__snapshots__/useRouter.test.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`useRouter should apply a hook for useHistory: history push 1`] = ` -[ - [ - "/dolor/sit", - undefined, - ], - [ - "/rhel", - undefined, - ], - [ - "/rhel", - undefined, - ], -] -`; - -exports[`useRouter should return specific properties: specific properties 1`] = ` -{ - "useHistory": [Function], - "useLocation": [Function], - "useParams": [Function], - "useRouteDetail": [Function], - "useRouteMatch": [Function], -} -`; diff --git a/src/hooks/__tests__/useRouter.test.js b/src/hooks/__tests__/useRouter.test.js deleted file mode 100644 index dc3ad3db6..000000000 --- a/src/hooks/__tests__/useRouter.test.js +++ /dev/null @@ -1,22 +0,0 @@ -import { routerHooks, useHistory } from '../useRouter'; - -describe('useRouter', () => { - it('should return specific properties', () => { - expect(routerHooks).toMatchSnapshot('specific properties'); - }); - - it('should apply a hook for useHistory', () => { - const mockHistoryPush = jest.fn(); - const { result: mockUseHistory } = shallowHook(() => - useHistory({ - useHistory: () => ({ push: mockHistoryPush }) - }) - ); - - mockUseHistory.push('/dolor/sit'); - mockUseHistory.push('rhel'); - mockUseHistory.push('insights'); - - expect(mockHistoryPush.mock.calls).toMatchSnapshot('history push'); - }); -}); diff --git a/src/hooks/useRouter.js b/src/hooks/useRouter.js deleted file mode 100644 index 343fdba59..000000000 --- a/src/hooks/useRouter.js +++ /dev/null @@ -1,40 +0,0 @@ -import { useHistory as useHistoryRRD, useLocation, useParams, useRouteMatch } from 'react-router-dom'; -import { useRouteDetail } from '../components/router/routerContext'; -import { routerHelpers } from '../components/router/routerHelpers'; - -/** - * Pass useHistory methods. Proxy useHistory push with Platform specific navigation update. - * - * @param {object} options - * @param {Function} options.useHistory - * @returns {object} - */ -const useHistory = ({ useHistory: useAliasHistory = useHistoryRRD } = {}) => { - const history = useAliasHistory(); - - return { - ...history, - push: (pathLocation, historyState) => { - const pathName = (typeof pathLocation === 'string' && pathLocation) || pathLocation?.pathname; - const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName }); - const { hash, search } = window.location; - - return history?.push( - (firstMatch?.productPath && `${routerHelpers.pathJoin('/', firstMatch?.productPath)}${search}${hash}`) || - (pathName && `${pathName}${search}${hash}`) || - pathLocation, - historyState - ); - } - }; -}; - -const routerHooks = { - useHistory, - useLocation, - useParams, - useRouteDetail, - useRouteMatch -}; - -export { routerHooks as default, routerHooks, useHistory, useLocation, useParams, useRouteDetail, useRouteMatch };