diff --git a/src-ts/config/constants.ts b/src-ts/config/constants.ts index 3d35f3335..140ff4721 100644 --- a/src-ts/config/constants.ts +++ b/src-ts/config/constants.ts @@ -3,3 +3,5 @@ export enum ToolTitle { settings = 'Account Settings', work = 'Work', } + +export const PagePortalId: string = 'page-subheader-portal-el' diff --git a/src-ts/config/environments/environment.default.config.ts b/src-ts/config/environments/environment.default.config.ts index 0c0b89f95..1df819a2e 100644 --- a/src-ts/config/environments/environment.default.config.ts +++ b/src-ts/config/environments/environment.default.config.ts @@ -14,6 +14,9 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = { V3: 'https://api.topcoder-dev.com/v3', V5: 'https://api.topcoder-dev.com/v5', }, + AUTH: { + ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com', + }, ENV: 'default', LOGGING: { PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11', @@ -38,7 +41,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = { USER_PROFILE: `${COMMUNITY_WEBSITE}/members`, WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`, }, - URL: { - ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com', + UNIVERSAL_NAV: { + URL: 'https://uni-nav.topcoder-dev.com/tc-universal-nav.js', }, } diff --git a/src-ts/config/environments/environment.prod.config.ts b/src-ts/config/environments/environment.prod.config.ts index c1b9d8caa..b9a861803 100644 --- a/src-ts/config/environments/environment.prod.config.ts +++ b/src-ts/config/environments/environment.prod.config.ts @@ -16,6 +16,9 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = { V3: 'https://api.topcoder.com/v3', V5: 'https://api.topcoder.com/v5', }, + AUTH: { + ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com', + }, DISABLED_TOOLS: [], ENV: 'prod', // TODO: Move stripe creds to .env file @@ -36,7 +39,7 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = { USER_PROFILE: `${COMMUNITY_WEBSITE}/members`, WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`, }, - URL: { - ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com', + UNIVERSAL_NAV: { + URL: 'https://uni-nav.topcoder.com/tc-universal-nav.js', }, } diff --git a/src-ts/header/Header.module.scss b/src-ts/header/Header.module.scss deleted file mode 100644 index 798dbf383..000000000 --- a/src-ts/header/Header.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../lib/styles/includes'; - -.header-wrap { - display: block; - background-color: $tc-black; - - :global(#root:not(.app-ready)) & { - display: none; - } -} - -.header { - display: grid; - height: $header-height; - align-items: center; - 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; - } -} - -.subheader { - width: 100%; - position: relative; -} diff --git a/src-ts/header/Header.tsx b/src-ts/header/Header.tsx index 6957a7c05..b3d4d3eeb 100644 --- a/src-ts/header/Header.tsx +++ b/src-ts/header/Header.tsx @@ -1,20 +1,62 @@ -import { FC } from 'react' - -import { Logo } from './logo' -import { ToolSelectors } from './tool-selectors' -import { UtilitySelectors } from './utility-selectors' -import styles from './Header.module.scss' - -const Header: FC<{}> = () => ( -
-
- - - - -
-
-
-) +import { Dispatch, FC, MutableRefObject, SetStateAction, useContext, useEffect, useRef, useState } from 'react' +import classNames from 'classnames' + +import { EnvironmentConfig, PagePortalId } from '../config' +import { authUrlLogin, authUrlLogout, authUrlSignup, profileContext, ProfileContextData } from '../lib' + +import UniNavSnippet from './universal-nav-snippet' + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +declare let tcUniNav: any +UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL) + +const Header: FC = () => { + + const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext) + const [ready, setReady]: [boolean, Dispatch>] = useState(false) + const headerInit: MutableRefObject = useRef(false) + const navElementId: string = 'main-nav-el' + + useEffect(() => { + + if (headerInit.current || !profileReady || !tcUniNav) { + return + } + + headerInit.current = true + + tcUniNav( + 'tool', + navElementId, + { + onReady() { + setReady(true) + document.getElementById('root')?.classList.add('app-ready') + }, + signIn() { window.location.href = authUrlLogin() }, + signOut() { window.location.href = authUrlLogout }, + signUp() { window.location.href = authUrlSignup() }, + // TODO: make this dynamic based on the current URL + toolName: 'Topcoder Academy', + user: profileReady && profile ? { + handle: profile.handle, + initials: `${profile.firstName.charAt(0)}${profile.lastName.charAt(0)}`, + photoURL: profile.photoURL, + userId: profile.userId, + } : undefined, + }, + ) + }, [profileReady, profile]) + + return ( + <> +
+
+ + ) +} export default Header diff --git a/src-ts/header/logo/Logo.module.scss b/src-ts/header/logo/Logo.module.scss deleted file mode 100644 index c8147210a..000000000 --- a/src-ts/header/logo/Logo.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../lib/styles/includes'; - -.logo-no-link, -.logo-link { - display: flex; - - a { - display: flex; - } - - svg { - width: calc($space-xxl + $space-xxxxl); - height: $space-xl; - fill: none; - - path { - fill: $tc-white; - } - - @include ltemd { - padding: 0; - } - } - @include ltemd { - margin: 0 auto; - } -} - -.logo-no-link { - a { - cursor: default; - } -} diff --git a/src-ts/header/logo/Logo.tsx b/src-ts/header/logo/Logo.tsx deleted file mode 100644 index 2d7744c50..000000000 --- a/src-ts/header/logo/Logo.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC, useContext } from 'react' -import { Link, useLocation } from 'react-router-dom' - -import { - LogoIcon, - routeContext, - RouteContextData, -} from '../../lib' -import '../../lib/styles/index.scss' - -import styles from './Logo.module.scss' - -const Logo: FC<{}> = () => { - - const routeContextData: RouteContextData = useContext(routeContext) - - // the logo should be a link to the home page for all pages except the home page - const isLink: boolean = !routeContextData.isRootRoute(useLocation().pathname) - const rootRoute: string = routeContextData.rootLoggedInRoute || '' - - return ( -
- - - -
- ) -} - -export default Logo diff --git a/src-ts/header/logo/index.ts b/src-ts/header/logo/index.ts deleted file mode 100644 index 87cfda01c..000000000 --- a/src-ts/header/logo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Logo } from './Logo' diff --git a/src-ts/header/tool-selectors/ToolSelectors.tsx b/src-ts/header/tool-selectors/ToolSelectors.tsx deleted file mode 100644 index 12280cf7f..000000000 --- a/src-ts/header/tool-selectors/ToolSelectors.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { FC } from 'react' - -import { ToolSelectorsNarrow } from './tool-selectors-narrow' -import { ToolSelectorsWide } from './tool-selectors-wide' - -interface ToolSelectorsProps { - isWide: boolean -} - -const ToolSelectors: FC - = (props: ToolSelectorsProps) => (props.isWide - ? - : ) - -export default ToolSelectors diff --git a/src-ts/header/tool-selectors/index.ts b/src-ts/header/tool-selectors/index.ts deleted file mode 100644 index b1a498bce..000000000 --- a/src-ts/header/tool-selectors/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ToolSelectors } from './ToolSelectors' diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss b/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss deleted file mode 100644 index b8c5b6080..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../../lib/styles/includes'; - -.tool-selectors-narrow { - display: none; - - @include ltemd { - display: flex; - } - - svg { - @include icon-xxxxl; - fill: none; - - path { - stroke: $tc-white; - stroke-width: $border; - } - } - - .tool-selectors-narrow-container { - position: absolute; - top: $header-height; - left: 0; - bottom: 0; - height: $content-height; - width: calc(100% - calc(2 * $space-xxl)); - z-index: 100; - background-color: $black-100; - padding: $space-xxl; - } -} diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx b/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx deleted file mode 100644 index 318c6dd7e..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Dispatch, FC, SetStateAction, useContext, useState } from 'react' -import classNames from 'classnames' - -import { IconOutline, routeContext, RouteContextData } from '../../../lib' - -import { ToolSelectorNarrow } from './tool-selector-narrow' -import styles from './ToolSelectorsNarrow.module.scss' - -const ToolSelectorsNarrow: FC<{}> = () => { - - const { toolsRoutesForNav }: RouteContextData = useContext(routeContext) - const [isOpen, setIsOpen]: [boolean, Dispatch>] = useState(false) - - const toolSelectors: Array = toolsRoutesForNav - .map(route => ( - - )) - - const closed: JSX.Element = - - const open: JSX.Element = ( - <> - -
- {toolSelectors} -
- - ) - - return ( -
setIsOpen(!isOpen)} - > - {isOpen ? open : closed} -
- ) -} - -export default ToolSelectorsNarrow diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/index.ts b/src-ts/header/tool-selectors/tool-selectors-narrow/index.ts deleted file mode 100644 index 59d992fb7..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ToolSelectorsNarrow } from './ToolSelectorsNarrow' diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss b/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss deleted file mode 100644 index bd803c9d5..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../../lib/styles/includes'; - -.tool-selector-narrow { - - a:last-of-type { - border-bottom: 1px solid $black-60; - } - - .tool-selector-narrow-link { - display: flex; - justify-content: space-between; - align-items: center; - border-top: 1px solid $black-60; - padding: $space-lg 0; - color: $tc-white; - font-weight: $font-weight-medium; - background-color: $black-100; - - svg { - @include icon-lg; - fill: $tc-white; - - path { - stroke-width: 1.13px; - fill: none; - } - } - - &.tool-selector-narrow-active { - color: $turq-100; - } - } -} diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx b/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx deleted file mode 100644 index 502af89cc..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { FC, useContext } from 'react' -import { Link, useLocation } from 'react-router-dom' -import classNames from 'classnames' - -import { IconOutline, PlatformRoute, routeContext, RouteContextData, routeIsActiveTool } from '../../../../lib' - -import styles from './ToolSelectorNarrow.module.scss' - -interface ToolSelectorNarrowProps { - route: PlatformRoute -} - -const isParamRoute: (route: string) => boolean = (route: string) => !!route.match(/^:[^/]+$/) - -const ToolSelectorNarrow: FC = (props: ToolSelectorNarrowProps) => { - - const { - getPathFromRoute, - }: RouteContextData = useContext(routeContext) - - const toolRoute: PlatformRoute = props.route - const toolPath: string = getPathFromRoute(toolRoute) - const baseClass: string = 'tool-selector-narrow' - const isActive: boolean = routeIsActiveTool(useLocation().pathname, toolRoute) - const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active` - const hasChildren: boolean = !!toolRoute.children?.some(child => !!child.route && !isParamRoute(child.route)) - - return ( -
- - {toolRoute.title} - {hasChildren && } - -
- ) -} - -export default ToolSelectorNarrow diff --git a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/index.ts b/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/index.ts deleted file mode 100644 index c690b3804..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ToolSelectorNarrow } from './ToolSelectorNarrow' diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss b/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss deleted file mode 100644 index 0ac8ef96d..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../lib/styles/includes'; - -.tool-selectors-wide { - display: flex; - align-items: center; - border-left: solid 1px $black-80; - padding-left: $space-md; - - @include ltemd { - display: none; - } -} diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx b/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx deleted file mode 100644 index 47a1633a3..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FC, useContext } from 'react' - -import { routeContext, RouteContextData } from '../../../lib' - -import { ToolSelectorWide } from './tool-selector-wide' -import styles from './ToolSelectorsWide.module.scss' - -const ToolSelectorsWide: FC<{}> = () => { - - const { toolsRoutesForNav }: RouteContextData = useContext(routeContext) - - const selectors: Array = toolsRoutesForNav - .map(route => ( - - )) - - return ( -
- {selectors} -
- ) -} - -export default ToolSelectorsWide diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/index.ts b/src-ts/header/tool-selectors/tool-selectors-wide/index.ts deleted file mode 100644 index 5a3f2ad41..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ToolSelectorsWide } from './ToolSelectorsWide' diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss deleted file mode 100644 index a8d6a7a16..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../../../../lib/styles/includes'; - -.tool-selector-wide { - padding-right: 0; - color: $tc-white; - @include font-barlow-condensed; - display: flex; - flex-direction: column; - align-items: center; - - a { - display: block; - padding: 11px $space-md; - text-align: center; - } - - .active-indicator { - width: $space-xxl; - height: 2px; - } - - &.tool-selector-wide-is-link { - - a { - cursor: pointer !important; - } - } - - &.tool-selector-wide-active { - - a { - cursor: default; - } - - .active-indicator { - background-color: $turq-120; - } - } - - &.tool-selector-wide-inactive { - - .active-indicator { - background-color: inherit; - } - } -} diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx deleted file mode 100644 index 33ec2ae48..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { FC, useContext } from 'react' -import { Link, useLocation } from 'react-router-dom' -import classNames from 'classnames' - -import { - PlatformRoute, - routeContext, - RouteContextData, - routeIsActiveTool, -} from '../../../../lib' -import '../../../../lib/styles/index.scss' - -import styles from './ToolSelectorWide.module.scss' - -interface ToolSelectorWideProps { - route: PlatformRoute -} - -const ToolSelectorWide: FC = (props: ToolSelectorWideProps) => { - - const { - getPathFromRoute, - isRootRoute, - }: RouteContextData = useContext(routeContext) - - const activePath: string = useLocation().pathname - const toolRoute: PlatformRoute = props.route - const toolPath: string = getPathFromRoute(toolRoute) - const baseClass: string = 'tool-selector-wide' - const isActive: boolean = routeIsActiveTool(activePath, toolRoute) - const activeIndicatorClass: string = `${baseClass}-${isActive ? '' : 'in'}active` - - // the tool link should be usable for all active routes except the home page - const isLink: boolean = isActive && !isRootRoute(activePath) - - return ( -
- - {toolRoute.title} - -
-
- ) -} - -export default ToolSelectorWide diff --git a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/index.ts b/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/index.ts deleted file mode 100644 index 72e8d155e..000000000 --- a/src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ToolSelectorWide } from './ToolSelectorWide' diff --git a/src-ts/header/universal-nav-snippet.js b/src-ts/header/universal-nav-snippet.js new file mode 100644 index 000000000..3e9d97efc --- /dev/null +++ b/src-ts/header/universal-nav-snippet.js @@ -0,0 +1,35 @@ +/* eslint-disable func-names */ +/* eslint-disable no-param-reassign */ +/* eslint-disable prefer-rest-params */ +/* eslint-disable @typescript-eslint/typedef */ +/* eslint-disable no-unused-expressions */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ + +function UniNavSnippet(url) { + + !(function (n, t, e, a, c, i, o) { + + n.TcUnivNavConfig = c + + n[c] = n[c] || function () { + (n[c].q = n[c].q ?? []).push(arguments) + } + + n[c].l = 1 * new Date() + + i = t.createElement(e) + + o = t.getElementsByTagName(e)[0] + + i.async = 1 + + i.type = 'module' + + i.src = a + + o.parentNode.insertBefore(i, o) + + }(window, document, 'script', url, 'tcUniNav')) +} + +export default UniNavSnippet diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss deleted file mode 100644 index 3e3c382d3..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../../../lib/styles/includes'; - -.profile-selector { - display: flex; - justify-content: flex-end; - align-items: center; -} diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx deleted file mode 100644 index 9dfc37615..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { FC, useContext } from 'react' - -import { ToolTitle } from '../../../../config' -import { profileContext, ProfileContextData } from '../../../../lib' -import '../../../../lib/styles/index.scss' - -import { ProfileLoggedIn } from './profile-logged-in' -import { ProfileNotLoggedIn } from './profile-not-logged-in' -import styles from './ProfileSelector.module.scss' - -const ProfileSelector: FC<{}> = () => { - - const { - initialized, - profile, - }: ProfileContextData = useContext(profileContext) - - // if we're not initialized, don't render anything - if (!initialized) { - return <> - } - - const isLoggedIn: boolean = !!profile - return ( -
- {!isLoggedIn && } - {isLoggedIn && } -
- ) -} - -export default ProfileSelector diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss deleted file mode 100644 index 08edd0e71..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../../../../lib/styles/includes'; - -$overlaySquare: $space-xxxxl; - -.profile-avatar, -.overlay { - cursor: pointer; -} - -.overlay { - position: absolute; - top: 0; - left: 0; - z-index: 100; - background: $black-100-opacity-80; - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - border-radius: 50%; - - svg { - stroke: $turq-160; - stroke-width: $border; - @include icon-xxl; - } -} - -.profile-avatar { - position: relative; -} diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx deleted file mode 100644 index e6285eca5..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { Dispatch, FC, MutableRefObject, SetStateAction, useCallback, useContext, useRef, useState } from 'react' - -import { - Avatar, - IconOutline, - logInfo, - profileContext, - ProfileContextData, - useClickOutside, -} from '../../../../../lib' - -import { ProfilePanel } from './profile-panel' -import styles from './ProfileLoggedIn.module.scss' - -interface ProfileLoggedInProps { - settingsTitle: string -} - -const ProfileLoggedIn: FC = (props: ProfileLoggedInProps) => { - - const { profile }: ProfileContextData = useContext(profileContext) - - const triggerRef: MutableRefObject = useRef(undefined) - const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch>] = useState(false) - - const toggleProfilePanel: () => void = useCallback(() => { - setProfilePanelOpen((isOpen: boolean) => !isOpen) - }, []) - - useClickOutside(triggerRef.current, () => setProfilePanelOpen(false)) - - if (!profile) { - logInfo('tried to render the logged in profile w/out a profile') - return <> - } - - return ( - <> -
- - {profilePanelOpen && ( - <> -
- -
- - - )} -
- - ) -} - -export default ProfileLoggedIn diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/index.ts b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/index.ts deleted file mode 100644 index 5bb3d2eba..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ProfileLoggedIn } from './ProfileLoggedIn' diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.module.scss b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.module.scss deleted file mode 100644 index 1ec99c6f2..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use '../../../../../../lib/styles/typography'; -@import '../../../../../../lib/styles/includes'; - -$arrowTipIconHeight: 9px; - -.profile-panel { - @extend .body-ultra-small; - position: absolute; - z-index: 1000; - top: calc($space-xxxxl + 4px + $arrowTipIconHeight); - right: calc(-1 * $space-xxxxl / 2); - width: 168px; - display: flex; - flex-direction: column; - filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2)); - - background-color: $tc-white; - color: $black-100; - border-radius: $space-sm; - - padding: $space-sm $space-lg $space-lg; - - .arrow-tip { - display: flex; - position: absolute; - top: -1 * $arrowTipIconHeight; - right: 15px; - svg { - path { - fill: $tc-white; - } - } - } - - .handle { - @extend .medium-subtitle; - } - - hr { - margin: $space-sm 0; - } - - .nav-item { - display: flex; - cursor: pointer; - align-items: center; - gap: 4px; - + .nav-item { - margin-top: $space-sm; - } - - .icon { - display: flex; - svg { - @include icon-lg; - } - } - } -} diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx deleted file mode 100644 index a1a82951f..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { FC, useContext } from 'react' -import { NavigateFunction, useNavigate } from 'react-router-dom' -import classNames from 'classnames' - -import { - authUrlLogout, - IconOutline, - profileContext, - ProfileContextData, - routeContext, - RouteContextData, - TooltipArrowIcon, -} from '../../../../../../lib' - -import styles from './ProfilePanel.module.scss' - -interface ProfilePanelProps { - settingsTitle: string -} - -const ProfilePanel: FC = (props: ProfilePanelProps) => { - - const { profile }: ProfileContextData = useContext(profileContext) - const { getPath }: RouteContextData = useContext(routeContext) - - const navigate: NavigateFunction = useNavigate() - - if (!profile) { - // this should never happen - return <> - } - - function goToAccount(): void { - navigate(getPath(props.settingsTitle)) - } - - const name: string = `${profile.firstName} ${profile.lastName?.substring(0, 1)}${!!profile.lastName ? '.' : undefined}` - - return ( -
-
- -
-
- {name} -
-
-
-
- - - - - {props.settingsTitle} - -
- - - - - Log Out - -
-
- ) -} - -export default ProfilePanel diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/index.ts b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/index.ts deleted file mode 100644 index f175454e8..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ProfilePanel } from './ProfilePanel' diff --git a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx b/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx deleted file mode 100644 index d0b577aee..000000000 --- a/src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FC, useCallback, useContext } from 'react' -import { Location, useLocation } from 'react-router-dom' - -import { - authUrlLogin, - Button, - routeContext, - RouteContextData, -} from '../../../../../lib' -import '../../../../../lib/styles/index.scss' - -const ProfileNotLoggedIn: FC<{}> = () => { - - const routeData: RouteContextData = useContext(routeContext) - const location: Location = useLocation() - - const signUpHandler: () => void = useCallback(() => { - const signupUrl: string = routeData.getSignupUrl(location.pathname, routeData.toolsRoutes) - window.location.href = signupUrl - }, [ - location.pathname, - routeData, - ]) - - return ( - <> -