Merge pull request #497 from topcoder-platform/TCA-955-updates

kkartunov · web-flow · commit a0bad7d26aeb · 2023-02-16T19:00:32.000+02:00
TCA-955 short URLs support via `completionUuid`
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
@@ -16,3 +16,4 @@ export * from './tca-certification'
 export * from './tca-certification-progress'
 export * from './tca-certification-enrollment-base.model'
 export * from './tca-certification-validation'
+export * from './tca-certification-enrollment'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment-base.model.ts
@@ -1,11 +1,14 @@
+import { TCACertification } from './tca-certification.model'
+
 export interface TCACertificationEnrollmentBase {
     id: number
     topcoderCertificationId: number
+    topcoderCertification?: TCACertification
     userId: string
     userHandle: string
     userName: string
     status: 'enrolled'
-    completedAt: null | Date
+    completedAt: null | Date | string
     completionUuid: undefined | null | string
     createdAt: Date
     updatedAt: Date
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/index.ts
@@ -0,0 +1 @@
+export * from './tca-enrollment-provider'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx
@@ -0,0 +1,28 @@
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
+
+import { learnUrlGet } from '../../../functions'
+import { useSwrCache } from '../../../learn-swr'
+import { TCACertificationEnrollmentProviderData } from '../tca-certification-progress'
+
+export function useTCACertificationEnrollment(
+    id: string, // note id | completionUuid both are supported by the API
+): TCACertificationEnrollmentProviderData {
+
+    const url: string = learnUrlGet(
+        'certification-enrollment',
+        id,
+    )
+
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
+
+    const { data, error }: SWRResponse = useSWR(url, {
+        ...swrCacheConfig,
+    })
+
+    return {
+        enrollment: data,
+        error: !!error,
+        loading: !data,
+        ready: !!data,
+    }
+}
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts
@@ -1,3 +1,5 @@
+import { TCACertificationEnrollmentBase } from '../tca-certification-enrollment-base.model'
+
 import { TCACertificationProgress } from './tca-certification-progress.model'
 
 export interface TCACertificationProgressProviderData {
@@ -10,7 +12,7 @@ export interface TCACertificationProgressProviderData {
 }
 
 export interface TCACertificationEnrollmentProviderData {
-    enrollment: TCACertificationProgress | undefined
+    enrollment: TCACertificationEnrollmentBase | TCACertificationProgress | undefined
     error: boolean
     loading: boolean
     ready: boolean
diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx
@@ -127,10 +127,9 @@ export function getUserTCACertificateUrl(
 }
 
 export function getTCACertificationValidationUrl(
-    certification: string,
-    handle: string,
+    completionUuid: string,
 ): string {
-    return `${EnvironmentConfig.TOPCODER_URLS.TCA}/${LEARN_PATHS.tcaCertifications}/${certification}/${handle}`
+    return `${EnvironmentConfig.TOPCODER_URLS.TCA}/${LEARN_PATHS.root}/${completionUuid}`
 }
 
 export function getAuthenticateAndEnrollRoute(): string {
@@ -209,8 +208,8 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
             {
                 children: [],
                 element: <ValidateTCACertificate />,
-                id: 'Validate TCA Certification',
-                route: 'tca-certifications/:certification/:memberHandle',
+                id: 'Validate TCA Certification - aka hiring manager view',
+                route: ':completionUuid',
             },
         ],
         element: <LandingLearn />,
diff --git a/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx
@@ -100,8 +100,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
 
     const handlePrint: () => Promise<void> = useCertificatePrint(certificateElRef, certificationTitle)
 
-    // TODO: update this to use `completionUuid`
-    const validateLink: string = getTCACertificationValidationUrl(props.certification, props.profile.handle)
+    const validateLink: string = getTCACertificationValidationUrl(enrollment?.completionUuid as string)
 
     const handleLinkClick: () => void = useCallback(() => {
         window.open(validateLink, 'blank')
@@ -137,7 +136,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                                 completionUuid={enrollment?.completionUuid}
                                 userName={enrollment?.userName}
                                 tcHandle={props.profile.handle}
-                                completedDate={completedCertificate?.completedDate ?? ''}
+                                completedDate={enrollment?.completedAt as string}
                                 elRef={certificateElRef}
                                 validateLink={validateLink}
                                 viewStyle={props.viewStyle}
diff --git a/src-ts/tools/learn/tca-certificate/certificate-view/certificate/Certificate.tsx b/src-ts/tools/learn/tca-certificate/certificate-view/certificate/Certificate.tsx
@@ -27,6 +27,9 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
 
     const displaySignature: boolean = props.displaySignature ?? true
 
+    const completedDate: string = moment(props.completedDate || new Date())
+        .format('MMM D, YYYY')
+
     // TODO: revisit this when certs expirations are defined, now just +1 year
     const expireDate: string = moment(props.completedDate || new Date())
         .add(1, 'year')
@@ -76,7 +79,7 @@ const Certificate: FC<CertificateProps> = (props: CertificateProps) => {
                                     />
                                     <div className={styles.certInfoLeftData}>
                                         <span>Date of certification</span>
-                                        <span className='ultra-small-medium'>{props.completedDate}</span>
+                                        <span className='ultra-small-medium'>{completedDate}</span>
                                         <span>Valid through</span>
                                         <span className={classNames('ultra-small-medium', styles.gridSeparator)}>
                                             {expireDate}
diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx
@@ -16,8 +16,9 @@ import {
 import {
     CourseBadge,
     TCACertificateType,
-    TCACertificationValidationData,
-    useValidateTCACertification,
+    TCACertification,
+    TCACertificationEnrollmentProviderData,
+    useTCACertificationEnrollment,
 } from '../../learn-lib'
 import { EnvironmentConfig } from '../../../../config'
 import { Certificate } from '../certificate-view/certificate'
@@ -36,13 +37,13 @@ const ValidateTCACertificate: FC<{}> = () => {
 
     const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    // Fetch Enrollment status & progress
     const {
-        certification,
         enrollment,
         ready: certReady,
-    }: TCACertificationValidationData
-        = useValidateTCACertification(routeParams.certification as string, routeParams.memberHandle as string)
+    }: TCACertificationEnrollmentProviderData
+    = useTCACertificationEnrollment(routeParams.completionUuid as string)
+
+    const certification: TCACertification | undefined = enrollment?.topcoderCertification
 
     const courses: any = certification?.certificationResources
 
@@ -51,25 +52,25 @@ const ValidateTCACertificate: FC<{}> = () => {
 
     const coursesGridItems: ReactNode[] | undefined
         = useMemo(() => courses?.map((course: any) => (
-            <div className={styles.courseCard}>
+            <div className={styles.courseCard} key={course.freeCodeCampCertification.fccId}>
                 <CourseBadge type={certification?.certificationCategory.track as TCACertificateType} />
                 <p className='body-main-bold'>{course.freeCodeCampCertification.title}</p>
             </div>
         )), [courses, certification])
 
     // TODO: update this to use `completionUuid`
     const validateLink: string
-        = getTCACertificationValidationUrl(routeParams.certification as string, routeParams.memberHandle as string)
+        = getTCACertificationValidationUrl(routeParams.completionUuid as string)
 
     useEffect(() => {
-        if (routeParams.memberHandle) {
-            profileGetPublicAsync(routeParams.memberHandle)
+        if (enrollment?.userHandle) {
+            profileGetPublicAsync(enrollment.userHandle)
                 .then(userProfile => {
                     setProfile(userProfile)
                     setProfileReady(true)
                 })
         }
-    }, [routeParams.memberHandle, setProfileReady])
+    }, [enrollment, setProfileReady])
 
     function visitFullProfile(): void {
         window.open(`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${profile?.handle}`, '_blank')
@@ -84,7 +85,6 @@ const ValidateTCACertificate: FC<{}> = () => {
                     <div
                         className={classNames(
                             styles.hero,
-                            // TODO: check on API response if category is expanded
                             styles[`hero-${certification.certificationCategory?.track.toLowerCase() || 'dev'}`],
                         )}
                     >
@@ -127,8 +127,9 @@ const ValidateTCACertificate: FC<{}> = () => {
                                 <div className={styles.heroCert}>
                                     <Certificate
                                         certification={certification}
-                                        completedDate={enrollment?.completedAt as unknown as string || '1.1.2023'}
+                                        completedDate={enrollment?.completedAt as unknown as string}
                                         userName={enrollment?.userName}
+                                        completionUuid={routeParams.completionUuid}
                                         validateLink={validateLink}
                                         viewStyle='small-container'
                                     />

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './tca-enrollment-provider'`