Merge pull request #447 from topcoder-platform/TCA-834_fix-uninav-loading

TCA-834 - updates code for uni-nav integration -> dev

Author: brooketopcoder

src-ts/header/Header.tsx

@@ -6,19 +6,19 @@ import {
     useCallback,
     useContext,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
-import { type TcUniNavFn } from 'universal-navigation'
+import type { AuthUser as NavAuthUser, TcUniNavFn } from 'universal-navigation'
 import classNames from 'classnames'
 
 import { EnvironmentConfig, PageSubheaderPortalId } from '../config'
 import {
     authUrlLogin,
     authUrlLogout,
     authUrlSignup,
-    LoadingSpinner,
     profileContext,
     ProfileContextData,
     routeContext,
@@ -44,6 +44,22 @@ const Header: FC = () => {
     const navElementId: string = 'main-nav-el'
     const navigate: NavigateFunction = useNavigate()
 
+    // userinfo will be an empty object until profileReady=true
+    // userinfo will be {user: undefined} if user is logged out
+    // userinfo will have all user's details when user is logged in
+    const userInfo: {} | undefined | NavAuthUser = useMemo(() => (
+        !profileReady ? {} : ({
+            user: profile ? {
+                email: profile.email,
+                firstName: profile.firstName,
+                handle: profile.handle,
+                lastName: profile.lastName,
+                photoUrl: profile.photoURL,
+                userId: profile.userId,
+            } : undefined,
+        })
+    ), [profile, profileReady])
+
     const navigationHandler: (request: NavigationRequest) => void
         = useCallback((request: NavigationRequest) => {
 
@@ -60,9 +76,10 @@ const Header: FC = () => {
             navigate,
         ])
 
+    // initialize uni-nav elements
     useEffect(() => {
 
-        if (headerInit.current || !profileReady) {
+        if (headerInit.current) {
             return
         }
 
@@ -73,40 +90,27 @@ const Header: FC = () => {
             navElementId,
             {
                 handleNavigation: navigationHandler,
-                onReady() {
-                    setReady(true)
-                    document.getElementById('root')?.classList.add('app-ready')
-                },
+                onReady() { setReady(true) },
                 signIn() { window.location.href = authUrlLogin() },
                 signOut() { window.location.href = authUrlLogout },
                 signUp() { window.location.href = authUrlSignup() },
                 toolName: activeToolName,
                 toolRoot: activeToolRoute,
                 type: 'tool',
-                user: profile ? {
-                    email: profile.email,
-                    firstName: profile.firstName,
-                    handle: profile.handle,
-                    lastName: profile.lastName,
-                    photoUrl: profile.photoURL,
-                    userId: profile.userId,
-                } : undefined,
+                ...userInfo,
             },
         )
     }, [
         activeToolName,
         activeToolRoute,
         navigationHandler,
-        profile,
+        userInfo,
         profileReady,
     ])
 
+    // update uni-nav's tool details
     useEffect(() => {
 
-        if (!profileReady) {
-            return
-        }
-
         tcUniNav(
             'update',
             navElementId,
@@ -118,16 +122,33 @@ const Header: FC = () => {
     }, [
         activeToolName,
         activeToolRoute,
+    ])
+
+    // update uni-nav's user/auth details
+    useEffect(() => {
+
+        if (!profileReady) {
+            return
+        }
+
+        tcUniNav(
+            'update',
+            navElementId,
+            {
+                ...userInfo,
+            },
+        )
+    }, [
         profileReady,
+        userInfo,
     ])
 
     return (
         <>
-            <LoadingSpinner hide={ready} />
             <div id={navElementId} />
             <div
                 id={PageSubheaderPortalId}
-                className={classNames('full-width-relative')}
+                className={classNames('full-width-relative', !ready && 'hidden')}
             />
         </>
     )

src-ts/lib/page-footer/PageFooter.module.scss

@@ -1,65 +0,0 @@
-@import '../styles/includes';
-@import '../styles/typography';
-
-.footer-wrap {
-    height: $footer-height;
-    border-top: $border-xs solid $black-10;
-
-    :global(#root:not(.app-ready)) & {
-        display: none;
-    }
-}
-
-.footer-inner {
-    display: flex;
-
-    align-items: center;
-    padding: $space-lg 0;
-    max-width: $xxl-min;
-    margin: 0 auto;
-
-    @include pagePaddings;
-
-    @extend .body-ultra-small;
-    color: $black-100;
-
-    @include ltesm {
-        flex-direction: column;
-        gap: $space-sm;
-    }
-}
-
-.utils {
-    display: flex;
-    align-items: center;
-    gap: $space-lg;
-
-    > div > * + * {
-        margin-left: $space-lg;
-    }
-
-    @include ltesm {
-        flex-direction: column;
-        gap: $space-sm;
-
-        > div > * + * {
-            margin-left: $space-sm;
-        }
-    }
-}
-
-.social {
-    display: flex;
-    align-items: center;
-    gap: $space-xs;
-    color: $black-60;
-
-    margin-left: auto;
-
-    a {
-        display: flex;
-    }
-    @include ltesm {
-        margin-right: auto;
-    }
-}

src-ts/lib/page-footer/PageFooter.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
+import type { TcUniNavFn } from 'universal-navigation'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare let tcUniNav: any
+declare let tcUniNav: TcUniNavFn
 
 const PageFooter: FC<{}> = () => {