cleanup unused routes & views, update urls for certificate btn

Author: vas3a

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx

@@ -31,7 +31,7 @@ export function useTCACertificationEnrollment(
         enrollment: data,
         error: !!error,
         loading: !data,
-        ready: !!data,
+        ready: !!data || !!error,
     }
 }
 

src-ts/tools/learn/learn.routes.tsx

@@ -20,8 +20,7 @@ const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-cer
 const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
 const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
 const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
-const MyTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'MyTCACertificate')
-const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'UserTCACertificate')
+const UserTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'CertificateView')
 
 const ValidateTCACertificate: LazyLoadedComponent
     = lazyLoad(() => import('./tca-certificate'), 'UuidCertificationView')
@@ -121,12 +120,6 @@ export function getTCACertificationEnrollPath(certification: string): string {
 
 export function getTCACertificateUrl(
     certification: string,
-): string {
-    return `${getTCACertificationPath(certification)}${LEARN_PATHS.certificate}`
-}
-
-export function getUserTCACertificateUrl(
-    certification: string,
     handle: string,
 ): string {
     return `${getTCACertificationPath(certification)}/${handle}${LEARN_PATHS.certificate}`
@@ -212,12 +205,6 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
                 id: 'My Learning',
                 route: 'my-learning',
             },
-            {
-                children: [],
-                element: <MyTCACertificate />,
-                id: 'My TCA Certification',
-                route: 'tca-certifications/:certification/certificate',
-            },
             {
                 children: [],
                 element: <UserTCACertificate />,

src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx

@@ -1,9 +1,7 @@
 import { FC, MutableRefObject, ReactNode, useRef } from 'react'
+import { Params, useParams } from 'react-router-dom'
 
-import {
-    LoadingSpinner,
-    UserProfile,
-} from '../../../../lib'
+import { LoadingSpinner } from '../../../../lib'
 import {
     CertificateNotFoundContent,
     CertificatePageLayout,
@@ -15,40 +13,46 @@ import {
 } from '../../learn-lib'
 import { getTCACertificationPath, getTCACertificationValidationUrl, getUserTCACertificateSsr } from '../../learn.routes'
 import { CertificateNotFound } from '../certificate-not-found'
+import { useGetUserProfile, UseGetUserProfileData } from '../user-certification-view/use-get-user-profile'
 
-interface CertificateViewProps {
-    certification: string,
-    fullScreenCertLayout?: boolean,
-    profile: UserProfile,
-}
-
-const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
+const CertificateView: FC<{}> = () => {
 
-    const tcaCertificationPath: string = getTCACertificationPath(props.certification)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
+    const routeParams: Params<string> = useParams()
+    const {
+        isOwnProfile,
+        ready: profileReady,
+    }: UseGetUserProfileData = useGetUserProfile(routeParams.memberHandle)
+
+    const userHandle: string = `${routeParams.memberHandle}`
+    const certificationParam: string = routeParams.certification ?? ''
+
+
+    const tcaCertificationPath: string = getTCACertificationPath(certificationParam)
+
     const {
         certification,
         enrollment,
         error: hasValidationError,
         ready,
     }: TCACertificationValidationData
-        = useValidateTCACertification(props.certification, props.profile.handle)
+        = useValidateTCACertification(certificationParam, userHandle)
 
     const hasCompletedTheCertification: boolean = !!certification && !!enrollment && !hasValidationError
-    const certificateNotFoundError: boolean = ready && !hasCompletedTheCertification
+    const certificateNotFoundError: boolean = profileReady && ready && !hasCompletedTheCertification
 
     function getCertTitle(user: string): string {
         return `${user} - ${certification?.title}`
     }
 
     const certUrl: string = getUserTCACertificateSsr(
-        props.certification,
-        props.profile.handle,
-        getCertTitle(props.profile.handle),
+        certificationParam,
+        userHandle,
+        getCertTitle(userHandle),
     )
 
-    const certificationTitle: string = getCertTitle(enrollment?.userName || props.profile.handle)
+    const certificationTitle: string = getCertTitle(enrollment?.userName || userHandle)
 
     const validateLink: string = getTCACertificationValidationUrl(enrollment?.completionUuid as string)
 
@@ -62,7 +66,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
                 certification={certification as TCACertification}
                 completionUuid={enrollment?.completionUuid ?? ''}
                 userName={enrollment?.userName}
-                tcHandle={props.profile.handle}
+                tcHandle={userHandle}
                 completedDate={enrollment?.completedAt as string}
                 certificateElRef={certificateElRef}
                 validateLink={validateLink}
@@ -78,21 +82,23 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
 
             <LoadingSpinner hide={ready} />
 
-            <CertificatePageLayout
-                certificateElRef={certificateElRef}
-                fallbackBackUrl={tcaCertificationPath}
-                fullScreenCertLayout={!certificateNotFoundError && props.fullScreenCertLayout}
-                isCertificateCompleted={hasCompletedTheCertification}
-                isReady={ready}
-                ssrUrl={certUrl}
-                title={certificationTitle}
-                className={certificateNotFoundError ? 'cert-not-found-layout' : ''}
-                afterContent={certificateNotFoundError && (
-                    <CertificateNotFoundContent className='desktop-hide' />
-                )}
-            >
-                {renderCertificate()}
-            </CertificatePageLayout>
+            {profileReady && (
+                <CertificatePageLayout
+                    certificateElRef={certificateElRef}
+                    fallbackBackUrl={tcaCertificationPath}
+                    fullScreenCertLayout={!certificateNotFoundError && !isOwnProfile}
+                    isCertificateCompleted={hasCompletedTheCertification}
+                    isReady={ready}
+                    ssrUrl={certUrl}
+                    title={certificationTitle}
+                    className={certificateNotFoundError ? 'cert-not-found-layout' : ''}
+                    afterContent={certificateNotFoundError && (
+                        <CertificateNotFoundContent className='desktop-hide' />
+                    )}
+                >
+                    {renderCertificate()}
+                </CertificatePageLayout>
+            )}
         </>
     )
 }

src-ts/tools/learn/tca-certificate/index.ts

@@ -1,10 +1,4 @@
 export * from './user-certification-view'
 
 // used only by SSR
-// TODO: merge this into one component?
-export * from './my-certificate'
 export * from './certificate-view'
-
-// deprecated
-// TODO: remove?
-export * from './user-certificate'

src-ts/tools/learn/tca-certificate/my-certificate/MyTCACertificate.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { Button, ButtonStyle, IconSolid, ProgressBar, useCheckIsMobile } from '../../../../../lib'
+import { Button, ButtonStyle, IconSolid, ProgressBar } from '../../../../../lib'
 import {
     CertificateBadgeIcon,
     CompletionTimeRange,
@@ -12,7 +12,7 @@ import {
     TCACertificationProgress,
     TCACertificationProviderBase,
 } from '../../../learn-lib'
-import { getTCACertificateUrl, getTCACertificationPath } from '../../../learn.routes'
+import { getTCACertificationPath, getTCAUserCertificationUrl } from '../../../learn.routes'
 
 import styles from './TCCertCard.module.scss'
 
@@ -29,7 +29,6 @@ const getCtaBtn: (style: ButtonStyle, label: string, route: string) => ReactNode
 const EXCERPT_TEXT_LEN: number = 165
 
 const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
-    const isMobile: boolean = useCheckIsMobile()
 
     const desc: string = props.certification.description.slice(0, EXCERPT_TEXT_LEN)
 
@@ -49,10 +48,11 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
         }
 
         if (isCompleted) {
+            const certificatePath: string = getTCAUserCertificationUrl(dashedName, props.progress?.userHandle as string)
             return (
                 <div className={styles.completedCTAs}>
                     <div className={styles.certCTAButtons}>
-                        {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))}
+                        {getCtaBtn('primary', 'View Certificate', certificatePath)}
                         {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
                     </div>
                 </div>