refactor(router): sw-625 move to router v6

RedHatInsights · Feb 14, 2023 · a051152 · a051152
1 parent d9d16e0
commit a051152
Show file tree

Hide file tree

Showing 25 changed files with 577 additions and 442 deletions.
diff --git a/config/build.plugins.js b/config/build.plugins.js
@@ -33,7 +33,10 @@ const setCommonPlugins = () => {
     }),
     fedModulePlugin({
       root: RELATIVE_DIRNAME,
-      shared: [{ 'react-redux': { requiredVersion: dependencies['react-redux'] } }]
+      shared: [
+        { 'react-router-dom': { singleton: true, requiredVersion: '*' } },
+        { 'react-redux': { requiredVersion: dependencies['react-redux'] } }
+      ]
     })
   ];
 

diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
     "crypto-js": "^4.1.1",
+    "fastest-levenshtein": "^1.0.16",
     "i18next": "^22.0.6",
     "i18next-http-backend": "^2.0.2",
     "iso-639-1": "^2.1.15",
@@ -97,8 +98,8 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^12.0.0",
     "react-redux": "^8.0.5",
-    "react-router": "5.3.3",
-    "react-router-dom": "5.3.0",
+    "react-router": "6.8.1",
+    "react-router-dom": "6.8.1",
     "react-use": "^17.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -368,6 +368,12 @@
     "title_OpenShift Container Platform": "OpenShift Container Platform",
     "subtitle_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
     "description_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions.",
+    "title_openshift-container": "$t(curiosity-view.title_OpenShift Container Platform)",
+    "subtitle_openshift-container": "$t(curiosity-view.subtitle_OpenShift Container Platform)",
+    "description_openshift-container": "$t(curiosity-view.description_OpenShift Container Platform)",
+    "title_OpenShift-metrics": "OpenShift Container Platform On-Demand",
+    "subtitle_OpenShift-metrics": "Monitor your OpenShift Container Platform usage for On-Demand subscriptions.",
+    "description_OpenShift-metrics": "Monitor your OpenShift Container Platform usage for On-Demand subscriptions.",
     "title_OpenShift-dedicated-metrics": "OpenShift Dedicated",
     "subtitle_OpenShift-dedicated-metrics": "Monitor your OpenShift Dedicated usage for On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
     "description_OpenShift-dedicated-metrics": "Monitor your OpenShift Dedicated usage for On-Demand subscriptions.",

diff --git a/src/AppEntry.js b/src/AppEntry.js
@@ -1,18 +1,17 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { routerHelpers } from './components/router';
 import { store } from './redux';
 import App from './app';
 import './styles/index.scss';
 import '@patternfly/react-styles/css/components/Select/select.css';
 
