DEV stash

RedHatInsights · Feb 23, 2023 · 6dddd45 · 6dddd45
1 parent 55641d4
commit 6dddd45
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 145 deletions.
diff --git a/src/components/productView/productView.js b/src/components/productView/productView.js
@@ -23,7 +23,7 @@ import { storeHooks } from '../../redux';
  * @param {object} props
  * @param {Function} props.t
  * @param {Function} props.useRouteDetail
- * @param props.useSelector
+ * @param {Function} props.useSelector
  * @returns {Node}
  */
 const ProductView = ({ t, useRouteDetail: useAliasRouteDetail, useSelector: useAliasSelector }) => {

diff --git a/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap b/src/components/router/__tests__/__snapshots__/routerContext.test.js.snap
@@ -1,30 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterContext should apply a hook for return routeDetail: route details 1`] = `
-{
-  "lorem": "ipsum",
-}
-`;
-
-exports[`RouterContext should apply a hook for useHistory: history push 1`] = `
-[
-  [
-    "/dolor/sit",
-    undefined,
-  ],
-  [
-    "/rhel",
-    undefined,
-  ],
-  [
-    "/rhel",
-    undefined,
-  ],
-]
-`;
+exports[`RouterContext should apply a hook for return routeDetail: route details 1`] = `{}`;
 
 exports[`RouterContext should apply a hook for useLocation: location 1`] = `
 {
+  "_id": "92c2cef6154c02e9d92294c0905713e55425dcf8",
   "assign": [Function],
   "hash": "",
   "host": "localhost",
@@ -41,62 +21,20 @@ exports[`RouterContext should apply a hook for useLocation: location 1`] = `
 }
 `;
 
+exports[`RouterContext should apply a hook for useNavigate: navigation push 1`] = `
+[
+  "./rhods?lorem=ipsum",
+  "./rhods?lorem=ipsum",
+  "./rhods?lorem=ipsum",
+]
+`;
+
 exports[`RouterContext should return specific properties: specific properties 1`] = `
 {
-  "DEFAULT_CONTEXT": [
-    {
-      "routeDetail": {
-        "baseName": null,
-        "errorRoute": null,
-        "routeItem": {},
-        "routes": [],
-      },
-    },
-    [Function],
-  ],
-  "RouterContext": {
-    "$$typeof": Symbol(react.context),
-    "Consumer": {
-      "$$typeof": Symbol(react.context),
-      "_calculateChangedBits": null,
-      "_context": [Circular],
-    },
-    "Provider": {
-      "$$typeof": Symbol(react.provider),
-      "_context": [Circular],
-    },
-    "_calculateChangedBits": null,
-    "_currentRenderer": null,
-    "_currentRenderer2": null,
-    "_currentValue": [
-      {
-        "routeDetail": {
-          "baseName": null,
-          "errorRoute": null,
-          "routeItem": {},
-          "routes": [],
-        },
-      },
-      [Function],
-    ],
-    "_currentValue2": [
-      {
-        "routeDetail": {
-          "baseName": null,
-          "errorRoute": null,
-          "routeItem": {},
-          "routes": [],
-        },
-      },
-      [Function],
-    ],
-    "_threadCount": 0,
-  },
-  "useHistory": [Function],
   "useLocation": [Function],
-  "useParams": [Function],
+  "useNavigate": [Function],
   "useRouteDetail": [Function],
-  "useRouteMatch": [Function],
-  "useRouterContext": [Function],
+  "useSearchParams": [Function],
+  "useSetRouteDetail": [Function],
 }
 `;
diff --git a/src/components/router/__tests__/routerContext.test.js b/src/components/router/__tests__/routerContext.test.js
@@ -1,4 +1,5 @@
-import { context, useHistory, useLocation, useRouteDetail } from '../routerContext';
+// import { productConfig } from '../../../config';
+import { context, useLocation, useNavigate, useRouteDetail } from '../routerContext';
 
 describe('RouterContext', () => {
   it('should return specific properties', () => {
@@ -17,27 +18,41 @@ describe('RouterContext', () => {
     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');
+  it('should apply a hook for useLocation', async () => {
+    const mockLocation = {
+      search: '?lorem=ipsum'
+    };
 
-    expect(mockHistoryPush.mock.calls).toMatchSnapshot('history push');
+    const { result: mockUseLocation } = await mountHook(() => useLocation({ useLocation: () => mockLocation }));
+    expect(mockUseLocation).toMatchSnapshot('location');
   });
 
-  it('should apply a hook for useLocation', async () => {
+  it('should apply a hook for useNavigate', () => {
     const mockLocation = {
       search: '?lorem=ipsum'
     };
+    const mockNavigation = jest.fn;
+    const updatedCalls = [];
+    // const mockNavFunc = jest.fn().mockImplementation(() => mockNavigation);
+    const { result: mockNavigationSet } = shallowHook(() =>
+      useNavigate({
+        useLocation: () => mockLocation,
+        useNavigate: () => value => updatedCalls.push(value) // jest.fn().mockImplementation(() => mockNavigation)
+        // useNavigate: () => mockNavFunc
+      })
+    );
 
-    const { result: mockUseLocation } = await shallowHook(() => useLocation({ useLocation: () => mockLocation }));
-    expect(mockUseLocation).toMatchSnapshot('location');
+    mockNavigationSet('/dolor/sit');
+    mockNavigationSet('rhel');
+    mockNavigationSet('insights');
+
+    // console.log('>>>>>> result', mockNavigationSet, typeof mockNavigationSet);
+    console.log('>>>>>>>> result', mockNavigation);
+    // /{
+    //       rhods: mockNavigationSet('/dolor/sit'),
+    //       rhel: [mockNavigationSet('rhel'), mockNavigationSet('insights')]
+    //     }
+
+    expect(updatedCalls).toMatchSnapshot('navigation push');
   });
 });
diff --git a/src/components/router/routerContext.js b/src/components/router/routerContext.js
@@ -43,31 +43,38 @@ const useLocation = ({ useLocation: useAliasLocation = useLocationRRD } = {}) =>
 };
 
 /**
- * Store product path, parameter, in state.
+ * useNavigate wrapper, apply application config context routing
  *
  * @param {object} options
- * @param {Function} options.useSelector
- * @param {Function} options.useDispatch
- * @returns {*|string}
+ * @param {Function} options.useLocation
+ * @param {Function} options.useNavigate
+ * @returns {Function}
  */
-const useSetRouteDetail = ({
-  useSelector: useAliasSelector = storeHooks.reactRedux.useSelectors,
-  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch
+const useNavigate = ({
+  useLocation: useAliasLocation = useLocation,
+  useNavigate: useAliasNavigate = useRRDNavigate
 } = {}) => {
-  const dispatch = useAliasDispatch();
-  const [updatedPath] = useAliasSelector([({ view }) => view?.product?.config]);
-  const productPath = window.location.pathname; // useParam works in a similar manner
+  const { search = '', hash = '' } = useAliasLocation();
+  const navigate = useAliasNavigate();
+  console.log('>>>>>> useNavigate SETUP', search, hash, navigate);
 
-  useEffect(() => {
-    if (productPath && updatedPath !== productPath) {
-      dispatch({
-        type: reduxTypes.app.SET_PRODUCT,
-        config: productPath
-      });
-    }
-  }, [updatedPath, dispatch, productPath]);
+  return useCallback(
+    (pathLocation, options) => {
+      console.log('>>>>>> useNavigate', pathLocation);
+      const pathName = (typeof pathLocation === 'string' && pathLocation) || pathLocation?.pathname;
+      const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName });
 
-  return updatedPath;
+      // console.log('>>>>>> useNavigate', firstMatch);
+
+      return navigate(
+        (firstMatch?.productPath && `${routerHelpers.pathJoin('.', firstMatch?.productPath)}${search}${hash}`) ||
+          (pathName && `${pathName}${search}${hash}`) ||
+          pathLocation,
+        options
+      );
+    },
+    [hash, navigate, search]
+  );
 };
 
 /**
@@ -121,37 +128,6 @@ const useRouteDetail = ({
   return detail;
 };
 
-/**
- * useNavigate wrapper, apply application config context routing
- *
- * @param {object} options
- * @param {Function} options.useLocation
- * @param {Function} options.useNavigate
- * @returns {Function}
- */
-const useNavigate = ({
-  useLocation: useAliasLocation = useLocation,
-  useNavigate: useAliasNavigate = useRRDNavigate
-} = {}) => {
-  const { search, hash } = useAliasLocation();
-  const navigate = useAliasNavigate();
-
-  return useCallback(
-    (pathLocation, options) => {
-      const pathName = (typeof pathLocation === 'string' && pathLocation) || pathLocation?.pathname;
-      const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName });
-
-      return navigate(
-        (firstMatch?.productPath && `${routerHelpers.pathJoin('.', firstMatch?.productPath)}${search}${hash}`) ||
-          (pathName && `${pathName}${search}${hash}`) ||
-          pathLocation,
-        options
-      );
-    },
-    [hash, navigate, search]
-  );
-};
-
 /**
  * Search parameter, return
  *
@@ -194,12 +170,40 @@ const useSearchParams = ({
   return [routerHelpers.parseSearchParams(search), setSearchParams];
 };
 
+/**
+ * Store product path, parameter, in state.
+ *
+ * @param {object} options
+ * @param {Function} options.useSelector
+ * @param {Function} options.useDispatch
+ * @returns {*|string}
+ */
+const useSetRouteDetail = ({
+  useSelector: useAliasSelector = storeHooks.reactRedux.useSelectors,
+  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch
+} = {}) => {
+  const dispatch = useAliasDispatch();
+  const [updatedPath] = useAliasSelector([({ view }) => view?.product?.config]);
+  const productPath = window.location.pathname; // useParam works in a similar manner
+
+  useEffect(() => {
+    if (productPath && updatedPath !== productPath) {
+      dispatch({
+        type: reduxTypes.app.SET_PRODUCT,
+        config: productPath
+      });
+    }
+  }, [updatedPath, dispatch, productPath]);
+
+  return updatedPath;
+};
+
 const context = {
   useLocation,
   useNavigate,
-  useSetRouteDetail,
   useRouteDetail,
-  useSearchParams
+  useSearchParams,
+  useSetRouteDetail
 };
 
-export { context as default, context, useLocation, useNavigate, useSetRouteDetail, useRouteDetail, useSearchParams };
+export { context as default, context, useLocation, useNavigate, useRouteDetail, useSearchParams, useSetRouteDetail };