refactor(routerContext): sw-625 useLocation hook (RedHatInsights#989)

* routerContext, useLocation hook

src/components/router/__tests__/__snapshots__/routerContext.test.js.snap

@@ -23,6 +23,24 @@ exports[`RouterContext should apply a hook for useHistory: history push 1`] = `
 ]
 `;
 
+exports[`RouterContext should apply a hook for useLocation: location 1`] = `
+{
+  "assign": [Function],
+  "hash": "",
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": undefined,
+  "origin": "http://localhost",
+  "pathname": "/",
+  "port": "",
+  "protocol": "http:",
+  "reload": [Function],
+  "replace": [Function],
+  "search": "?lorem=ipsum",
+  "toString": [Function],
+}
+`;
+
 exports[`RouterContext should return specific properties: specific properties 1`] = `
 {
   "DEFAULT_CONTEXT": [

src/components/router/__tests__/routerContext.test.js

@@ -1,4 +1,4 @@
-import { context, useHistory, useRouteDetail } from '../routerContext';
+import { context, useHistory, useLocation, useRouteDetail } from '../routerContext';
 
 describe('RouterContext', () => {
   it('should return specific properties', () => {
@@ -31,4 +31,13 @@ describe('RouterContext', () => {
 
     expect(mockHistoryPush.mock.calls).toMatchSnapshot('history push');
   });
+
+  it('should apply a hook for useLocation', async () => {
+    const mockLocation = {
+      search: '?lorem=ipsum'
+    };
+
+    const { result: mockUseLocation } = await shallowHook(() => useLocation({ useLocation: () => mockLocation }));
+    expect(mockUseLocation).toMatchSnapshot('location');
+  });
 });

src/components/router/routerContext.js

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import { useHistory as useHistoryRRD, useLocation, useParams, useRouteMatch } from 'react-router-dom';
+import React, { useContext, useMemo } from 'react';
+import { useHistory as useHistoryRRD, useLocation as useLocationRRD, useParams, useRouteMatch } from 'react-router-dom';
 import { routerHelpers } from './routerHelpers';
 import { helpers } from '../../common/helpers';
 
@@ -61,6 +61,32 @@ const useHistory = ({ useHistory: useAliasHistory = useHistoryRRD } = {}) => {
   };
 };
 
+/**
+ * Combine react-router-dom useLocation with actual window location.
+ * Focused on exposing replace and href.
+ *
+ * @param {Function} useLocation
+ * @returns {{search, replace: Function, href, hash}}
+ */
+const useLocation = ({ useLocation: useAliasLocation = useLocationRRD } = {}) => {
+  const location = useAliasLocation();
+  const { location: windowLocation } = window;
+
+  return useMemo(
+    () => ({
+      ...location,
+      ...windowLocation,
+      replace: path => windowLocation.replace(path),
+      hash: location?.hash || '',
+      set href(path) {
+        windowLocation.href = path;
+      },
+      search: location?.search || ''
+    }),
+    [location, windowLocation]
+  );
+};
+
 const context = {
   RouterContext,
   DEFAULT_CONTEXT,