diff --git a/src-ts/App.tsx b/src-ts/App.tsx index ce3dad70d..10e9900f5 100644 --- a/src-ts/App.tsx +++ b/src-ts/App.tsx @@ -1,4 +1,4 @@ -import { Dispatch, FC, ReactElement, SetStateAction, useContext, useEffect, useState } from 'react' +import { FC, ReactElement, useContext } from 'react' import { Routes } from 'react-router-dom' import { toast, ToastContainer } from 'react-toastify' @@ -7,22 +7,11 @@ import { routeContext, RouteContextData } from './lib' const App: FC<{}> = () => { - const [ready, setReady]: [boolean, Dispatch>] = useState(false) const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext) const routeElements: Array = allRoutes .map(route => getRouteElement(route)) - useEffect(() => { - setReady(true) - }, []) - - useEffect(() => { - if (ready) { - document.getElementById('root')?.classList.add('app-ready'); - } - }, [ready]); - return ( <>
diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts index 89e4094d6..c1d0368a6 100644 --- a/src-ts/config/constants.ts +++ b/src-ts/config/constants.ts @@ -6,4 +6,4 @@ export enum ToolTitle { work = 'Self-Service', } -export const PagePortalId: string = 'page-subheader-portal-el' +export const PageSubheaderPortalId: string = 'page-subheader-portal-el' diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index 3ad0fe16a..9b8850baf 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -10,11 +10,12 @@ import { } from 'react' import classNames from 'classnames' -import { EnvironmentConfig, PagePortalId } from '../config' +import { EnvironmentConfig, PageSubheaderPortalId } from '../config' import { authUrlLogin, authUrlLogout, authUrlSignup, + LoadingSpinner, profileContext, ProfileContextData, routeContext, @@ -29,7 +30,7 @@ UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL) const Header: FC = () => { - const { activeToolName }: RouteContextData = useContext(routeContext) + const { activeToolName, activeToolRoute }: RouteContextData = useContext(routeContext) const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext) const [ready, setReady]: [boolean, Dispatch>] = useState(false) const headerInit: MutableRefObject = useRef(false) @@ -44,7 +45,7 @@ const Header: FC = () => { headerInit.current = true tcUniNav( - 'tool', + 'init', navElementId, { onReady() { @@ -55,6 +56,8 @@ const Header: FC = () => { signOut() { window.location.href = authUrlLogout }, signUp() { window.location.href = authUrlSignup() }, toolName: activeToolName, + toolRoute: activeToolRoute, + type: 'tool', user: profileReady && profile ? { handle: profile.handle, initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`, @@ -65,15 +68,18 @@ const Header: FC = () => { ) }, [ activeToolName, + activeToolRoute, profileReady, - profile]) + profile, + ]) return ( <> +
) diff --git a/src-ts/lib/breadcrumb/Breadcrumb.tsx b/src-ts/lib/breadcrumb/Breadcrumb.tsx index f0cfba2ad..c2bec65c3 100644 --- a/src-ts/lib/breadcrumb/Breadcrumb.tsx +++ b/src-ts/lib/breadcrumb/Breadcrumb.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { createPortal } from 'react-dom' -import { PagePortalId } from '../../config' +import { PageSubheaderPortalId } from '../../config' import { BreadcrumbItem, BreadcrumbItemModel } from './breadcrumb-item' import styles from './Breadcrumb.module.scss' @@ -11,7 +11,7 @@ interface BreadcrumbProps { } const Breadcrumb: FC = (props: BreadcrumbProps) => { - const portalRootEl: HTMLElement | null = document.getElementById(PagePortalId) + const portalRootEl: HTMLElement | null = document.getElementById(PageSubheaderPortalId) if (!portalRootEl) { return <> diff --git a/src-ts/lib/route-provider/route-context-data.model.ts b/src-ts/lib/route-provider/route-context-data.model.ts index 8b2c18416..98585ecf8 100644 --- a/src-ts/lib/route-provider/route-context-data.model.ts +++ b/src-ts/lib/route-provider/route-context-data.model.ts @@ -4,6 +4,7 @@ import { PlatformRoute } from './platform-route.model' export interface RouteContextData { activeToolName?: string + activeToolRoute?: string allRoutes: Array getChildren: (parent: string) => Array getChildRoutes: (parent: string) => Array diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx index a0736393c..3a68b60f6 100644 --- a/src-ts/lib/route-provider/route.provider.tsx +++ b/src-ts/lib/route-provider/route.provider.tsx @@ -55,16 +55,25 @@ export const RouteProvider: FC = (props: RouteProviderProps) // a. for customers and the user is a customer // b. for members and the user is a member // c. the active tool in the app (in case someone deep-links to it) + let activeRoute: PlatformRoute | undefined const toolsRoutesForNav: Array = toolsRoutes - .filter(route => !!route.title - && !route.hidden - && ( - ( - (!route.customerOnly || !!profile?.isCustomer) - && (!route.memberOnly || !!profile?.isMember) + .filter(route => { + + const isActive: boolean = routeIsActiveTool(location.pathname, route) + if (isActive) { + activeRoute = route + } + + return !!route.title + && !route.hidden + && ( + ( + (!route.customerOnly || !!profile?.isCustomer) + && (!route.memberOnly || !!profile?.isMember) + ) + || isActive ) - || routeIsActiveTool(location.pathname, route) - )) + }) const utilsRoutes: Array = props.utilsRoutes.filter(route => !route.disabled) allRoutes = [ @@ -77,8 +86,10 @@ export const RouteProvider: FC = (props: RouteProviderProps) : profile.isCustomer ? props.rootCustomer : props.rootMember + const contextData: RouteContextData = { - activeToolName: allRoutes.find(r => routeIsActiveTool(location.pathname, r))?.title, + activeToolName: activeRoute?.title, + activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined, allRoutes, getChildren, getChildRoutes, diff --git a/src-ts/tools/learn/my-learning/MyLearning.tsx b/src-ts/tools/learn/my-learning/MyLearning.tsx index 6714074dd..0a49adf3f 100755 --- a/src-ts/tools/learn/my-learning/MyLearning.tsx +++ b/src-ts/tools/learn/my-learning/MyLearning.tsx @@ -1,6 +1,6 @@ import { Dispatch, FC, ReactNode, SetStateAction, useContext, useMemo, useState } from 'react' -import { PagePortalId } from '../../../config' +import { PageSubheaderPortalId } from '../../../config' import { Breadcrumb, BreadcrumbItemModel, @@ -83,7 +83,7 @@ const MyLearning: FC<{}> = () => {
- +
{
- +