diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index 42dc6630b..9a9e37a04 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -6,11 +6,12 @@ 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' @@ -18,7 +19,6 @@ 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 ( <> -
) diff --git a/src-ts/lib/page-footer/PageFooter.module.scss b/src-ts/lib/page-footer/PageFooter.module.scss index 2c2f8596c..e69de29bb 100644 --- a/src-ts/lib/page-footer/PageFooter.module.scss +++ b/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; - } -} diff --git a/src-ts/lib/page-footer/PageFooter.tsx b/src-ts/lib/page-footer/PageFooter.tsx index 631a242b3..1762265a8 100644 --- a/src-ts/lib/page-footer/PageFooter.tsx +++ b/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<{}> = () => {