-const AppEntry = () => (
-  <Provider store={store}>
-    <BrowserRouter basename={routerHelpers.dynamicBaseName()}>
+const AppEntry = () => {
+  console.log('>>> APP ENTRY LOAD >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
+  return (
+    <Provider store={store}>
       <App />
-    </BrowserRouter>
-  </Provider>
-);
+    </Provider>
+  );
+};
 
 export { AppEntry as default, AppEntry };
diff --git a/src/app.js b/src/app.js
@@ -25,20 +25,23 @@ const App = ({ getLocale, useDispatch: useAliasDispatch, useSelector: useAliasSe
   const dispatch = useAliasDispatch();
   const { value: locale } = useAliasSelector(({ user }) => user?.locale?.data, {});
   let platformNotifications = null;
-
+  console.log('>>> APP load', locale);
   useMount(() => {
-    dispatch(getLocale());
+    console.log('>>> APP mount comp', locale);
+    if (!locale) {
+      dispatch(getLocale());
+    }
   });
 
   if (!helpers.UI_DISABLED_NOTIFICATIONS) {
     platformNotifications = <NotificationsPortal />;
   }
 
   return (
-    <I18n locale={locale || null}>
+    <I18n locale={locale}>
       {platformNotifications}
-      <Authentication>
-        <Router />
+      <Authentication key={`auth-${locale}`}>
+        <Router key={`route-${locale}`} />
       </Authentication>
     </I18n>
   );

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -134,6 +134,35 @@ const numberDisplay = value => {
   return numbro(value);
 };
 
+/**
+ * Recursive object and props freeze/immutable.
+ * Used from deep-freeze-strict, an older npm package, license - public domain
+ * https://bit.ly/3HR4XWP and https://bit.ly/3Ye4S6B
+ *
+ * @param {object} obj
+ * @returns {*}
+ */
+const objFreeze = obj => {
+  Object.freeze(obj);
+
+  const oIsFunction = typeof obj === 'function';
+  const hasOwnProp = Object.prototype.hasOwnProperty;
+
+  Object.getOwnPropertyNames(obj).forEach(prop => {
+    if (
+      hasOwnProp.call(obj, prop) &&
+      (oIsFunction ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments' : true) &&
+      obj[prop] !== null &&
+      (typeof obj[prop] === 'object' || typeof obj[prop] === 'function') &&
+      !Object.isFrozen(obj[prop])
+    ) {
+      objFreeze(obj[prop]);
+    }
+  });
+
+  return obj;
+};
+
 /**
  * Is dev mode active.
  * Associated with using the NPM script "start". See dotenv config files for activation.
@@ -370,6 +399,7 @@ const helpers = {
   noopPromise,
   noopTranslate,
   numberDisplay,
+  objFreeze,
   DEV_MODE,
   PROD_MODE,
   REVIEW_MODE,

diff --git a/src/components/authentication/authenticationContext.js b/src/components/authentication/authenticationContext.js
@@ -1,8 +1,8 @@
-import React, { useContext, useState } from 'react';
-import { useMount, useUnmount } from 'react-use';
+import React, { useContext } from 'react';
+import { useMount } from 'react-use';
 import { reduxActions, storeHooks } from '../../redux';
 import { helpers } from '../../common';
-import { routerContext, routerHelpers } from '../router';
+import { routerHelpers } from '../router';
 
 /**
  * Base context.
@@ -27,25 +27,19 @@ const useAuthContext = () => useContext(AuthenticationContext);
  * @param {string} options.appName
  * @param {Function} options.authorizeUser
  * @param {Function} options.hideGlobalFilter
- * @param {Function} options.onNavigation
  * @param {Function} options.setAppName
  * @param {Function} options.useDispatch
- * @param {Function} options.useHistory
  * @param {Function} options.useSelectorsResponse
  * @returns {{data: {errorCodes, errorStatus: *, locale}, pending: boolean, fulfilled: boolean, error: boolean}}
  */
 const useGetAuthorization = ({
   appName = routerHelpers.appName,
   authorizeUser = reduxActions.platform.authorizeUser,
   hideGlobalFilter = reduxActions.platform.hideGlobalFilter,
-  onNavigation = reduxActions.platform.onNavigation,
   setAppName = reduxActions.platform.setAppName,
   useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
-  useHistory: useAliasHistory = routerContext.useHistory,
   useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse
 } = {}) => {
-  const [unregister, setUnregister] = useState(() => helpers.noop);
-  const history = useAliasHistory();
   const dispatch = useAliasDispatch();
   const { data, error, fulfilled, pending, responses } = useAliasSelectorsResponse([
     { id: 'auth', selector: ({ user }) => user?.auth },
@@ -59,11 +53,6 @@ const useGetAuthorization = ({
   useMount(async () => {
     await dispatch(authorizeUser());
     dispatch([setAppName(appName), hideGlobalFilter()]);
-    setUnregister(() => dispatch(onNavigation(event => history.push(event.navId))));
-  });
-
-  useUnmount(() => {
-    unregister();
   });
 
   const [user = {}, app = {}] = (Array.isArray(data.auth) && data.auth) || [];

diff --git a/src/components/i18n/i18n.js b/src/components/i18n/i18n.js
@@ -24,35 +24,38 @@ const I18n = ({ children, fallbackLng, loadPath, locale }) => {
    * Initialize i18next
    */
   useMount(async () => {
-    try {
-      await i18next
-        .use(XHR)
-        .use(initReactI18next)
-        .init({
-          backend: {
-            loadPath
-          },
-          fallbackLng,
-          lng: undefined,
-          debug: !helpers.PROD_MODE,
-          ns: ['default'],
-          defaultNS: 'default',
-          react: {
-            useSuspense: false
-          }
-        });
-    } catch (e) {
-      //
-    }
+    console.log('>>> mount i18n');
+    if (!initialized) {
+      try {
+        await i18next
+          .use(XHR)
+          .use(initReactI18next)
+          .init({
+            backend: {
+              loadPath
+            },
+            fallbackLng,
+            lng: undefined,
+            debug: !helpers.PROD_MODE,
+            ns: ['default'],
+            defaultNS: 'default',
+            react: {
+              useSuspense: false
+            }
+          });
+      } catch (e) {
+        //
+      }
 
-    setInitialized(true);
+      setInitialized(true);
+    }
   });
 
   /**
    * Update locale.
    */
   useEffect(() => {
-    if (initialized) {
+    if (initialized && locale) {
       try {
         i18next.changeLanguage(locale);
       } catch (e) {