PROD-3245 #comment This commit removes the customer- and member-specific top nav. It also adds IDs to the routes so we can ID them separately from the title and the titles don't need to be unique. Finally, it sets the self-service tool to use the same tool name for all its pages. #time 2h

brooketopcoder · brooketopcoder · commit 6425c9f2f015 · 2022-11-23T09:54:03.000-08:00
diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts
@@ -2,8 +2,9 @@ export enum ToolTitle {
     dev = 'Dev Center',
     game = 'Gamification Admin',
     settings = 'Account Settings',
+    support = 'Support',
     tca = 'Topcoder Academy',
-    work = 'Self-Service',
+    work = 'Self-Service Challenges',
 }
 
 export const PageSubheaderPortalId: string = 'page-subheader-portal-el'
diff --git a/src-ts/lib/functions/authentication-functions/authentication.functions.ts b/src-ts/lib/functions/authentication-functions/authentication.functions.ts
@@ -26,7 +26,7 @@ export function getRegistrationSource(
     activeTool: PlatformRoute | undefined,
 ): AuthenticationRegistrationSource | undefined {
 
-    switch (activeTool?.title) {
+    switch (activeTool?.id) {
 
         // currently, there is no reg source for members
         case ToolTitle.tca:
diff --git a/src-ts/lib/route-provider/platform-route.model.ts b/src-ts/lib/route-provider/platform-route.model.ts
@@ -2,11 +2,10 @@ export interface PlatformRoute {
     alternativePaths?: Array<string>
     authRequired?: boolean
     children?: Array<PlatformRoute>
-    customerOnly?: boolean
     disabled?: boolean
     element: JSX.Element
     hidden?: boolean
-    memberOnly?: boolean
+    id?: string
     rolesRequired?: Array<string>
     route: string
     title?: string
diff --git a/src-ts/lib/route-provider/route-context-data.model.ts b/src-ts/lib/route-provider/route-context-data.model.ts
@@ -8,7 +8,6 @@ export interface RouteContextData {
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
     getChildRoutes: (parent: string) => Array<ReactElement>
-    getPath: (routeTitle: string) => string
     getPathFromRoute: (route: PlatformRoute) => string
     getRouteElement: (route: PlatformRoute) => JSX.Element
     getSignupUrl: (currentLocation: string, toolRoutes: Array<PlatformRoute>, returnUrl?: string) => string
@@ -17,6 +16,5 @@ export interface RouteContextData {
     rootLoggedInRoute: string
     rootLoggedOutFC: FC<{}>
     toolsRoutes: Array<PlatformRoute>
-    toolsRoutesForNav: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>
 }
diff --git a/src-ts/lib/route-provider/route-functions/index.ts b/src-ts/lib/route-provider/route-functions/index.ts
@@ -1,4 +1,4 @@
 export {
+    getActive as routeGetActive,
     getSignupUrl as routeGetSignupUrl,
-    isActiveTool as routeIsActiveTool,
 } from './route.functions'
diff --git a/src-ts/lib/route-provider/route-functions/route.functions.ts b/src-ts/lib/route-provider/route-functions/route.functions.ts
@@ -5,6 +5,10 @@ import {
 } from '../../functions'
 import { PlatformRoute } from '../platform-route.model'
 
+export function getActive(currentLocation: string, toolRoutes: Array<PlatformRoute>): PlatformRoute | undefined {
+    return toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+}
+
 // NOTE: this function ties together routes and auth,
 // so one could make an argument that it should be
 // part of the auth functions and be provided by the
@@ -18,14 +22,14 @@ export function getSignupUrl(
 ): string {
 
     // figure out the current tool so we can assign the correct reg source
-    const activeTool: PlatformRoute | undefined = toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+    const activeTool: PlatformRoute | undefined = getActive(currentLocation, toolRoutes)
     const regSource: AuthenticationRegistrationSource | undefined
         = authGetRegistrationSource(activeTool)
 
     return authUrlSignup(returnUrl, regSource)
 }
 
-export function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
+function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
     return !!activePath.startsWith(toolRoute.route)
         || !!toolRoute.alternativePaths?.some(path => activePath.startsWith(path))
 }
diff --git a/src-ts/lib/route-provider/route.context.tsx b/src-ts/lib/route-provider/route.context.tsx
@@ -4,9 +4,8 @@ import { RouteContextData } from './route-context-data.model'
 
 export const defaultRouteContextData: RouteContextData = {
     allRoutes: [],
-    getChildRoutes: () => [],
     getChildren: () => [],
-    getPath: () => '',
+    getChildRoutes: () => [],
     getPathFromRoute: () => '',
     getRouteElement: () => <></>,
     getSignupUrl: () => '',
@@ -15,7 +14,6 @@ export const defaultRouteContextData: RouteContextData = {
     rootLoggedInRoute: '',
     rootLoggedOutFC: () => <></>,
     toolsRoutes: [],
-    toolsRoutesForNav: [],
     utilsRoutes: [],
 }
 
diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx
@@ -18,7 +18,7 @@ import { profileContext, ProfileContextData } from '../profile-provider'
 import { PlatformRoute } from './platform-route.model'
 import { RequireAuthProvider } from './require-auth-provider'
 import { RouteContextData } from './route-context-data.model'
-import { routeGetSignupUrl, routeIsActiveTool } from './route-functions'
+import { routeGetActive, routeGetSignupUrl } from './route-functions'
 import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
@@ -47,39 +47,14 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         // TODO: try to make these prop names configurable instead of hard-codded
         const toolsRoutes: Array<PlatformRoute> = props.toolsRoutes.filter(route => !route.disabled)
 
-        // display a tool in the nav if the following conditions are met:
-        // 1. the tool has a title
-        // 2. the tool isn't hidden (if the tool is hidden, it should never appear in the nav)
-        // AND
-        // 3. the tool is one of the following:
-        //    a. for customers and the user is a customer
-        //    b. for members and the user is a member
-        //    c. the active tool in the app (in case someone deep-links to it)
-        let activeRoute: PlatformRoute | undefined
-        const toolsRoutesForNav: Array<PlatformRoute> = toolsRoutes
-            .filter(route => {
-
-                const isActive: boolean = routeIsActiveTool(location.pathname, route)
-                if (isActive) {
-                    activeRoute = route
-                }
-
-                return !!route.title
-                    && !route.hidden
-                    && (
-                        (
-                            (!route.customerOnly || !!profile?.isCustomer)
-                            && (!route.memberOnly || !!profile?.isMember)
-                        )
-                        || isActive
-                    )
-            })
-
         const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => !route.disabled)
         allRoutes = [
             ...toolsRoutes,
             ...utilsRoutes,
         ]
+
+        const activeRoute: PlatformRoute | undefined = routeGetActive(location.pathname, allRoutes)
+
         // TODO: support additional roles and landing pages
         const loggedInRoot: string = !profile
             ? ''
@@ -88,12 +63,11 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
                 : props.rootMember
 
         const contextData: RouteContextData = {
-            activeToolName: activeRoute?.title,
+            activeToolName: activeRoute?.title || activeRoute?.id,
             activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined,
             allRoutes,
             getChildren,
             getChildRoutes,
-            getPath,
             getPathFromRoute,
             getRouteElement,
             getSignupUrl: routeGetSignupUrl,
@@ -102,15 +76,14 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             rootLoggedInRoute: loggedInRoot,
             rootLoggedOutFC: props.rootLoggedOutFC,
             toolsRoutes,
-            toolsRoutesForNav,
             utilsRoutes,
         }
         setRouteContextData(contextData)
     }
 
     function getChildren(parent: string): Array<PlatformRoute> {
         return allRoutes
-            .find(route => route.title === parent)
+            .find(route => route.id === parent)
             ?.children
             || []
     }
@@ -120,12 +93,6 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             .map(route => getRouteElement(route))
     }
 
-    function getPath(routeTitle: string): string {
-        const platformRoute: PlatformRoute = allRoutes.find(route => route.title === routeTitle) as PlatformRoute
-        // if the path has a trailing asterisk, remove it
-        return getPathFromRoute(platformRoute)
-    }
-
     function getPathFromRoute(route: PlatformRoute): string {
         return route.route.replace('/*', '')
     }
diff --git a/src-ts/tools/dev-center/dev-center.routes.tsx b/src-ts/tools/dev-center/dev-center.routes.tsx
@@ -11,7 +11,7 @@ const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
 
 export const toolTitle: string = ToolTitle.dev
 
-export const devCenterRoutes: Array<PlatformRoute> = [
+export const devCenterRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [
             {
@@ -24,8 +24,7 @@ export const devCenterRoutes: Array<PlatformRoute> = [
             },
         ],
         element: <DevCenter />,
-        memberOnly: true,
+        id: toolTitle,
         route: '/dev-center',
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx
@@ -18,7 +18,7 @@ export function badgeDetailPath(badgeId: string, view?: 'edit' | 'award'): strin
 
 export const createBadgeRoute: string = `${basePath}${createBadgePath}`
 
-export const gamificationAdminRoutes: Array<PlatformRoute> = [
+export const gamificationAdminRoutes: ReadonlyArray<PlatformRoute> = [
     {
         authRequired: true,
         children: [
@@ -37,10 +37,10 @@ export const gamificationAdminRoutes: Array<PlatformRoute> = [
         ],
         element: <GamificationAdmin />,
         hidden: true,
+        id: toolTitle,
         rolesRequired: [
             UserRole.gamificationAdmin,
         ],
         route: basePath,
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx
@@ -82,55 +82,54 @@ export function getViewStyleParamKey(): string {
     return Object.keys(LearnConfig.CERT_ALT_PARAMS)[0]
 }
 
-export const learnRoutes: Array<PlatformRoute> = [
+export const learnRoutes: ReadonlyArray<PlatformRoute> = [
     {
         children: [
             {
                 children: [],
                 element: <WelcomePage />,
+                id: 'Welcome to Topcoder Academy',
                 route: '',
-                title: 'Welcome to Topcoder Academy',
             },
             {
                 children: [],
                 element: <CourseDetailsPage />,
+                id: 'Course Details',
                 route: ':provider/:certification',
-                title: 'Course Details',
             },
             {
                 children: [],
                 element: <CourseCompletedPage />,
+                id: 'Course Completed',
                 route: ':provider/:certification/completed',
-                title: 'Course Completed',
             },
             {
                 children: [],
                 element: <MyCertificate />,
+                id: 'My Certificate',
                 route: ':provider/:certification/certificate',
-                title: 'My Certificate',
             },
             {
                 children: [],
                 element: <UserCertificate />,
+                id: 'User Certificate',
                 route: ':provider/:certification/:memberHandle/certificate',
-                title: 'User Certificate',
             },
             {
                 children: [],
                 element: <FreeCodeCamp />,
+                id: 'FxreeCodeCamp',
                 route: ':provider/:certification/:module/:lesson',
-                title: 'FreeCodeCamp',
             },
             {
                 children: [],
                 element: <MyLearning />,
+                id: 'My Learning',
                 route: 'my-learning',
-                title: 'My Learning',
             },
         ],
         element: <LandingLearn />,
-        memberOnly: true,
+        id: toolTitle,
         route: rootRoute,
-        title: toolTitle,
     },
 ]
diff --git a/src-ts/tools/tools.routes.ts b/src-ts/tools/tools.routes.ts
@@ -5,9 +5,10 @@ import { gamificationAdminRoutes } from './gamification-admin'
 import { learnRoutes } from './learn'
 import { workRoutes } from './work'
 
-const toolRoutes: Array<PlatformRoute> = [
-    // NOTE: these will be displayed in the order they are defined in this array
-    // TODO: support ordering
+const toolRoutes: ReadonlyArray<PlatformRoute> = [
+    // NOTE: Order matters here bc the active tool
+    // is determined by finding the first route
+    // that matches the current path
     ...workRoutes,
     ...devCenterRoutes,
     ...learnRoutes,
diff --git a/src-ts/tools/work/Work.tsx b/src-ts/tools/work/Work.tsx
@@ -1,6 +1,7 @@
-import { Dispatch, FC, useContext } from 'react'
+import { Dispatch, FC, useCallback, useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import { Navigate, NavigateFunction, Outlet, Routes, useNavigate } from 'react-router-dom'
+import { AnyAction } from 'redux'
 
 // TODO: move this from the legacy to the nextgen app
 import { resetIntakeForm } from '../../../src/actions/form'
@@ -23,15 +24,26 @@ import { WorkProvider } from './work-lib'
 import { selfServiceRootRoute, selfServiceStartRoute } from './work.routes'
 
 export const toolTitle: string = ToolTitle.work
-export const dashboardTitle: string = `${toolTitle} Dashboard`
+export const dashboardRouteId: string = `${toolTitle} Dashboard`
+export const intakeFormsRouteId: string = `${toolTitle} Intake Forms`
 
 const Work: FC<{}> = () => {
 
     const { getChildRoutes }: RouteContextData = useContext(routeContext)
     const { profile, initialized }: ProfileContextData = useContext(profileContext)
-    const dispatch: Dispatch<any> = useDispatch()
+    const dispatch: Dispatch<AnyAction> = useDispatch()
     const navigate: NavigateFunction = useNavigate()
 
+    const startWork: () => void = useCallback(() => {
+        clearCachedChallengeId()
+        clearAutoSavedForm()
+        dispatch(resetIntakeForm(true))
+        navigate(selfServiceStartRoute)
+    }, [
+        dispatch,
+        navigate,
+    ])
+
     // if a user arrives here who is not logged in, don't let them get to the page
     if (!profile) {
 
@@ -44,13 +56,6 @@ const Work: FC<{}> = () => {
         return <Navigate to={selfServiceRootRoute} />
     }
 
-    function startWork(): void {
-        clearCachedChallengeId()
-        clearAutoSavedForm()
-        dispatch(resetIntakeForm(true))
-        navigate(selfServiceStartRoute)
-    }
-
     const buttonConfig: ButtonProps = {
         label: 'Start work',
         onClick: startWork,
@@ -64,7 +69,7 @@ const Work: FC<{}> = () => {
             <WorkProvider>
                 <Outlet />
                 <Routes>
-                    {getChildRoutes(dashboardTitle)}
+                    {getChildRoutes(dashboardRouteId)}
                 </Routes>
             </WorkProvider>
         </ContentLayout>
diff --git a/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx b/src-ts/tools/work/work-self-service/intake-forms/IntakeForms.tsx
@@ -6,8 +6,7 @@ import {
     routeContext,
     RouteContextData,
 } from '../../../../lib'
-
-export const intakeFormsTitle: string = 'Work Intake Forms'
+import { intakeFormsRouteId } from '../../Work'
 
 const IntakeForms: FC<{}> = () => {
 
@@ -17,7 +16,7 @@ const IntakeForms: FC<{}> = () => {
         <ContentLayout>
             <Outlet />
             <Routes>
-                {getChildRoutes(intakeFormsTitle)}
+                {getChildRoutes(intakeFormsRouteId)}
             </Routes>
         </ContentLayout>
     )
diff --git a/src-ts/tools/work/work-self-service/intake-forms/index.ts b/src-ts/tools/work/work-self-service/intake-forms/index.ts
diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx
diff --git a/src-ts/utils/contact-support/ContactSupport.tsx b/src-ts/utils/contact-support/ContactSupport.tsx
diff --git a/src-ts/utils/contact-support/contact-support.routes.tsx b/src-ts/utils/contact-support/contact-support.routes.tsx
diff --git a/src-ts/utils/home/home.routes.tsx b/src-ts/utils/home/home.routes.tsx
diff --git a/src-ts/utils/settings/settings.routes.tsx b/src-ts/utils/settings/settings.routes.tsx
diff --git a/src-ts/utils/utils.routes.tsx b/src-ts/utils/utils.routes.tsx

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))`
`11`	`11`
`12`	`12`	`export const toolTitle: string = ToolTitle.dev`
`13`	`13`
`14`		`-export const devCenterRoutes: Array<PlatformRoute> = [`
	`14`	`+export const devCenterRoutes: ReadonlyArray<PlatformRoute> = [`
`15`	`15`	`{`
`16`	`16`	`children: [`
`17`	`17`	`{`
`@@ -24,8 +24,7 @@ export const devCenterRoutes: Array<PlatformRoute> = [`
`24`	`24`	`},`
`25`	`25`	`],`
`26`	`26`	`element: <DevCenter />,`
`27`		`- memberOnly: true,`
	`27`	`+ id: toolTitle,`
`28`	`28`	`route: '/dev-center',`
`29`		`- title: toolTitle,`
`30`	`29`	`},`
`31`	`30`	`]`