Merge pull request #613 from topcoder-platform/TCA-1281_update-urls

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

Author: vas3a

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])