From f6cdd2c18c60287f9e067dbc0b0695e92d670de6 Mon Sep 17 00:00:00 2001 From: Brooke Date: Mon, 21 Nov 2022 15:10:19 -0800 Subject: [PATCH 1/3] PROD-3245 #comment This commit adds the universal footer and removes the existing footer #time 15m --- src-ts/lib/page-footer/PageFooter.tsx | 96 +++---------------- src-ts/lib/social-links/facebook/Facebook.tsx | 13 --- src-ts/lib/social-links/facebook/index.ts | 1 - src-ts/lib/social-links/index.ts | 5 - .../lib/social-links/instagram/Instagram.tsx | 13 --- src-ts/lib/social-links/instagram/index.ts | 1 - .../lib/social-links/linked-in/LinkedIn.tsx | 13 --- src-ts/lib/social-links/linked-in/index.ts | 1 - .../social-links/social-link/SocialLink.tsx | 23 ----- src-ts/lib/social-links/social-link/index.ts | 1 - src-ts/lib/social-links/twitter/Twitter.tsx | 13 --- src-ts/lib/social-links/twitter/index.ts | 1 - src-ts/lib/social-links/youtube/Youtube.tsx | 13 --- src-ts/lib/social-links/youtube/index.ts | 1 - 14 files changed, 12 insertions(+), 183 deletions(-) delete mode 100644 src-ts/lib/social-links/facebook/Facebook.tsx delete mode 100644 src-ts/lib/social-links/facebook/index.ts delete mode 100644 src-ts/lib/social-links/index.ts delete mode 100644 src-ts/lib/social-links/instagram/Instagram.tsx delete mode 100644 src-ts/lib/social-links/instagram/index.ts delete mode 100644 src-ts/lib/social-links/linked-in/LinkedIn.tsx delete mode 100644 src-ts/lib/social-links/linked-in/index.ts delete mode 100644 src-ts/lib/social-links/social-link/SocialLink.tsx delete mode 100644 src-ts/lib/social-links/social-link/index.ts delete mode 100644 src-ts/lib/social-links/twitter/Twitter.tsx delete mode 100644 src-ts/lib/social-links/twitter/index.ts delete mode 100644 src-ts/lib/social-links/youtube/Youtube.tsx delete mode 100644 src-ts/lib/social-links/youtube/index.ts diff --git a/src-ts/lib/page-footer/PageFooter.tsx b/src-ts/lib/page-footer/PageFooter.tsx index 845593322..631a242b3 100644 --- a/src-ts/lib/page-footer/PageFooter.tsx +++ b/src-ts/lib/page-footer/PageFooter.tsx @@ -1,93 +1,21 @@ -import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react' +import { FC } from 'react' -import { ContactSupportModal, OrderContractModal, PrivacyPolicyModal, TermsModal } from '../modals' -import { ProfileProvider } from '../profile-provider' -import { Facebook, Instagram, LinkedIn, Twitter, Youtube } from '../social-links' - -import styles from './PageFooter.module.scss' +// eslint-disable-next-line @typescript-eslint/no-explicit-any +declare let tcUniNav: any const PageFooter: FC<{}> = () => { - const [isContactSupportModalOpen, setIsContactSupportModalOpen]: [boolean, Dispatch>] = useState(false) - const [isOrderContractModalOpen, setIsOrderContractModalOpen]: [boolean, Dispatch>] = useState(false) - const [isPrivacyModalOpen, setIsPrivacyModalOpen]: [boolean, Dispatch>] = useState(false) - const [isTermsModalOpen, setIsTermsModalOpen]: [boolean, Dispatch>] = useState(false) - - function handleClick(event: MouseEvent, setter: Dispatch>): void { - event.preventDefault() - setter(true) - } - - return ( -
- - - setIsContactSupportModalOpen(false)} - /> - + const navElementId: string = 'footer-nav-el' - setIsOrderContractModalOpen(false)} - /> - - setIsPrivacyModalOpen(false)} - /> - - setIsTermsModalOpen(false)} - /> - -
-
-
- - © - {(new Date()) - .getFullYear()} - {' '} - Topcoder - - handleClick(e, setIsContactSupportModalOpen)} - > - Support - - {/* TODO: add Report a bug functionality to send to zendesk - https://topcoder.atlassian.net/browse/PROD-1864 - See a Bug? */} -
- -
-
- - - - - -
-
-
+ tcUniNav( + 'init', + navElementId, + { + type: 'footer', + }, ) + + return
} export default PageFooter diff --git a/src-ts/lib/social-links/facebook/Facebook.tsx b/src-ts/lib/social-links/facebook/Facebook.tsx deleted file mode 100644 index 90c923da4..000000000 --- a/src-ts/lib/social-links/facebook/Facebook.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react' - -import { SocialIconFacebook } from '../../svgs' -import { SocialLink } from '../social-link' - -const Facebook: FC<{}> = () => ( - -) - -export default Facebook diff --git a/src-ts/lib/social-links/facebook/index.ts b/src-ts/lib/social-links/facebook/index.ts deleted file mode 100644 index 30a4b2461..000000000 --- a/src-ts/lib/social-links/facebook/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Facebook } from './Facebook' diff --git a/src-ts/lib/social-links/index.ts b/src-ts/lib/social-links/index.ts deleted file mode 100644 index 175f6f5bf..000000000 --- a/src-ts/lib/social-links/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './facebook' -export * from './instagram' -export * from './linked-in' -export * from './twitter' -export * from './youtube' diff --git a/src-ts/lib/social-links/instagram/Instagram.tsx b/src-ts/lib/social-links/instagram/Instagram.tsx deleted file mode 100644 index d9d2b2dbd..000000000 --- a/src-ts/lib/social-links/instagram/Instagram.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react' - -import { SocialIconInstagram } from '../../svgs' -import { SocialLink } from '../social-link' - -const Instagram: FC<{}> = () => ( - -) - -export default Instagram diff --git a/src-ts/lib/social-links/instagram/index.ts b/src-ts/lib/social-links/instagram/index.ts deleted file mode 100644 index 96f094097..000000000 --- a/src-ts/lib/social-links/instagram/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Instagram } from './Instagram' diff --git a/src-ts/lib/social-links/linked-in/LinkedIn.tsx b/src-ts/lib/social-links/linked-in/LinkedIn.tsx deleted file mode 100644 index 8ea3bf9ab..000000000 --- a/src-ts/lib/social-links/linked-in/LinkedIn.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react' - -import { SocialIconLinkedIn } from '../../svgs' -import { SocialLink } from '../social-link' - -const LinkedIn: FC<{}> = () => ( - -) - -export default LinkedIn diff --git a/src-ts/lib/social-links/linked-in/index.ts b/src-ts/lib/social-links/linked-in/index.ts deleted file mode 100644 index 1f5a43bd2..000000000 --- a/src-ts/lib/social-links/linked-in/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as LinkedIn } from './LinkedIn' diff --git a/src-ts/lib/social-links/social-link/SocialLink.tsx b/src-ts/lib/social-links/social-link/SocialLink.tsx deleted file mode 100644 index ec9fabecc..000000000 --- a/src-ts/lib/social-links/social-link/SocialLink.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, SVGProps } from 'react' - -interface SocialLinkProps { - readonly icon: FC> - url: string -} - -const SocialLink: FC = (props: SocialLinkProps) => { - - const Icon: FC> | undefined = props.icon - - if (!Icon) { - return <> - } - - return ( - - - - ) -} - -export default SocialLink diff --git a/src-ts/lib/social-links/social-link/index.ts b/src-ts/lib/social-links/social-link/index.ts deleted file mode 100644 index 626e2cf31..000000000 --- a/src-ts/lib/social-links/social-link/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SocialLink } from './SocialLink' diff --git a/src-ts/lib/social-links/twitter/Twitter.tsx b/src-ts/lib/social-links/twitter/Twitter.tsx deleted file mode 100644 index 8211bc610..000000000 --- a/src-ts/lib/social-links/twitter/Twitter.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react' - -import { SocialIconTwitter } from '../../svgs' -import { SocialLink } from '../social-link' - -const Twitter: FC<{}> = () => ( - -) - -export default Twitter diff --git a/src-ts/lib/social-links/twitter/index.ts b/src-ts/lib/social-links/twitter/index.ts deleted file mode 100644 index 31f555b61..000000000 --- a/src-ts/lib/social-links/twitter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Twitter } from './Twitter' diff --git a/src-ts/lib/social-links/youtube/Youtube.tsx b/src-ts/lib/social-links/youtube/Youtube.tsx deleted file mode 100644 index edb5f9698..000000000 --- a/src-ts/lib/social-links/youtube/Youtube.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react' - -import { SocialIconYoutube } from '../../svgs' -import { SocialLink } from '../social-link' - -const Youtube: FC<{}> = () => ( - -) - -export default Youtube diff --git a/src-ts/lib/social-links/youtube/index.ts b/src-ts/lib/social-links/youtube/index.ts deleted file mode 100644 index d60a90f89..000000000 --- a/src-ts/lib/social-links/youtube/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Youtube } from './Youtube' From 6425c9f2f015a6630f17aa6f1de6e6fd0e055e22 Mon Sep 17 00:00:00 2001 From: Brooke Date: Wed, 23 Nov 2022 09:54:03 -0800 Subject: [PATCH 2/3] 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 --- src-ts/config/constants.ts | 3 +- .../authentication.functions.ts | 2 +- .../route-provider/platform-route.model.ts | 3 +- .../route-context-data.model.ts | 2 - .../route-provider/route-functions/index.ts | 2 +- .../route-functions/route.functions.ts | 8 +++- src-ts/lib/route-provider/route.context.tsx | 4 +- src-ts/lib/route-provider/route.provider.tsx | 45 +++---------------- src-ts/tools/dev-center/dev-center.routes.tsx | 5 +-- .../gamification-admin.routes.tsx | 4 +- src-ts/tools/learn/learn.routes.tsx | 19 ++++---- src-ts/tools/tools.routes.ts | 7 +-- src-ts/tools/work/Work.tsx | 27 ++++++----- .../intake-forms/IntakeForms.tsx | 5 +-- .../work-self-service/intake-forms/index.ts | 2 +- src-ts/tools/work/work.routes.tsx | 16 +++---- .../utils/contact-support/ContactSupport.tsx | 7 ++- .../contact-support.routes.tsx | 7 ++- src-ts/utils/home/home.routes.tsx | 4 +- src-ts/utils/settings/settings.routes.tsx | 4 +- src-ts/utils/utils.routes.tsx | 8 +++- 21 files changed, 78 insertions(+), 106 deletions(-) diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts index c1d0368a6..b14a25064 100644 --- 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 index e887b6c5c..3f16fb6e2 100644 --- 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 index 558ddf185..3662fa71c 100644 --- 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 authRequired?: boolean children?: Array - customerOnly?: boolean disabled?: boolean element: JSX.Element hidden?: boolean - memberOnly?: boolean + id?: string rolesRequired?: Array 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 index 98585ecf8..094478d1d 100644 --- 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 getChildren: (parent: string) => Array getChildRoutes: (parent: string) => Array - getPath: (routeTitle: string) => string getPathFromRoute: (route: PlatformRoute) => string getRouteElement: (route: PlatformRoute) => JSX.Element getSignupUrl: (currentLocation: string, toolRoutes: Array, returnUrl?: string) => string @@ -17,6 +16,5 @@ export interface RouteContextData { rootLoggedInRoute: string rootLoggedOutFC: FC<{}> toolsRoutes: Array - toolsRoutesForNav: Array utilsRoutes: Array } diff --git a/src-ts/lib/route-provider/route-functions/index.ts b/src-ts/lib/route-provider/route-functions/index.ts index 110edc832..f341363d0 100644 --- 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 index efcab33f4..785d515c4 100644 --- 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 | 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 index 4177bf259..a151cee67 100644 --- 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 index f871d7551..cdec5be87 100644 --- 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 = (props: RouteProviderProps) // TODO: try to make these prop names configurable instead of hard-codded const toolsRoutes: Array = 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 = 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 = 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 = (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,7 +76,6 @@ export const RouteProvider: FC = (props: RouteProviderProps) rootLoggedInRoute: loggedInRoot, rootLoggedOutFC: props.rootLoggedOutFC, toolsRoutes, - toolsRoutesForNav, utilsRoutes, } setRouteContextData(contextData) @@ -110,7 +83,7 @@ export const RouteProvider: FC = (props: RouteProviderProps) function getChildren(parent: string): Array { return allRoutes - .find(route => route.title === parent) + .find(route => route.id === parent) ?.children || [] } @@ -120,12 +93,6 @@ export const RouteProvider: FC = (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 index 6fd7d4fb4..32edc419a 100644 --- 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 = [ +export const devCenterRoutes: ReadonlyArray = [ { children: [ { @@ -24,8 +24,7 @@ export const devCenterRoutes: Array = [ }, ], element: , - 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 index f59885886..5576f7cf6 100644 --- 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 = [ +export const gamificationAdminRoutes: ReadonlyArray = [ { authRequired: true, children: [ @@ -37,10 +37,10 @@ export const gamificationAdminRoutes: Array = [ ], element: , 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 index e0627a75e..e7272e050 100644 --- 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 = [ +export const learnRoutes: ReadonlyArray = [ { children: [ { children: [], element: , + id: 'Welcome to Topcoder Academy', route: '', - title: 'Welcome to Topcoder Academy', }, { children: [], element: , + id: 'Course Details', route: ':provider/:certification', - title: 'Course Details', }, { children: [], element: , + id: 'Course Completed', route: ':provider/:certification/completed', - title: 'Course Completed', }, { children: [], element: , + id: 'My Certificate', route: ':provider/:certification/certificate', - title: 'My Certificate', }, { children: [], element: , + id: 'User Certificate', route: ':provider/:certification/:memberHandle/certificate', - title: 'User Certificate', }, { children: [], element: , + id: 'FxreeCodeCamp', route: ':provider/:certification/:module/:lesson', - title: 'FreeCodeCamp', }, { children: [], element: , + id: 'My Learning', route: 'my-learning', - title: 'My Learning', }, ], element: , - memberOnly: true, + id: toolTitle, route: rootRoute, - title: toolTitle, }, ] diff --git a/src-ts/tools/tools.routes.ts b/src-ts/tools/tools.routes.ts index ac46044f5..40e14309c 100644 --- 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 = [ - // NOTE: these will be displayed in the order they are defined in this array - // TODO: support ordering +const toolRoutes: ReadonlyArray = [ + // 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 index 038600717..28566b0aa 100644 --- 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 = useDispatch() + const dispatch: Dispatch = 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 } - 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<{}> = () => { - {getChildRoutes(dashboardTitle)} + {getChildRoutes(dashboardRouteId)} 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 index 71ef0cceb..e426b9a0e 100644 --- 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<{}> = () => { - {getChildRoutes(intakeFormsTitle)} + {getChildRoutes(intakeFormsRouteId)} ) 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 index eac9405f8..4f2e1e55d 100644 --- a/src-ts/tools/work/work-self-service/intake-forms/index.ts +++ b/src-ts/tools/work/work-self-service/intake-forms/index.ts @@ -1,3 +1,3 @@ -export { default as IntakeForms, intakeFormsTitle } from './IntakeForms' +export { default as IntakeForms } from './IntakeForms' export * from './bug-hunt' export * from './review' diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx index f4b3e62e5..81c48265e 100644 --- a/src-ts/tools/work/work.routes.tsx +++ b/src-ts/tools/work/work.routes.tsx @@ -2,10 +2,9 @@ import { Navigate } from 'react-router-dom' import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' -import { dashboardTitle, toolTitle } from './Work' +import { dashboardRouteId, intakeFormsRouteId, toolTitle } from './Work' import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './work-lib' import { WorkLoginPrompt } from './work-login-prompt' -import { intakeFormsTitle } from './work-self-service' const WorkComponent: LazyLoadedComponent = lazyLoad(() => import('./Work')) const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn') @@ -49,12 +48,11 @@ export function workDetailRoute(workId: string, tab?: 'solutions' | 'messages'): return `${selfServiceRootRoute}/work-items/${workId}${!!tab ? `?tab=${tab}` : ''}` } -export const workRoutes: Array = [ +export const workRoutes: ReadonlyArray = [ { - customerOnly: true, element: , + id: toolTitle, route: rootRoute, - title: toolTitle, }, { alternativePaths: [ @@ -76,8 +74,9 @@ export const workRoutes: Array = [ ], element: , hidden: true, + id: dashboardRouteId, route: dashboardRoute, - title: dashboardTitle, + title: toolTitle, }, { children: [ @@ -114,8 +113,9 @@ export const workRoutes: Array = [ ], element: , hidden: true, + id: intakeFormsRouteId, route: `/${selfServiceRootRoute}${rootRoute}/new`, - title: intakeFormsTitle, + title: toolTitle, }, { element: , @@ -128,6 +128,6 @@ export const workRoutes: Array = [ { children: [], element: , - route: `${rootRoute}/${contactSupportPath}`, + route: `${rootRoute}${contactSupportPath}`, }, ] diff --git a/src-ts/utils/contact-support/ContactSupport.tsx b/src-ts/utils/contact-support/ContactSupport.tsx index 65938aae6..c2aa7eb5d 100644 --- a/src-ts/utils/contact-support/ContactSupport.tsx +++ b/src-ts/utils/contact-support/ContactSupport.tsx @@ -1,5 +1,6 @@ import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react' +import { ToolTitle } from '../../config' import { ContactSupportForm, contactSupportFormDef, @@ -9,21 +10,19 @@ import { formOnReset, } from '../../lib' -import { toolTitle } from './contact-support.routes' - const ContactSupport: FC<{}> = () => { const [formDef, setFormDef]: [FormDefinition, Dispatch>] = useState({ ...contactSupportFormDef }) - const onSave = useCallback((): void => { + const onSave: () => void = useCallback((): void => { const updatedForm: FormDefinition = { ...formDef } formOnReset(formGetInputFields(updatedForm.groups || [])) setFormDef(updatedForm) }, [formDef]) return ( - + import('./ContactSupport')) -export const contactSupportRoutes: Array = [ +export const contactSupportRoutes: ReadonlyArray = [ { children: [], element: , + id: ToolTitle.support, route: contactSupportPath, - title: toolTitle, }, ] diff --git a/src-ts/utils/home/home.routes.tsx b/src-ts/utils/home/home.routes.tsx index 6f8da4b1a..0a820d647 100644 --- a/src-ts/utils/home/home.routes.tsx +++ b/src-ts/utils/home/home.routes.tsx @@ -4,11 +4,11 @@ const Home: LazyLoadedComponent = lazyLoad(() => import('./Home')) export const homeRoute: string = '' -export const homeRoutes: Array = [ +export const homeRoutes: ReadonlyArray = [ { element: , hidden: true, + id: 'Home page', route: homeRoute, - title: 'Home page', }, ] diff --git a/src-ts/utils/settings/settings.routes.tsx b/src-ts/utils/settings/settings.routes.tsx index 7c158be7c..728a06002 100644 --- a/src-ts/utils/settings/settings.routes.tsx +++ b/src-ts/utils/settings/settings.routes.tsx @@ -4,7 +4,7 @@ import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' const Account: LazyLoadedComponent = lazyLoad(() => import('./account'), 'Account') const Settings: LazyLoadedComponent = lazyLoad(() => import('./Settings')) -export const settingsRoutes: Array = [ +export const settingsRoutes: ReadonlyArray = [ { authRequired: true, children: [ @@ -16,7 +16,7 @@ export const settingsRoutes: Array = [ }, ], element: , + id: ToolTitle.settings, route: '/account', - title: ToolTitle.settings, }, ] diff --git a/src-ts/utils/utils.routes.tsx b/src-ts/utils/utils.routes.tsx index a14b17758..fb575fd00 100644 --- a/src-ts/utils/utils.routes.tsx +++ b/src-ts/utils/utils.routes.tsx @@ -4,10 +4,14 @@ import { contactSupportRoutes } from './contact-support' import { homeRoutes } from './home' import { settingsRoutes } from './settings' -const utilsRoutes: Array = [ +const utilsRoutes: ReadonlyArray = [ + // NOTE: Order matters here bc the active tool + // is determined by finding the first route + // that matches the current path ...contactSupportRoutes, - ...homeRoutes, ...settingsRoutes, + // home routes need to be last bc they match all other routes + ...homeRoutes, ] export default utilsRoutes From d092cec20bac6730f4bafe11dd82cbffa7413947 Mon Sep 17 00:00:00 2001 From: Brooke Date: Wed, 23 Nov 2022 10:03:30 -0800 Subject: [PATCH 3/3] clean-up --- src-ts/tools/work/work.routes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx index 81c48265e..9b4e74e93 100644 --- a/src-ts/tools/work/work.routes.tsx +++ b/src-ts/tools/work/work.routes.tsx @@ -114,7 +114,7 @@ export const workRoutes: ReadonlyArray = [ element: , hidden: true, id: intakeFormsRouteId, - route: `/${selfServiceRootRoute}${rootRoute}/new`, + route: `${selfServiceRootRoute}${rootRoute}/new`, title: toolTitle, }, {