refactor(useRouter): sw-625 combine routerContext (#1045)

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);

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 };

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 };

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],
 }
 `;

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');
+  });
 });

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 };

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
+};