Merge branch 'dev' into PM-5787-2

Author: jmgasper

src/apps/customer-portal/src/lib/services/statistics.service.ts

@@ -157,11 +157,6 @@ function normalizeCountryRows(
             return
         }
 
-        if (row['country.country_name'] === 'Taiwan') {
-            console.log('here', row)
-
-        }
-
         const code = toAlpha2CountryCode(lookup.countryCode)
         const current = countries.get(code)
         const topWinners = (row.topWinners || [])

src/apps/customer-portal/src/pages/statistics/StatisticsPage/StatisticsPage.module.scss

@@ -296,6 +296,12 @@
         }
     }
 
+    :global(.highcharts-tooltip) {
+        position: fixed !important;
+        transform: none !important;
+        z-index: 20;
+    }
+
     &:fullscreen {
         height: 100vh;
         min-height: 100vh;
@@ -306,6 +312,12 @@
             height: 100vh !important;
         }
     }
+
+    @include ltesm {
+        :global(.highcharts-legend-item text) {
+            font-size: 10px !important;
+        }
+    }
 }
 
 .mapFullscreenButton {
@@ -367,6 +379,9 @@
         top: 100%;
         transform: translateX(-50%);
         width: 0;
+        @include ltemd {
+            display: none;
+        }
     }
 }
 

src/apps/customer-portal/src/pages/statistics/StatisticsPage/StatisticsPage.tsx

