PROD-2195 remove mfe -> PROD-2195_migrate

config-overrides.js

@@ -0,0 +1,3 @@
+const { removeModuleScopePlugin } = require('customize-cra')
+
+module.exports = removeModuleScopePlugin()

package.json

@@ -10,15 +10,16 @@
         "build:dev": "sh build-dev.sh",
         "build:prod": "sh build-prod.sh",
         "eject": "react-scripts eject",
-        "lint": "tslint src-ts/**/*.{ts,tsx}",
-        "lint:fix": "tslint src-ts/**/*.{ts,tsx} --fix",
+        "lint": "tslint 'src-ts/**/*.{ts,tsx}'",
+        "lint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix",
+        "eslint": "eslint 'src/**/*.{js,jsx}'",
+        "eslint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
         "test": "react-scripts test",
         "test:no-watch": "npm test -- --watchAll=false"
     },
     "dependencies": {
         "@datadog/browser-logs": "^4.5.0",
         "@heroicons/react": "^1.0.6",
-        "@reach/router": "^1.3.4",
         "apexcharts": "^3.35.3",
         "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
@@ -87,8 +88,10 @@
         "concurrently": "^5.0.1",
         "config": "^3.3.6",
         "cross-env": "^7.0.2",
-        "eslint": "^6.7.2",
+        "customize-cra": "^1.0.0",
+        "eslint": "^8.18.0",
         "eslint-config-prettier": "^6.7.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-config-react-important-stuff": "^2.0.0",
         "eslint-plugin-prettier": "^3.1.1",
         "file-loader": "^6.2.0",
@@ -99,6 +102,7 @@
         "postcss-scss": "^3.0.2",
         "prettier": "^2.0.4",
         "pretty-quick": "^2.0.1",
+        "react-app-rewired": "^2.2.1",
         "resolve-url-loader": "^3.1.2",
         "sass": "^1.48.0",
         "sass-loader": "^10.0.5",

public/index.html

@@ -8,6 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description"
     content="Topcoder is home to the world’s largest community of designers, developers, and data scientists. Allowing you the freedom to start and execute faster." />
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Barlow'>
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Barlow Condensed'>
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />

src-ts/App.tsx

@@ -21,7 +21,7 @@ const App: FC<{}> = () => {
             <Header />
             <Routes>
                 {routeElements}
-            </Routes >
+            </Routes>
             <ToastContainer
                 position={toast.POSITION.TOP_RIGHT}
                 autoClose={3000}

src-ts/config/constants.ts

@@ -2,11 +2,3 @@ export enum ToolTitle {
     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/declarations.d.ts

@@ -19,6 +19,4 @@ declare module '*.svg' {
     export default src
 }
 
-declare module '@topcoder/mfe-header'
-
 declare module 'tc-auth-lib'

src-ts/index.ts

@@ -10,10 +10,15 @@ export {
      OrderContractModal,
      PageFooter,
      PrivacyPolicyModal,
+     profileContext,
      ProfileProvider,
      RouteProvider,
      TabsNavbar,
      TermsModal,
+     xhrGetAsync,
+     xhrGetBlobAsync,
+     xhrPatchAsync,
+     xhrPostAsync,
 } from './lib'
 export * from './tools'
 export * from './utils'

src-ts/index.tsx

@@ -3,19 +3,23 @@ import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 
 import { default as App } from './App'
-import { EnvironmentConfig } from './config'
 import './index.scss'
 import { RouteProvider } from './lib'
 import reportWebVitals from './reportWebVitals'
-import { ToolsRoutes } from './tools'
+import {
+    routeRootLoggedIn,
+    routeRootLoggedOut,
+    ToolsRoutes,
+} from './tools'
 import { UtilsRoutes } from './utils'
 
 ReactDOM.render(
     <BrowserRouter>
         <RouteProvider
-            config={EnvironmentConfig}
             toolsRoutes={[...ToolsRoutes]}
             utilsRoutes={[...UtilsRoutes]}
+            rootLoggedIn={routeRootLoggedIn}
+            rootLoggedOut={routeRootLoggedOut}
         >
             <StrictMode>
                 <App />

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -14,6 +14,9 @@
 
     ol {
         display: flex;
+        padding-left: 0px;
+        margin: 0;
+
         &.hidden-mobile {
             @include ltemd {
                 display: none;
@@ -26,7 +29,7 @@
             }
         }
 
-        > li {
+        >li {
             display: inline-flex;
             align-items: center;
             padding: 0;
@@ -37,6 +40,7 @@
                 padding: $pad-md;
                 color: $black-80;
                 cursor: pointer;
+
                 &.elipsis {
                     color: $turq-160;
                 }
@@ -69,4 +73,4 @@
             }
         }
     }
-}
+}

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -51,7 +51,6 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                                         }}
                                     />
                                 </>
