Merge pull request #2152 from topcoder-platform/dev

Update opportunities-v6 with dev branch

Author: jmgasper

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}

src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/MemberRatingInfoModal.spec.tsx

@@ -212,4 +212,23 @@ describe('MemberRatingInfoModal', () => {
         expect(parseFloat(marker.style.left))
             .toBeCloseTo((3.5 / 6) * 100)
     })
+
+    it('hides the 2200+ axis label when the distribution has no elite buckets', () => {
+        render(
+            <MemberRatingInfoModal
+                audienceLabel='developers'
+                onClose={jest.fn()}
+                percentile={15}
+                profile={baseProfile}
+                rating={1646}
+                ratingDistribution={ratingDistribution}
+            />,
+        )
+
+        expect(screen.getByText('1500'))
+            .toBeInTheDocument()
+        expect(screen.queryByText('2200+'))
+            .not
+            .toBeInTheDocument()
+    })
 })

src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/MemberRatingInfoModal.tsx

@@ -292,6 +292,29 @@ const getAxisLabelPosition = (
     return 100
 }
 
+/**
+ * Returns axis labels that fall within the visible distribution ranges.
+ *
+ * Hides labels such as `2200+` when the trimmed histogram has no elite buckets,
+ * which otherwise stack on top of the final label (e.g. `1500`).
+ *
+ * @param {RatingDistributionRange[]} ranges - Visible rating distribution ranges.
+ * @returns {Array<{ label: string, value: number }>} Axis labels to render.
+ */
+const getVisibleAxisLabels = (
+    ranges: RatingDistributionRange[],
+): Array<{ label: string, value: number }> => {
+    if (ranges.length === 0) {
+        return chartAxisLabels
+    }
+
+    const chartEnd = ranges[ranges.length - 1].end
+
+    return chartAxisLabels.filter((axisLabel: { label: string, value: number }) => (
+        axisLabel.value <= chartEnd
+    ))
+}
+
 /**
  * Calculates a bar height for a histogram count.
  *
@@ -359,6 +382,9 @@ const MemberRatingInfoModal: FC<MemberRatingInfoModalProps> = (props: MemberRati
     const markerPosition: number = props.rating !== undefined
         ? getMarkerPosition(props.rating, distributionRanges)
         : 0
+    const visibleAxisLabels: Array<{ label: string, value: number }> = useMemo(() => (
+        getVisibleAxisLabels(distributionRanges)
+    ), [distributionRanges])
     const shouldStackMarkerRating: boolean = props.rating !== undefined && (
         markerPosition >= stackedMarkerPositionThreshold
         || props.rating >= stackedMarkerRatingThreshold
@@ -476,7 +502,7 @@ const MemberRatingInfoModal: FC<MemberRatingInfoModalProps> = (props: MemberRati
                             )}
 
                             <div className={styles.axisLabels}>
-                                {chartAxisLabels.map((axisLabel: { label: string, value: number }) => (
+                                {visibleAxisLabels.map((axisLabel: { label: string, value: number }) => (
                                     <span
                                         key={axisLabel.label}
                                         style={{