Merge pull request #422 from topcoder-platform/PROD-3233_dynamic-tool

PROD-3233 Set the Tool Name to Active Route Name ->PROD-3115_uni-nav

Author: brooketopcoder

src-ts/.eslintrc.js

@@ -76,6 +76,7 @@ module.exports = {
             11
         ],
         'import/extensions': 'off',
+        'import/no-named-default':  'off',
         'import/prefer-default-export': 'off',
         'indent': [
             2,
@@ -105,6 +106,7 @@ module.exports = {
             120,
         ],
         'no-extra-boolean-cast': 'off',
+        'no-nested-ternary': 'off',
         'no-null/no-null': 'error',
         'no-param-reassign': [
             'error',

src-ts/config/constants.ts

@@ -1,7 +1,9 @@
 export enum ToolTitle {
-    learn = 'Learn',
+    dev = 'Dev Center',
+    game = 'Gamification Admin',
     settings = 'Account Settings',
-    work = 'Work',
+    tca = 'Topcoder Academy',
+    work = 'Self-Service',
 }
 
 export const PagePortalId: string = 'page-subheader-portal-el'

src-ts/header/Header.tsx

@@ -1,8 +1,25 @@
-import { Dispatch, FC, MutableRefObject, SetStateAction, useContext, useEffect, useRef, useState } from 'react'
+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 {
+    authUrlLogin,
+    authUrlLogout,
+    authUrlSignup,
+    profileContext,
+    ProfileContextData,
+    routeContext,
+    RouteContextData,
+} from '../lib'
 
 import UniNavSnippet from './universal-nav-snippet'
 
@@ -12,6 +29,7 @@ UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL)
 
 const Header: FC = () => {
 
+    const { activeToolName }: 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)
@@ -36,8 +54,7 @@ const Header: FC = () => {
                 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',
+                toolName: activeToolName,
                 user: profileReady && profile ? {
                     handle: profile.handle,
                     initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`,
@@ -46,7 +63,10 @@ const Header: FC = () => {
                 } : undefined,
             },
         )
-    }, [profileReady, profile])
+    }, [
+        activeToolName,
+        profileReady,
+        profile])
 
     return (
         <>

src-ts/header/universal-nav-snippet.js

@@ -26,7 +26,7 @@ function UniNavSnippet(url) {
         i.type = 'module'
 
         i.src = a
-        
+
         o.parentNode.insertBefore(i, o)
 
     }(window, document, 'script', url, 'tcUniNav'))

src-ts/lib/functions/authentication-functions/authentication.functions.ts

@@ -22,12 +22,14 @@ configureConnector({
     mockToken: undefined,
 })
 
-export function getRegistrationSource(activeTool: PlatformRoute | undefined): AuthenticationRegistrationSource | undefined {
+export function getRegistrationSource(
+    activeTool: PlatformRoute | undefined,
+): AuthenticationRegistrationSource | undefined {
 
     switch (activeTool?.title) {
 
         // currently, there is no reg source for members
-        case ToolTitle.learn:
+        case ToolTitle.tca:
             return undefined
 
         // currently, the work tool and the platform

src-ts/lib/route-provider/route-context-data.model.ts

@@ -3,6 +3,7 @@ import { FC, ReactElement } from 'react'
 import { PlatformRoute } from './platform-route.model'
 
 export interface RouteContextData {
+    activeToolName?: string
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
     getChildRoutes: (parent: string) => Array<ReactElement>

src-ts/lib/route-provider/route.provider.tsx

@@ -78,9 +78,10 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
                 ? props.rootCustomer
                 : props.rootMember
         const contextData: RouteContextData = {
+            activeToolName: allRoutes.find(r => routeIsActiveTool(location.pathname, r))?.title,
             allRoutes,
-            getChildRoutes,
             getChildren,
+            getChildRoutes,
             getPath,
             getPathFromRoute,
             getRouteElement,

src-ts/tools/dev-center/dev-center.routes.tsx

@@ -1,10 +1,15 @@
+import { ToolTitle } from '../../config'
 import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-const GettingStartedGuide: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide'))
-const DevCenterLandingPage: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage'))
+const GettingStartedGuide: LazyLoadedComponent
+    = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide'))
+
+const DevCenterLandingPage: LazyLoadedComponent
+    = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage'))
+
 const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
 
-export const toolTitle: string = 'Dev Center'
+export const toolTitle: string = ToolTitle.dev
 
 export const devCenterRoutes: Array<PlatformRoute> = [
     {

src-ts/tools/gamification-admin/GamificationAdmin.tsx

@@ -2,13 +2,14 @@ import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 
+import { ToolTitle } from '../../config'
 import {
     routeContext,
     RouteContextData,
     xhrGetAsync,
 } from '../../lib'
 
-export const toolTitle: string = 'Gamification Admin'
+export const toolTitle: string = ToolTitle.game
 
 const GamificationAdmin: FC<{}> = () => {
 

src-ts/tools/learn/Learn.tsx

@@ -9,7 +9,7 @@ import {
 
 import { LearnSwr } from './learn-lib'
 
-export const toolTitle: string = ToolTitle.learn
+export const toolTitle: string = ToolTitle.tca
 
 const Learn: FC<{}> = () => {
 

src-ts/tools/work/work.routes.tsx

@@ -12,7 +12,8 @@ const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-l
 const BugHuntIntakeForm: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm')
 const IntakeForms: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'IntakeForms')
 const Review: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'Review')
-const SaveAfterLogin: LazyLoadedComponent = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin'))
+const SaveAfterLogin: LazyLoadedComponent
+    = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin'))
 const WorkTable: LazyLoadedComponent = lazyLoad(() => import('./work-table'), 'WorkTable')
 const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou')
 
@@ -45,7 +46,7 @@ export function workDetailOrDraftRoute(selectedWork: Work): string {
 }
 
 export function workDetailRoute(workId: string, tab?: 'solutions' | 'messages'): string {
-    return `${selfServiceRootRoute}/work-items/${workId}${!!tab ? `\?tab=${tab}` : ''}`
+    return `${selfServiceRootRoute}/work-items/${workId}${!!tab ? `?tab=${tab}` : ''}`
 }
 
 export const workRoutes: Array<PlatformRoute> = [