-
                             )
                         }
                     </>

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -1,5 +1,5 @@
-import { Link } from '@reach/router'
 import { FC } from 'react'
+import { Link } from 'react-router-dom'
 
 import styles from './../Breadcrumb.module.scss'
 import { BreadcrumbItemModel } from './breadcrumb-item.model'

src-ts/lib/functions/xhr-functions/index.ts

@@ -1,6 +1,7 @@
 export {
     deleteAsync as xhrDeleteAsync,
     getAsync as xhrGetAsync,
+    getBlobAsync as xhrGetBlobAsync,
     patchAsync as xhrPatchAsync,
     postAsync as xhrPostAsync,
     putAsync as xhrPutAsync,

src-ts/lib/functions/xhr-functions/xhr.functions.ts

@@ -38,6 +38,11 @@ export async function getAsync<T>(url: string): Promise<T> {
     return output.data
 }
 
+export async function getBlobAsync<T>(url: string): Promise<T> {
+    const output: AxiosResponse<T> = await xhrInstance.get(url, { responseType: 'blob' })
+    return output.data
+}
+
 export async function patchAsync<T, R>(url: string, data: T): Promise<R> {
     const output: AxiosResponse<R> = await xhrInstance.patch(url, data)
     return output.data

src-ts/lib/index.ts

@@ -19,6 +19,9 @@ export {
     useOnHoverElement,
     xhrDeleteAsync,
     xhrGetAsync,
+    xhrGetBlobAsync,
+    xhrPatchAsync,
+    xhrPostAsync,
 } from './functions'
 export * from './loading-spinner'
 export * from './modals'

src-ts/lib/modals/order-contract-modal/OrderContractModal.tsx

@@ -27,6 +27,7 @@ const OrderContractModal: FC<OrderContractModal> = ({ isOpen, onClose }: OrderCo
                     target='_blank'
                     className={styles.topCoderLink}
                     href='https://www.topcoder.com/'
+                    rel='noreferrer'
                 >
                     https://www.topcoder.com/{' '}
                 </a>{' '}

src-ts/lib/modals/privacy-policy-modal/PrivacyPolicyModal.module.scss

@@ -5,6 +5,7 @@
 
     ol {
         padding: 0;
+        list-style: none;
     }
 
     h4 {

src-ts/lib/modals/terms-modal/TermsModal.module.scss

@@ -5,6 +5,7 @@
 
     ol {
         padding: 0;
+        list-style: none;
     }
 
     h4 {

src-ts/lib/modals/terms-modal/TermsModal.tsx

@@ -25,7 +25,7 @@ const TermsModal: FC<TermsModal> = ({ isOpen, onClose }: TermsModal) => (
                         This User Agreement (the "<strong>Agreement</strong>") is a contract
                         between you (referred to herein as "User") and Topcoder LLC.
                         ("Topcoder") and applies to User's use and viewing of
-                        <a href='https://www.topcoder.com/' target='_blank'>
+                        <a href='https://www.topcoder.com/' target='_blank' rel='noreferrer'>
                             {' '}
                             topcoder.com
                         </a>
@@ -59,7 +59,7 @@ const TermsModal: FC<TermsModal> = ({ isOpen, onClose }: TermsModal) => (
                             <li>
                                 User agrees to comply with all terms of the Topcoder Privacy
                                 Policy available at
-                                <a href='https://www.topcoder.com/policy/privacy-policy/' target='_blank'>
+                                <a href='https://www.topcoder.com/policy/privacy-policy/' target='_blank' rel='noreferrer'>
                                     {' '}
                                     https://www.topcoder.com/policy/privacy-policy/
                                 </a>

src-ts/lib/page-footer/PageFooter.tsx

@@ -1,9 +1,8 @@
 import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react'
 
-import { FooterSocialConfig } from '../../config'
 import { ContactSupportModal, OrderContractModal, PrivacyPolicyModal, TermsModal } from '../modals'
 import { ProfileProvider } from '../profile-provider'
-import { SocialLink, SocialLinkIcons } from '../social-links'
+import { Facebook, Instagram, LinkedIn, Twitter, Youtube } from '../social-links'
 
 import styles from './PageFooter.module.scss'
 
@@ -71,9 +70,11 @@ const PageFooter: FC<{}> = () => {
                     </div>
                 </div>
                 <div className={styles.social}>
-                    {Object.entries(FooterSocialConfig).map(([platform, url]: [string, string]) => (
-                        <SocialLink icon={platform as keyof typeof SocialLinkIcons} url={url} />
-                    ))}
+                    <Facebook />
+                    <Youtube />
+                    <LinkedIn />
+                    <Twitter />
+                    <Instagram />
                 </div>
             </div>
         </div>

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

@@ -4,6 +4,7 @@ import { UserProfile } from './user-profile.model'
 export interface ProfileContextData {
     changePassword: (userId: number, request: ChangePasswordRequest) => Promise<void>
     initialized: boolean
+    isLoggedIn: boolean
     profile?: UserProfile
     updateProfile: (updatedProfileContext: ProfileContextData) => Promise<void>
 }

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

@@ -1,6 +1,3 @@
-// tslint:disable-next-line: no-implicit-dependencies // TODO: create types
-import { updateUserProfile } from '@topcoder/mfe-header'
-
 import { tokenGetAsync } from '../../functions/token-functions'
 import { EditNameRequest } from '../edit-name-request.model'
 import { UserProfile } from '../user-profile.model'
@@ -14,7 +11,4 @@ export async function getAsync(handle?: string): Promise<UserProfile | undefined
 
 export async function editNameAsync(handle: string, profile: EditNameRequest): Promise<any> {
     return profileStorePatchName(handle, profile)
-        .then(result => {
-            updateUserProfile(result.firstName, result.lastName)
-        })
 }

src-ts/lib/profile-provider/profile.context.tsx

@@ -5,6 +5,7 @@ import { ProfileContextData } from './profile-context-data.model'
 export const defaultProfileContextData: ProfileContextData = {
     changePassword: () => Promise.resolve(),
     initialized: false,
+    isLoggedIn: false,
     updateProfile: () => Promise.resolve(undefined),
 }
 

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

@@ -47,6 +47,7 @@ export const ProfileProvider: FC<{ children: ReactNode }> = ({ children }: { chi
             const contextData: ProfileContextData = {
                 changePassword,
                 initialized: true,
+                isLoggedIn: !!profile,
                 profile,
                 updateProfile,
             }

src-ts/lib/social-links/facebook/Facebook.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+import { SocialIconFacebook } from '../../svgs'
+import { SocialLink } from '../social-link'
+
+const Facebook: FC<{}> = () => {
+
+    return (
+        <SocialLink
+            icon={SocialIconFacebook}
+            url='https://www.facebook.com/topcoder'
+        />
+    )
+}
+
+export default Facebook

src-ts/lib/social-links/facebook/index.ts

@@ -0,0 +1 @@
+export { default as Facebook } from './Facebook'

src-ts/lib/social-links/index.ts

@@ -1 +1,5 @@
-export { default as SocialLink, SocialLinkIcons } from './SocialLink'
+export * from './facebook'
+export * from './instagram'
+export * from './linked-in'
+export * from './twitter'
+export * from './youtube'

src-ts/lib/social-links/instagram/Instagram.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+import { SocialIconInstagram } from '../../svgs'
+import { SocialLink } from '../social-link'
+
+const Instagram: FC<{}> = () => {
+
+    return (
+        <SocialLink
+            icon={SocialIconInstagram}
+            url='https://www.instagram.com/topcoder'
+        />
+    )
+}
+
+export default Instagram

src-ts/lib/social-links/instagram/index.ts

@@ -0,0 +1 @@
+export { default as Instagram } from './Instagram'