From 0d5c360d182f486164d75ec25ee1cd0db67fe25d Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 22 Nov 2022 10:11:05 -0800 Subject: [PATCH 1/4] PROD-3115 #comment This commit attempts to implement the navigation handling #time 30m --- src-ts/header/Header.tsx | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index 8431cf677..e949e3bc7 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -3,11 +3,13 @@ import { FC, MutableRefObject, SetStateAction, + useCallback, useContext, useEffect, useRef, useState, } from 'react' +import { NavigateFunction, useNavigate } from 'react-router-dom' import classNames from 'classnames' import { EnvironmentConfig, PageSubheaderPortalId } from '../config' @@ -35,6 +37,27 @@ const Header: FC = () => { const [ready, setReady]: [boolean, Dispatch>] = useState(false) const headerInit: MutableRefObject = useRef(false) const navElementId: string = 'main-nav-el' + const navigate: NavigateFunction = useNavigate() + + console.debug('active route', activeToolRoute) + + const navigationHandler: (label: string, path: string) => void + = useCallback((label: string, path: string) => { + + console.debug(path) + + try { + // strip the domain and navigate to the path + navigate(new URL(path).pathname) + } catch (error) { + // if we couldn't navigate to the path, just go to the route of the currently active tool + navigate(new URL(activeToolRoute || '/').pathname) + } + + }, [ + activeToolRoute, + navigate, + ]) useEffect(() => { @@ -48,6 +71,7 @@ const Header: FC = () => { 'init', navElementId, { + navigationHandler, onReady() { setReady(true) document.getElementById('root')?.classList.add('app-ready') @@ -55,10 +79,16 @@ const Header: FC = () => { signIn() { window.location.href = authUrlLogin() }, signOut() { window.location.href = authUrlLogout }, signUp() { window.location.href = authUrlSignup() }, + toolName: activeToolName, + toolRoute: activeToolRoute, type: 'tool', }, ) - }, []) + }, [ + activeToolName, + activeToolRoute, + navigationHandler, + ]) useEffect(() => { From 16d90cfe81b63d5ffa7c9b0cabaefc93a1a874a8 Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 22 Nov 2022 10:36:20 -0800 Subject: [PATCH 2/4] PROD-3115 #comment This commit waits to initialize the nav when the profile is ready. #time 15m --- src-ts/header/Header.tsx | 36 +++++++++++++----------------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index e949e3bc7..2a7fed381 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -61,7 +61,7 @@ const Header: FC = () => { useEffect(() => { - if (headerInit.current) { + if (headerInit.current || !profileReady) { return } @@ -82,27 +82,20 @@ const Header: FC = () => { toolName: activeToolName, toolRoute: activeToolRoute, type: 'tool', + user: profile ? { + handle: profile.handle, + initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`, + photoURL: profile.photoURL, + userId: profile.userId, + } : undefined, }, ) }, [ activeToolName, activeToolRoute, navigationHandler, - ]) - - useEffect(() => { - - tcUniNav( - 'update', - navElementId, - { - toolName: activeToolName, - toolRoute: activeToolRoute, - }, - ) - }, [ - activeToolName, - activeToolRoute, + profile, + profileReady, ]) useEffect(() => { @@ -115,17 +108,14 @@ const Header: FC = () => { 'update', navElementId, { - user: profile ? { - handle: profile.handle, - initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`, - photoURL: profile.photoURL, - userId: profile.userId, - } : undefined, + toolName: activeToolName, + toolRoute: activeToolRoute, }, ) }, [ + activeToolName, + activeToolRoute, profileReady, - profile, ]) return ( From c58ab13c29b90aa6aca5fe515149ce04a2f55060 Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 22 Nov 2022 10:57:11 -0800 Subject: [PATCH 3/4] PROD-3115 #comment This commit fixes invalid configuration. #time 30m --- src-ts/header/Header.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index 2a7fed381..7a2440f71 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -30,6 +30,11 @@ import UniNavSnippet from './universal-nav-snippet' declare let tcUniNav: any UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL) +interface NavigationRequest { + label: string + path: string +} + const Header: FC = () => { const { activeToolName, activeToolRoute }: RouteContextData = useContext(routeContext) @@ -39,16 +44,12 @@ const Header: FC = () => { const navElementId: string = 'main-nav-el' const navigate: NavigateFunction = useNavigate() - console.debug('active route', activeToolRoute) - - const navigationHandler: (label: string, path: string) => void - = useCallback((label: string, path: string) => { - - console.debug(path) + const navigationHandler: (request: NavigationRequest) => void + = useCallback((request: NavigationRequest) => { try { // strip the domain and navigate to the path - navigate(new URL(path).pathname) + navigate(new URL(request.path).pathname) } catch (error) { // if we couldn't navigate to the path, just go to the route of the currently active tool navigate(new URL(activeToolRoute || '/').pathname) @@ -71,7 +72,7 @@ const Header: FC = () => { 'init', navElementId, { - navigationHandler, + handleNavigation: navigationHandler, onReady() { setReady(true) document.getElementById('root')?.classList.add('app-ready') @@ -80,7 +81,7 @@ const Header: FC = () => { signOut() { window.location.href = authUrlLogout }, signUp() { window.location.href = authUrlSignup() }, toolName: activeToolName, - toolRoute: activeToolRoute, + toolRoot: activeToolRoute, type: 'tool', user: profile ? { handle: profile.handle, From 757803d86059dde77a0342f730f58e403400ae7e Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 22 Nov 2022 12:04:02 -0800 Subject: [PATCH 4/4] PROD-3115 fix for nav changing #time 15m --- src-ts/lib/route-provider/route.provider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx index 3a68b60f6..f871d7551 100644 --- a/src-ts/lib/route-provider/route.provider.tsx +++ b/src-ts/lib/route-provider/route.provider.tsx @@ -160,6 +160,7 @@ export const RouteProvider: FC = (props: RouteProviderProps) // eslint-disable-next-line react-hooks/exhaustive-deps }, [ initialized, + location, profile, props.toolsRoutes, props.utilsRoutes,