PROD-3115 handle navigation -> PROD-3115_uni-nav

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'
@@ -28,17 +30,39 @@ 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)
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
     const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const headerInit: MutableRefObject<boolean> = useRef(false)
     const navElementId: string = 'main-nav-el'
+    const navigate: NavigateFunction = useNavigate()
+
+    const navigationHandler: (request: NavigationRequest) => void
+        = useCallback((request: NavigationRequest) => {
+
+            try {
+                // strip the domain and navigate to the path
+                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)
+            }
+
+        }, [
+            activeToolRoute,
+            navigate,
+        ])
 
     useEffect(() => {
 
-        if (headerInit.current) {
+        if (headerInit.current || !profileReady) {
             return
         }
 
@@ -48,31 +72,31 @@ const Header: FC = () => {
             'init',
             navElementId,
             {
+                handleNavigation: navigationHandler,
                 onReady() {
                     setReady(true)
                     document.getElementById('root')?.classList.add('app-ready')
                 },
                 signIn() { window.location.href = authUrlLogin() },
                 signOut() { window.location.href = authUrlLogout },
                 signUp() { window.location.href = authUrlSignup() },
-                type: 'tool',
-            },
-        )
-    }, [])
-
-    useEffect(() => {
-
-        tcUniNav(
-            'update',
-            navElementId,
-            {
                 toolName: activeToolName,
-                toolRoute: activeToolRoute,
+                toolRoot: 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,
+        profile,
+        profileReady,
     ])
 
     useEffect(() => {
@@ -85,17 +109,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 (