From e7c4828c855e7f81d0737fa0bb9085442a658cf1 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Tue, 7 Feb 2023 01:44:32 -0500 Subject: [PATCH] DEV stash --- .../authentication/authenticationContext.js | 17 +-- src/components/router/router.js | 18 +-- src/components/router/routerContext.js | 72 ++---------- src/components/router/routerHelpers.js | 110 +++++++++--------- 4 files changed, 81 insertions(+), 136 deletions(-) diff --git a/src/components/authentication/authenticationContext.js b/src/components/authentication/authenticationContext.js index 00a4cdfc9..803b7334c 100644 --- 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. @@ -28,10 +28,8 @@ const useAuthContext = () => useContext(AuthenticationContext); * @param {Function} options.authorizeUser * @param {Function} options.hideGlobalFilter * @param {Function} options.initializeChrome - * @param {Function} options.onNavigation * @param {Function} options.setAppName * @param {Function} options.useDispatch - * @param {Function} options.useNavigate * @param {Function} options.useSelectorsResponse * @returns {{data: {errorCodes, errorStatus: *, locale}, pending: boolean, fulfilled: boolean, error: boolean}} */ @@ -40,14 +38,10 @@ const useGetAuthorization = ({ authorizeUser = reduxActions.platform.authorizeUser, hideGlobalFilter = reduxActions.platform.hideGlobalFilter, initializeChrome = reduxActions.platform.initializeChrome, - onNavigation = reduxActions.platform.onNavigation, setAppName = reduxActions.platform.setAppName, useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch, - useNavigate: useAliasNavigate = routerContext.useNavigate, useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse } = {}) => { - const [unregister, setUnregister] = useState(() => helpers.noop); - const navigate = useAliasNavigate(); const dispatch = useAliasDispatch(); const { data, error, fulfilled, pending, responses } = useAliasSelectorsResponse([ { id: 'auth', selector: ({ user }) => user?.auth }, @@ -61,11 +55,6 @@ const useGetAuthorization = ({ useMount(async () => { await dispatch(authorizeUser()); dispatch([initializeChrome(), setAppName(appName), hideGlobalFilter()]); - setUnregister(() => dispatch(onNavigation(event => navigate(event.navId, { isLeftNav: true })))); - }); - - useUnmount(() => { - unregister(); }); const [user = {}, app = {}] = (Array.isArray(data.auth) && data.auth) || []; diff --git a/src/components/router/router.js b/src/components/router/router.js index fea261728..401c7f842 100644 --- a/src/components/router/router.js +++ b/src/components/router/router.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { Navigate, Routes, Route } from 'react-router-dom'; import { routerHelpers } from './routerHelpers'; @@ -14,12 +14,16 @@ import { Loader } from '../loader/loader'; * @returns {React.ReactNode} */ const Router = ({ redirectRoute, routes } = {}) => { - const updatedRoutes = routes - .filter(item => !item.disabled) - .map(item => { - const View = routerHelpers.importView(item.component); - return } />; - }); + const updatedRoutes = useMemo( + () => + routes + .filter(item => !item.disabled) + .map(item => { + const View = routerHelpers.importView(item.component); + return } />; + }), + [routes] + ); return ( }> diff --git a/src/components/router/routerContext.js b/src/components/router/routerContext.js index 759fa1b3e..067976534 100644 --- a/src/components/router/routerContext.js +++ b/src/components/router/routerContext.js @@ -3,40 +3,10 @@ import { useLocation as useLocationRRD, useNavigate as useRRDNavigate, useParams, - useResolvedPath, useSearchParams as useRRDSearchParams } from 'react-router-dom'; import { routerHelpers } from './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 - ); - } - }; -}; - */ - /** * Combine react-router-dom useLocation with actual window location. * Focused on exposing replace and href. @@ -107,22 +77,13 @@ const useRedirect = ({ useLocation: useAliasLocation = useLocation } = {}) => { * Get a route detail from router context. * * @param {object} options - * @param {Function} options.useRedirect * @param {Function} options.useParams * @returns {{baseName: string, errorRoute: object}} */ -const useRouteDetail = ({ - useRedirect: useAliasRedirect = useRedirect, - useParams: useAliasParams = useParams -} = {}) => { - const redirect = useAliasRedirect(); +const useRouteDetail = ({ useParams: useAliasParams = useParams } = {}) => { const { productPath } = useAliasParams(); const { allConfigs, configs, firstMatch } = routerHelpers.getRouteConfigByPath({ pathName: productPath }); - if (!firstMatch) { - redirect(routerHelpers.redirectRoute.redirect); - } - return { allProductConfigs: allConfigs, firstMatch, @@ -132,43 +93,34 @@ const useRouteDetail = ({ }; }; -// ToDo: align useNavigate with updates from the useHistory proxy /** * useNavigate wrapper, apply application config context routing * * @param {object} options * @param {Function} options.useLocation * @param {Function} options.useNavigate - * @param {Function} options.useResolvedPath * @returns {Function} */ const useNavigate = ({ useLocation: useAliasLocation = useLocation, - useNavigate: useAliasNavigate = useRRDNavigate, - useResolvedPath: useAliasResolvedPath = useResolvedPath + useNavigate: useAliasNavigate = useRRDNavigate } = {}) => { const { search, hash } = useAliasLocation(); const navigate = useAliasNavigate(); - const { pathname } = useAliasResolvedPath(); return useCallback( - (path, { isLeftNav = false, isPassSearchHash = true, ...options } = {}) => { - if (isLeftNav) { - return undefined; - } - - const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName: path }); - - if (firstMatch) { - const dynamicBaseName = routerHelpers.dynamicBaseName({ pathName: pathname }); - const updatedPath = `${dynamicBaseName}/${firstMatch.productPath}`; - - return navigate((isPassSearchHash && `${updatedPath}${search}${hash}`) || updatedPath, options); - } + (pathLocation, options) => { + const pathName = (typeof pathLocation === 'string' && pathLocation) || pathLocation?.pathname; + const { firstMatch } = routerHelpers.getRouteConfigByPath({ pathName }); - return navigate((isPassSearchHash && `${path}${search}${hash}`) || path, options); + return navigate( + (firstMatch?.productPath && `${routerHelpers.pathJoin('.', firstMatch?.productPath)}${search}${hash}`) || + (pathName && `${pathName}${search}${hash}`) || + pathLocation, + options + ); }, - [hash, navigate, pathname, search] + [hash, navigate, search] ); }; diff --git a/src/components/router/routerHelpers.js b/src/components/router/routerHelpers.js index 8df61e571..964882f85 100644 --- a/src/components/router/routerHelpers.js +++ b/src/components/router/routerHelpers.js @@ -63,60 +63,60 @@ const routes = routesConfig; * @param {Array} params.config * @returns {{configs: Array, configFirstMatch: object, configsById: object}} */ -const getRouteConfigByPath = _memoize( - ({ pathName = window.location.pathname, configs = productConfig.configs } = {}) => { - const updatedPathName = (/^http/i.test(pathName) && new URL(pathName).pathname) || pathName; - const basePathDirs = updatedPathName - ?.split('#')?.[0] - ?.split('?')?.[0] - ?.split('/') - .filter(str => str.length > 0) - ?.reverse(); - const filteredConfigs = []; - const filteredConfigsById = {}; - const filteredConfigsByGroup = {}; - const allConfigs = configs; - - const findConfig = dir => { - configs.forEach(configItem => { - const { productId, productGroup, aliases } = configItem; - - if ( - !(productId in filteredConfigsById) && - dir && - (new RegExp(dir, 'i').test(aliases?.toString()) || - new RegExp(dir, 'i').test(productGroup?.toString()) || - new RegExp(dir, 'i').test(productId?.toString())) - ) { - filteredConfigsByGroup[productGroup] ??= []; - filteredConfigsByGroup[productGroup].push(configItem); - - filteredConfigsById[productId] = configItem; - filteredConfigs.push(configItem); - } - }); - }; - - if (basePathDirs?.length) { - basePathDirs.forEach(dir => { - if (dir) { - const decodedDir = window.decodeURI(dir); - findConfig(decodedDir); - } - }); - } else { - findConfig(); - } - - return { - allConfigs, - configs: filteredConfigs, - configsById: filteredConfigsById, - configsByGroup: filteredConfigsByGroup, - firstMatch: filteredConfigs?.[0] - }; +const getRouteConfigByPath = _memoize(({ pathName, configs = productConfig.configs } = {}) => { + const updatedPathName = + (/^http/i.test(pathName) && new URL(pathName).pathname) || pathName || window.location.pathname; + + const basePathDirs = updatedPathName + ?.split('#')?.[0] + ?.split('?')?.[0] + ?.split('/') + .filter(str => str.length > 0) + ?.reverse(); + const filteredConfigs = []; + const filteredConfigsById = {}; + const filteredConfigsByGroup = {}; + const allConfigs = configs; + + const findConfig = dir => { + configs.forEach(configItem => { + const { productId, productGroup, aliases } = configItem; + + if ( + !(productId in filteredConfigsById) && + dir && + (new RegExp(dir, 'i').test(aliases?.toString()) || + new RegExp(dir, 'i').test(productGroup?.toString()) || + new RegExp(dir, 'i').test(productId?.toString())) + ) { + filteredConfigsByGroup[productGroup] ??= []; + filteredConfigsByGroup[productGroup].push(configItem); + + filteredConfigsById[productId] = configItem; + filteredConfigs.push(configItem); + } + }); + }; + + if (basePathDirs?.length) { + basePathDirs.forEach(dir => { + if (dir) { + const decodedDir = window.decodeURI(dir); + findConfig(decodedDir); + } + }); + } else { + findConfig(); } -); + + return { + allConfigs, + configs: filteredConfigs, + configsById: filteredConfigsById, + configsByGroup: filteredConfigsByGroup, + firstMatch: filteredConfigs?.[0] + }; +}); /** * Import a route component. @@ -160,7 +160,7 @@ const parseSearchParams = _memoize((currentPathAndOrSearch = window.location.sea * @param {object} paths * @returns {string} */ -const pathJoin = (...paths) => { +const pathJoin = _memoize((...paths) => { let updatedPath = Array.from(paths); const hasLead = /^\/\//.test(updatedPath[0]); updatedPath = updatedPath @@ -174,7 +174,7 @@ const pathJoin = (...paths) => { } return updatedPath; -}; +}); const routerHelpers = { appName,