PROD-3232 Adds the uni nav snippet -> PROD-3115_uni-nav

src-ts/config/constants.ts

@@ -3,3 +3,5 @@ export enum ToolTitle {
     settings = 'Account Settings',
     work = 'Work',
 }
+
+export const PagePortalId: string = 'page-subheader-portal-el'

src-ts/config/environments/environment.default.config.ts

@@ -14,6 +14,9 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
+    AUTH: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
+    },
     ENV: 'default',
     LOGGING: {
         PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11',
@@ -38,7 +41,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
-    URL: {
-        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
+    UNIVERSAL_NAV: {
+        URL: 'https://uni-nav.topcoder-dev.com/tc-universal-nav.js',
     },
 }

src-ts/config/environments/environment.prod.config.ts

@@ -16,6 +16,9 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
         V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
+    AUTH: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
+    },
     DISABLED_TOOLS: [],
     ENV: 'prod',
     // TODO: Move stripe creds to .env file
@@ -36,7 +39,7 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
-    URL: {
-        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
+    UNIVERSAL_NAV: {
+        URL: 'https://uni-nav.topcoder.com/tc-universal-nav.js',
     },
 }

src-ts/header/Header.tsx

@@ -1,20 +1,62 @@
-import { FC } from 'react'
-
-import { Logo } from './logo'
-import { ToolSelectors } from './tool-selectors'
-import { UtilitySelectors } from './utility-selectors'
-import styles from './Header.module.scss'
-
-const Header: FC<{}> = () => (
-    <div className={styles['header-wrap']}>
-        <header className={styles.header}>
-            <ToolSelectors isWide={false} />
-            <Logo />
-            <ToolSelectors isWide />
-            <UtilitySelectors />
-        </header>
-        <div id='page-subheader-portal-el' className={styles.subheader} />
-    </div>
-)
+import { Dispatch, FC, MutableRefObject, SetStateAction, useContext, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+
+import { EnvironmentConfig, PagePortalId } from '../config'
+import { authUrlLogin, authUrlLogout, authUrlSignup, profileContext, ProfileContextData } from '../lib'
+
+import UniNavSnippet from './universal-nav-snippet'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let tcUniNav: any
+UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL)
+
+const Header: FC = () => {
+
+    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'
+
+    useEffect(() => {
+
+        if (headerInit.current || !profileReady || !tcUniNav) {
+            return
+        }
+
+        headerInit.current = true
+
+        tcUniNav(
+            'tool',
+            navElementId,
+            {
+                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() },
+                // TODO: make this dynamic based on the current URL
+                toolName: 'Topcoder Academy',
+                user: profileReady && profile ? {
+                    handle: profile.handle,
+                    initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`,
+                    photoURL: profile.photoURL,
+                    userId: profile.userId,
+                } : undefined,
+            },
+        )
+    }, [profileReady, profile])
+
+    return (
+        <>
+            <div id={navElementId} />
+            <div
+                id={PagePortalId}
+                className={classNames('full-width-relative', !ready && 'hidden')}
+            />
+        </>
+    )
+}
 
 export default Header