Merge pull request #100 from topcoder-platform/PROD-2195_migrate-mfe

Prod 2195 migrate mfe

Author: brooketopcoder

src-ts/App.tsx

@@ -1,28 +1,23 @@
 import { FC, ReactElement, useContext } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
-import { analyticsInitialize, logInitialize, ProfileProvider } from './lib'
-import { routeContext, RouteContextData } from './lib/route-provider'
+import { analyticsInitialize, logInitialize, routeContext, RouteContextData } from './lib'
 
 analyticsInitialize(EnvironmentConfig)
 logInitialize(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 
-    const { allRoutes }: RouteContextData = useContext(routeContext)
+    const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
-        .map(route => {
-            // if the route has children, add the wildcard to the path
-            const path: string = `${route.route}${!route.children ? '' : '/*'}`
-            return (<Route path={path} element={route.element} key={route.title} />)
-        })
+        .map(route => getRouteElement(route))
 
     return (
-        <ProfileProvider>
+        <>
             <Header />
             <Routes>
                 {routeElements}
@@ -38,7 +33,7 @@ const App: FC<{}> = () => {
                 draggable
                 pauseOnHover
             />
-        </ProfileProvider>
+        </>
     )
 }
 

src-ts/config/constants.ts

@@ -1,5 +1,12 @@
 export enum ToolTitle {
-    designLib = 'Design Library',
-    settings = 'Profile Settings',
+    settings = 'Account Settings',
     work = 'Work',
 }
+
+export enum FooterSocialConfig {
+    facebook = 'https://www.facebook.com/topcoder',
+    youtube = 'https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA',
+    linkedin = 'https://www.linkedin.com/company/topcoder',
+    twitter = 'https://twitter.com/topcoder',
+    instagram = 'https://www.instagram.com/topcoder',
+}

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

@@ -8,7 +8,7 @@ import { EnvironmentConfigProd } from './environment.prod.config'
 
 function getEnvironmentConfig(): GlobalConfig {
 
-    switch (process.env.REACT_APP_HOST_ENV) {
+    switch (process.env.APPENV) {
 
         case AppHostEnvironment.bsouza:
             return EnvironmentConfigBsouza
@@ -23,7 +23,7 @@ function getEnvironmentConfig(): GlobalConfig {
             return EnvironmentConfigProd
 
         default:
-            throw new Error(`Cannot initialize an invalid host environment: ${process.env.REACT_APP_HOST_ENV}`)
+            return EnvironmentConfigDefault
     }
 }
 

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

@@ -4,6 +4,8 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        FORUM_ACCESS_TOKEN: 'va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV',
+        FORUM_V2: 'https://vanilla.topcoder-dev.com/api/v2',
         V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },

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

@@ -7,12 +7,11 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        FORUM_V2: 'https://vanilla.topcoder.com/api/v2',
         V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
-    DISABLED_TOOLS: [
-        ToolTitle.designLib,
-    ],
+    DISABLED_TOOLS: [ ],
     ENV: AppHostEnvironment.prod,
     TAG_MANAGER_ID: 'GTM-MXXQHG8',
     URL: {

src-ts/declarations.d.ts

@@ -1,6 +1,24 @@
 declare module '*.html' {
-    const rawHtmlFile: string
-    export = rawHtmlFile
+    const htmlFile: string
+    export = htmlFile
 }
 
+declare module '*.scss' {
+    const scssFile: { [style: string]: any }
+    export = scssFile
+}
+
+declare module '*.svg' {
+    import * as React from 'react'
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<
+        SVGSVGElement
+    > & { title?: string }>
+
+    const src: string
+    export default src
+}
+
+declare module '@topcoder/mfe-header'
+
 declare module 'tc-auth-lib'

src-ts/header/Header.module.scss

@@ -1,35 +1,27 @@
-@import '../lib/styles';
+@import '../lib/styles/includes';
+
+.header-wrap {
+    display: block;
+    background-color: $tc-black;
+}
 
 .header {
     display: grid;
     height: $header-height;
-    background-color: $tc-black;
     align-items: center;
-    padding: 0 $pad-xxl 0 0;
+    width: 100%;
+    margin: 0 auto;
+    max-width: $xxl-min;
+    @include pagePaddings;
+    grid-template-columns: 78px 1fr auto;
 
     @include ltemd {
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
+}
 
-    @include sm {
-        padding: 0 $pad-lg 0 0;
-    }
-
-    @include md {
-        grid-template-columns: $left-col-width-md 1fr auto;
-        padding: 0 $pad-lg 0 0;
-    }
-
-    @include lg {
-        grid-template-columns: $left-col-width-lg 1fr auto;
-    }
-
-    @include xl {
-        grid-template-columns: $left-col-width-xl 1fr auto;
-    }
-
-    @include xxl {
-        grid-template-columns: $left-col-width-xl 1fr auto;
-    }
+.subheader {
+    width: 100%;
+    position: relative;
 }

src-ts/header/Header.tsx

@@ -7,12 +7,15 @@ import { UtilitySelectors } from './utility-selectors'
 
 const Header: FC<{}> = () => {
     return (
-        <header className={styles.header}>
-            <ToolSelectors isWide={false} />
-            <Logo />
-            <ToolSelectors isWide={true} />
-            <UtilitySelectors />
-        </header>
+        <div className={styles['header-wrap']}>
+            <header className={styles.header}>
+                <ToolSelectors isWide={false} />
+                <Logo />
+                <ToolSelectors isWide={true} />
+                <UtilitySelectors />
+            </header>
+            <div id='page-subheader-portal-el' className={styles.subheader}></div>
+        </div>
     )
 }
 

src-ts/header/logo/Logo.module.scss

@@ -1,15 +1,16 @@
-@import '../../lib/styles';
+@import '../../lib/styles/includes';
 
 .logo-no-link,
 .logo-link {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+
+    a {
+        display: flex;
+    }
 
     svg {
         width: calc($pad-xxl + $pad-xxxxl);
         height: $pad-xl;
-        @extend .pad-xxl;
         fill: none;
 
         path {
@@ -20,10 +21,12 @@
             padding: 0;
         }
     }  
+    @include ltemd {
+        margin: 0 auto;
+    }
 }
 
 .logo-no-link {
-
     a {
         cursor: default;
     }

src-ts/header/logo/Logo.tsx

@@ -1,21 +1,26 @@
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { LogoIcon, routeIsActive, routeRoot } from '../../lib'
+import { LogoIcon, routeContext, RouteContextData } from '../../lib'
 import '../../lib/styles/index.scss'
 
 import styles from './Logo.module.scss'
 
 const Logo: FC<{}> = () => {
 
+    const {
+        isRootRoute,
+        rootLoggedInRoute,
+    }: RouteContextData = useContext(routeContext)
+
     // the logo should be a link to the home page for all pages except the home page
-    const isLink: boolean = routeIsActive(useLocation().pathname, routeRoot)
+    const isLink: boolean = !isRootRoute(useLocation().pathname)
 
     return (
-        <div className={styles[`logo-${isLink ? 'no-' : ''}link`]}>
+        <div className={styles[`logo-${!isLink ? 'no-' : ''}link`]}>
             <Link
                 tabIndex={-1}
-                to={routeRoot}
+                to={rootLoggedInRoute}
             >
                 <LogoIcon />
             </Link>