TCA-1281 - update routing: support friendlier urls on subdomains -> dev

config/dev.js

@@ -1,4 +1,5 @@
 module.exports = {
+  TC_DOMAIN: 'topcoder-dev.com',
   /**
    * URL of Topcoder Community Website
    */

config/prod.js

@@ -1,4 +1,5 @@
 module.exports = {
+  TC_DOMAIN: 'topcoder.com',
   /**
    * URL of Topcoder Community Website
    */

src-ts/config/constants.ts

@@ -1,3 +1,10 @@
+export enum AppSubdomain {
+    dev = 'devcenter',
+    game = 'gamification-admin',
+    tca = 'academy',
+    work = 'work',
+}
+
 export enum ToolTitle {
     dev = 'Dev Center',
     game = 'Gamification Admin',

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

@@ -5,4 +5,6 @@ import { AppHostEnvironmentType } from './app-host-environment.type'
 export interface EnvironmentConfigModel extends GlobalConfig {
     // override the ENV var to require that it's defined in the type
     ENV: AppHostEnvironmentType,
+
+    SUBDOMAIN: string,
 }

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

@@ -40,6 +40,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         CUSTOMER_TOKEN:
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
+    SUBDOMAIN: window.location.hostname.split('.')[0],
     TOPCODER_URLS: {
         ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,

src-ts/lib/route-provider/platform-route.model.ts

@@ -1,4 +1,5 @@
 export interface PlatformRoute {
+    domain?: string
     alternativePaths?: Array<string>
     authRequired?: boolean
     children?: Array<PlatformRoute>

src-ts/lib/route-provider/route-functions/index.ts

@@ -1,4 +1,5 @@
 export {
     getActive as routeGetActive,
     getSignupUrl as routeGetSignupUrl,
+    matchAppRouter as routeMatchAppRouter,
 } from './route.functions'

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

@@ -5,7 +5,10 @@ import {
 } from '../../functions'
 import { PlatformRoute } from '../platform-route.model'
 
-export function getActive(currentLocation: string, toolRoutes: Array<PlatformRoute>): PlatformRoute | undefined {
+export function getActive(
+    currentLocation: string,
+    toolRoutes: Array<PlatformRoute>,
+): PlatformRoute | undefined {
     return toolRoutes.find(tool => isActiveTool(currentLocation, tool))
 }
 
@@ -33,3 +36,10 @@ function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
     return !!activePath.startsWith(toolRoute.route)
         || !!toolRoute.alternativePaths?.some(path => activePath.startsWith(path))
 }
+
+export function matchAppRouter(
+    activeDomain: string | undefined,
+    toolsRoutes: Array<PlatformRoute>,
+): PlatformRoute | undefined {
+    return !activeDomain ? undefined : toolsRoutes.find(toolRoutes => activeDomain === toolRoutes.domain)
+}

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

@@ -14,11 +14,12 @@ import { Location, Route, useLocation } from 'react-router-dom'
 import { authUrlLogin } from '../functions'
 import { LoadingSpinner } from '../loading-spinner'
 import { profileContext, ProfileContextData } from '../profile-provider'
+import { EnvironmentConfig } from '../../config'
 
 import { PlatformRoute } from './platform-route.model'
 import { RequireAuthProvider } from './require-auth-provider'
 import { RouteContextData } from './route-context-data.model'
-import { routeGetActive, routeGetSignupUrl } from './route-functions'
+import { routeGetActive, routeGetSignupUrl, routeMatchAppRouter } from './route-functions'
 import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
@@ -53,7 +54,13 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             ...utilsRoutes,
         ]
 
-        const activeRoute: PlatformRoute | undefined = routeGetActive(location.pathname, allRoutes)
+        let activeRoute: PlatformRoute | undefined = routeGetActive(location.pathname, allRoutes)
+        const matchedAppRouter: PlatformRoute | undefined = routeMatchAppRouter(EnvironmentConfig.SUBDOMAIN, allRoutes)
+
+        if (matchedAppRouter) {
+            allRoutes = [matchedAppRouter]
+            activeRoute = matchedAppRouter
+        }
 
         // TODO: support additional roles and landing pages
         const loggedInRoot: string = !profile

src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../../lib'
-import { toolTitle } from '../../../dev-center.routes'
+import { rootRoute, toolTitle } from '../../../dev-center.routes'
 import { LayoutDocHeader, MarkdownDoc } from '../../../dev-center-lib/MarkdownDoc'
 import useMarkdown from '../../../dev-center-lib/hooks/useMarkdown'
 
@@ -11,7 +11,7 @@ import styles from './GettingStartedGuide.module.scss'
 export const GettingStartedGuide: React.FC = () => {
     const { doc, toc, title }: ReturnType<typeof useMarkdown> = useMarkdown({ uri: gettingStartedGuide })
     const breadcrumb: Array<BreadcrumbItemModel> = React.useMemo(() => [
-        { name: toolTitle, url: '/dev-center' },
+        { name: toolTitle, url: rootRoute || '/' },
         { name: title, url: '#' },
     ], [title])
 

src-ts/tools/dev-center/dev-center-pages/community-app/landing-page/dev-center-get-started/GetStartedCardsContainer/GetStartedCardsContainer.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react'
 import { Button } from '../../../../../../../lib'
 import { ApiCornerIcon, ApiIcon, CommunityAppCornerIcon, CommunityAppIcon } from '../../../../../assets/i'
 import { DevCenterCard } from '../../dev-center-card'
+import { rootRoute } from '../../../../../dev-center.routes'
 
 import styles from './GetStartedCardsContainer.module.scss'
 
@@ -14,7 +15,7 @@ const GetStartedCardsContainer: FC = () => (
             title='Community App'
             titleClass={styles.communityTitle}
             description='Learn about Topcoder Community App and run started code.'
-            button={<Button route='/dev-center/getting-started' label='get started' className={styles.button} />}
+            button={<Button route={`${rootRoute}/getting-started`} label='get started' className={styles.button} />}
         />
         <DevCenterCard
             cornerIcon={<ApiCornerIcon />}

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

@@ -1,4 +1,4 @@
-import { ToolTitle } from '../../config'
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '../../config'
 import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
 const GettingStartedGuide: LazyLoadedComponent
@@ -9,6 +9,7 @@ const DevCenterLandingPage: LazyLoadedComponent
 
 const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
 
+export const rootRoute: string = EnvironmentConfig.SUBDOMAIN === AppSubdomain.dev ? '' : `/${AppSubdomain.dev}`
 export const toolTitle: string = ToolTitle.dev
 
 export const devCenterRoutes: ReadonlyArray<PlatformRoute> = [
@@ -23,8 +24,9 @@ export const devCenterRoutes: ReadonlyArray<PlatformRoute> = [
                 route: '/',
             },
         ],
+        domain: 'devcenter',
         element: <DevCenter />,
         id: toolTitle,
-        route: '/dev-center',
+        route: rootRoute,
     },
 ]

src-ts/tools/gamification-admin/game-lib/hooks/use-gamification-breadcrumb.hook.tsx

@@ -1,13 +1,13 @@
 import { BreadcrumbItemModel } from '../../../../lib'
-import { basePath } from '../../gamification-admin.routes'
 import { toolTitle } from '../../GamificationAdmin'
+import { rootRoute } from '../../gamification-admin.routes'
 
 export function useGamificationBreadcrumb(items: Array<BreadcrumbItemModel>): Array<BreadcrumbItemModel> {
 
     const breadcrumb: Array<BreadcrumbItemModel> = [
         {
             name: toolTitle,
-            url: basePath,
+            url: rootRoute,
         },
         ...items,
     ]

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

@@ -1,3 +1,4 @@
+import { AppSubdomain, EnvironmentConfig } from '../../config'
 import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '../../lib'
 
 import { toolTitle } from './GamificationAdmin'
@@ -7,16 +8,15 @@ const BadgeDetailPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badg
 const BadgeListingPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage'))
 const CreateBadgePage: LazyLoadedComponent = lazyLoad(() => import('./pages/create-badge/CreateBadgePage'))
 
+export const rootRoute: string = EnvironmentConfig.SUBDOMAIN === AppSubdomain.game ? '' : `/${AppSubdomain.game}`
 export const baseDetailPath: string = '/badge-detail'
 export const createBadgePath: string = '/create-badge'
 
-export const basePath: string = '/gamification-admin'
-
 export function badgeDetailPath(badgeId: string, view?: 'edit' | 'award'): string {
-    return `${basePath}${baseDetailPath}/${badgeId}${!!view ? `#${view}` : ''}`
+    return `${rootRoute}${baseDetailPath}/${badgeId}${!!view ? `#${view}` : ''}`
 }
 
-export const createBadgeRoute: string = `${basePath}${createBadgePath}`
+export const createBadgeRoute: string = `${rootRoute}${createBadgePath}`
 
 export const gamificationAdminRoutes: ReadonlyArray<PlatformRoute> = [
     {
@@ -41,6 +41,6 @@ export const gamificationAdminRoutes: ReadonlyArray<PlatformRoute> = [
         rolesRequired: [
             UserRole.gamificationAdmin,
         ],
-        route: basePath,
+        route: rootRoute,
     },
 ]

src-ts/tools/gamification-admin/pages/create-badge/create-badge-form/create-badge-form.config.tsx

@@ -2,6 +2,7 @@ import { noop } from 'lodash'
 
 import { FormDefinition, IconOutline, validatorRequired } from '../../../../../lib'
 import { GamificationConfig } from '../../../game-config'
+import { rootRoute } from '../../../gamification-admin.routes'
 
 export enum CreateBadgeFormField {
     badgeActive = 'badgeActive',
@@ -26,7 +27,7 @@ export const createBadgeFormDef: FormDefinition = {
             {
                 buttonStyle: 'icon-bordered',
                 icon: IconOutline.ChevronLeftIcon,
-                route: '/gamification-admin',
+                route: rootRoute,
                 size: 'lg',
             },
         ],

src-ts/tools/learn/learn-lib/learn-breadcrumb-provider/useLearnBreadcrumb.provider.tsx

@@ -6,7 +6,7 @@ export function useLearnBreadcrumb(items: Array<BreadcrumbItemModel>): Array<Bre
     const breadcrumb: Array<BreadcrumbItemModel> = [
         {
             name: 'Topcoder Academy',
-            url: rootRoute,
+            url: rootRoute || '/',
         },
         ...items,
     ]

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

@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from '../../config'
+import { AppSubdomain, EnvironmentConfig } from '../../config'
 import { authUrlLogin, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
 import { toolTitle } from './Learn'
@@ -35,18 +35,17 @@ const UserCertificationView: LazyLoadedComponent
 const UserCertificationPreview: LazyLoadedComponent
     = lazyLoad(() => import('./tca-certificate'), 'UserCertificationPreview')
 
-export enum LEARN_PATHS {
-    certificate = '/certificate',
-    completed = '/learn/completed',
-    myLearning = '/learn/my-learning',
-    fcc = '/learn/fcc',
-    root = '/learn',
-    startCourseRouteFlag = 'start-course',
-    tcaCertifications = '/tca-certifications',
-    tcaEnroll = '/enroll',
+export const rootRoute: string = EnvironmentConfig.SUBDOMAIN === AppSubdomain.tca ? '' : `/${AppSubdomain.tca}`
+
+export const LEARN_PATHS: { [key: string]: string } = {
+    certificate: '/certificate',
+    myLearning: `${rootRoute}/my-learning`,
+    root: rootRoute,
+    startCourseRouteFlag: 'start-course',
+    tcaCertifications: '/tca-certifications',
+    tcaEnroll: '/enroll',
 }
 
-export const rootRoute: string = LEARN_PATHS.root
 export const absoluteRootRoute: string = `${window.location.origin}${LEARN_PATHS.root}`
 
 export function getAuthenticateAndStartCourseRoute(): string {
@@ -241,6 +240,7 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
                 route: 'tca-certifications/:certification/preview',
             },
         ],
+        domain: AppSubdomain.tca,
         element: <LandingLearn />,
         id: toolTitle,
         route: rootRoute,

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config.ts

@@ -2,10 +2,10 @@ import { WorkType } from './work-type.enum'
 
 export const WorkIntakeFormRoutes: Record<string, any> = {
     [WorkType.bugHunt]: {
-        basicInfo: '/self-service/work/new/bug-hunt/basic-info',
-        loginPrompt: '/self-service/work/new/bug-hunt/login-prompt',
-        review: '/self-service/work/new/bug-hunt/review',
-        saveAfterLogin: '/self-service/work/new/bug-hunt/save-after-login',
-        thankYou: '/self-service/work/new/bug-hunt/thank-you',
+        basicInfo: '/self-service/new/bug-hunt/basic-info',
+        loginPrompt: '/self-service/new/bug-hunt/login-prompt',
+        review: '/self-service/new/bug-hunt/review',
+        saveAfterLogin: '/self-service/new/bug-hunt/save-after-login',
+        thankYou: '/self-service/new/bug-hunt/thank-you',
     },
 }

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

@@ -1,6 +1,7 @@
 import { Navigate } from 'react-router-dom'
 
 import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
+import { AppSubdomain, EnvironmentConfig } from '../../config'
 
 import { dashboardRouteId, intakeFormsRouteId, toolTitle } from './Work'
 import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './work-lib'
@@ -16,8 +17,8 @@ const SaveAfterLogin: LazyLoadedComponent
 const WorkTable: LazyLoadedComponent = lazyLoad(() => import('./work-table'), 'WorkTable')
 const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou')
 
-export const rootRoute: string = '/work'
-export const selfServiceRootRoute: string = '/self-service'
+export const rootRoute: string = EnvironmentConfig.SUBDOMAIN === AppSubdomain.work ? '' : `/${AppSubdomain.work}`
+export const selfServiceRootRoute: string = `${rootRoute}/self-service`
 export const selfServiceStartRoute: string = `${selfServiceRootRoute}/wizard`
 export const dashboardRoute: string = `${rootRoute}/dashboard`
 export const bugHuntRoute: string = 'bug-hunt/'
@@ -114,20 +115,16 @@ export const workRoutes: ReadonlyArray<PlatformRoute> = [
         element: <IntakeForms />,
         hidden: true,
         id: intakeFormsRouteId,
-        route: `${selfServiceRootRoute}${rootRoute}/new`,
+        route: `${selfServiceRootRoute}/new`,
         title: toolTitle,
     },
-    {
-        element: <Navigate to={rootRoute} />,
-        route: selfServiceRootRoute,
-    },
     {
         element: <Navigate to={dashboardRoute} />,
         route: `${selfServiceRootRoute}/dashboard`,
     },
     {
         children: [],
         element: <Navigate to={contactSupportPath} />,
-        route: `${rootRoute}${contactSupportPath}`,
+        route: `${contactSupportPath}`,
     },
 ]

src/App.jsx

@@ -9,6 +9,7 @@ import { ScrollToTop } from "./ScrollToTop";
 import styles from "./styles/main.module.scss";
 import { lazyLoad, LoadingSpinner } from "../src-ts/lib";
 import { Suspense } from "react";
+import { selfServiceRootRoute } from "../src-ts/tools/work";
 
 const WorkItem = lazyLoad(() => import("./routes/WorkItems"));
 const IntakeForm = lazyLoad(() => import("./IntakeForm"));
@@ -47,11 +48,11 @@ const App = () => {
             <Routes>
                 <Route
                     element={<IntakeForm />}
-                    path="/self-service/*"
+                    path={`${selfServiceRootRoute}/*`}
                 />
                 <Route
                     element={<WorkItem />}
-                    path="/self-service/work-items/:workItemId"
+                    path={`${selfServiceRootRoute}/work-items/:workItemId`}
                 />
             </Routes>
         </Suspense>

src/IntakeForm.jsx

@@ -168,32 +168,32 @@ export default function IntakeForm() {
           {/* Data Exploration */}
           <Route
             element={<DataExploration isLoggedIn={isLoggedIn} />}
-            path="/work/new/data-exploration/*"
+            path="/new/data-exploration/*"
           />
 
           {/* Data Advisory */}
           <Route
             element={<DataAdvisory isLoggedIn={isLoggedIn} />}
-            path="/work/new/data-advisory/*"
+            path="/new/data-advisory/*"
 
           />
 
           {/* Find Me Data */}
           <Route
             element={<FindMeData isLoggedIn={isLoggedIn} />}
-            path="/work/new/find-me-data/*"
+            path="/new/find-me-data/*"
           />
 
           {/* Web Design*/}
           <Route
             element={<WebsiteDesign isLoggedIn={isLoggedIn} />}
-            path="/work/new/website-design/*"
+            path="/new/website-design/*"
           />
 
           {/* Web Design (Legacy) */}
           <Route
             element={<WebsiteDesignLegacy isLoggedIn={isLoggedIn} />}
-            path="/work/new/website-design-legacy/*"
+            path="/new/website-design-legacy/*"
           />
 
           <Route