@@ -237,7 +237,7 @@ const StatisticsPage: FC = () => {
                                                         </span>
                                                     </td>
                                                     <td>
-                                                        <div>
+                                                        <div title={country.name}>
                                                             {country.code && (
                                                                 <span
                                                                     aria-hidden='true'

src/apps/customer-portal/src/pages/statistics/StatisticsPage/WorldMap.tsx

@@ -311,6 +311,30 @@ function renderCountryTooltip(point: StatisticsMapPoint): string {
     `
 }
 
+function getFixedTooltipPosition(
+    labelWidth: number,
+    labelHeight: number,
+    point: Highcharts.Point,
+    chart: Highcharts.Chart,
+): Highcharts.PositionObject {
+    const chartRenderTo = (chart as unknown as { renderTo: HTMLElement }).renderTo
+    const chartRect = chartRenderTo.getBoundingClientRect()
+    const plotX = (point.plotX ?? 0) + chart.plotLeft
+    const plotY = (point.plotY ?? 0) + chart.plotTop
+    const pointX = chartRect.left + plotX
+    const pointY = chartRect.top + plotY
+    const minOffset = 12
+    const offsetAbove = 14
+
+    return {
+        x: Math.min(
+            Math.max(pointX - Math.round(labelWidth / 2), minOffset),
+            window.innerWidth - labelWidth - minOffset,
+        ),
+        y: Math.max(pointY - labelHeight - offsetAbove, minOffset),
+    }
+}
+
 function createTooltipFormatter(
     props: Pick<WorldMapProps, 'showWinnerDetails'>,
 ): Highcharts.TooltipFormatterCallbackFunction {
@@ -481,14 +505,14 @@ const WorldMap: FC<WorldMapProps> = props => {
                                 margin: [0, 0, 80, 0],
                             },
                             legend: {
-                                itemDistance: 24,
+                                itemDistance: 16,
                                 itemMarginBottom: 4,
                                 itemStyle: {
-                                    fontSize: '12px',
+                                    fontSize: '9px',
                                 },
                                 symbolHeight: 12,
                                 symbolWidth: 12,
-                                width: 340,
+                                width: 360,
                             },
                         },
                         condition: {
@@ -515,7 +539,28 @@ const WorldMap: FC<WorldMapProps> = props => {
                     showWinnerDetails: props.showWinnerDetails,
                 }),
                 padding: 0,
+                positioner: (
+                    labelWidth: number,
+                    labelHeight: number,
+                    point: Highcharts.Point,
+                ): Highcharts.PositionObject => {
+                    const chart = chartRef.current?.chart as Highcharts.Chart | undefined
+
+                    if (!chart) {
+                        return { x: 0, y: 0 }
+                    }
+
+                    return getFixedTooltipPosition(
+                        labelWidth,
+                        labelHeight,
+                        point,
+                        chart,
+                    )
+                },
                 shadow: false,
+                style: {
+                    position: 'fixed',
+                },
                 useHTML: true,
             },
         }),

src/apps/profiles/src/components/MemberNotFound/MemberNotFound.module.scss

@@ -0,0 +1,31 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    min-height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: $sp-6;
+    padding: $sp-15 $sp-8;
+    color: $black-100;
+
+    svg {
+        color: $black-60;
+    }
+}
+
+.title {
+    @include font-barlow;
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 34px;
+    margin: 0;
+}

src/apps/profiles/src/components/MemberNotFound/MemberNotFound.tsx

@@ -0,0 +1,48 @@
+import { FC, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { Button, ContentLayout, IconOutline, IconSolid, PageTitle } from '~/libs/ui'
+
+import styles from './MemberNotFound.module.scss'
+
+interface MemberNotFoundProps {
+    memberHandle?: string
+}
+
+const MemberNotFound: FC<MemberNotFoundProps> = (props: MemberNotFoundProps) => {
+    const navigate = useNavigate()
+
+    const handleBack = useCallback(() => {
+        navigate(-1)
+    }, [navigate])
+
+    return (
+        <ContentLayout outerClass={styles.container}>
+            <PageTitle>Profile Not Found | Topcoder</PageTitle>
+
+            <div className={styles.content} role='alert'>
+                <IconOutline.ExclamationCircleIcon className='icon-xxxl' />
+                <h2 className={styles.title}>We were unable to locate that profile</h2>
+                {props.memberHandle && (
+                    <p className='body-main'>
+                        No member was found with the handle
+                        {' '}
+                        <strong>{props.memberHandle}</strong>
+                        .
+                    </p>
+                )}
+                <Button
+                    link
+                    size='lg'
+                    iconToLeft
+                    icon={IconSolid.ArrowLeftIcon}
+                    onClick={handleBack}
+                >
+                    Go back
+                </Button>
+            </div>
+        </ContentLayout>
+    )
+}
+
+export default MemberNotFound

src/apps/profiles/src/components/MemberNotFound/index.ts

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

src/apps/profiles/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './tc-achievements/SRMView/ChallengesGrid'
 export * from './EditMemberPropertyBtn'
 export * from './AddButton'
 export * from './EmptySection'
+export * from './MemberNotFound'

src/apps/profiles/src/member-badges/MemberBadgesPage.tsx

@@ -1,11 +1,12 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
 import { Params, useNavigate, useParams } from 'react-router-dom'
+import { AxiosError } from 'axios'
 import { bind } from 'lodash'
 
 import { profileGetPublicAsync, useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
 import { Button, ContentLayout, IconSolid, LoadingSpinner } from '~/libs/ui'
 
-import { MemberBadgeModal } from '../components'
+import { MemberBadgeModal, MemberNotFound } from '../components'
 
 import styles from './MemberBadgesPage.module.scss'
 
@@ -19,6 +20,7 @@ const MemberBadgesPage: FC<{}> = () => {
     ] = useState()
 
     const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [notFound, setNotFound]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const memberBadges: UserBadgesResponse | undefined = useMemberBadges(profile?.userId as number, { limit: 100 })
 
@@ -39,12 +41,21 @@ const MemberBadgesPage: FC<{}> = () => {
 
     useEffect(() => {
         if (routeParams.memberHandle) {
+            setProfileReady(false)
+            setNotFound(false)
+            setProfile(undefined)
+
             profileGetPublicAsync(routeParams.memberHandle)
                 .then(userProfile => {
                     setProfile(userProfile)
                     setProfileReady(true)
                 })
-            // TODO: NOT FOUND PAGE redirect/dispaly via catch
+                .catch((e: AxiosError) => {
+                    if (e.code === AxiosError.ERR_BAD_REQUEST && e.response?.status === 404) {
+                        setNotFound(true)
+                        setProfileReady(true)
+                    }
+                })
         }
     }, [routeParams.memberHandle])
 
@@ -54,9 +65,13 @@ const MemberBadgesPage: FC<{}> = () => {
 
     return (
         <>
-            <LoadingSpinner hide={profileReady && !!memberBadges} />
+            <LoadingSpinner hide={profileReady && (notFound || !!memberBadges)} />
+
+            {profileReady && notFound && (
+                <MemberNotFound memberHandle={routeParams.memberHandle} />
+            )}
 
-            {profileReady && profile && !!memberBadges && (
+            {profileReady && profile && !notFound && !!memberBadges && (
                 <ContentLayout
                     outerClass={styles.container}
                 >

src/apps/profiles/src/member-profile/MemberProfilePage.tsx

@@ -5,7 +5,7 @@ import { AxiosError } from 'axios'
 import { profileContext, ProfileContextData, profileGetPublicAsync, UserProfile } from '~/libs/core'
 import { LoadingSpinner } from '~/libs/ui'
 
-import { rootRoute } from '../profiles.routes'
+import { MemberNotFound } from '../components'
 import { notifyUniNavi } from '../lib'
 
 import { ProfilePageLayout } from './page-layout'
@@ -21,6 +21,7 @@ const MemberProfilePage: FC<{}> = () => {
     ] = useState()
 
     const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [notFound, setNotFound]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const { isTalentSearch }: MemberProfileContextValue = useMemberProfileContext()
 
     const { profile: authProfile }: ProfileContextData = useContext(profileContext)
@@ -31,14 +32,19 @@ const MemberProfilePage: FC<{}> = () => {
 
     useEffect(() => {
         if (routeParams.memberHandle) {
+            setProfileReady(false)
+            setNotFound(false)
+            setProfile(undefined)
+
             profileGetPublicAsync(routeParams.memberHandle)
                 .then(userProfile => {
                     setProfile({ ...userProfile } as UserProfile)
                     setProfileReady(true)
                 })
                 .catch((e: AxiosError) => {
                     if (e.code === AxiosError.ERR_BAD_REQUEST && e.response?.status === 404) {
-                        navigate(rootRoute)
+                        setNotFound(true)
+                        setProfileReady(true)
                     }
                 })
         }
@@ -58,7 +64,11 @@ const MemberProfilePage: FC<{}> = () => {
         <>
             <LoadingSpinner hide={profileReady} />
 
-            {profileReady && profile && (
+            {profileReady && notFound && (
+                <MemberNotFound memberHandle={routeParams.memberHandle} />
+            )}
+
+            {profileReady && profile && !notFound && (
                 <ProfilePageLayout
                     handleBackBtn={handleBackBtn}
                     isTalentSearch={isTalentSearch}