TCA-870 add the public user cert route

Author: kkartunov

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certifications.provider.tsx

@@ -6,7 +6,7 @@ import { UserCompletedTCACertification } from './user-completed-tca-certificatio
 import { UserCompletedTCACertificationsProviderData } from './user-completed-tca-certifications-provider-data.model'
 
 const COMPLETED_CERTS_MOCK = [
-    { status: 'comleted', trackType: 'web dev', completedDate: '' },
+    { status: 'comleted', trackType: 'web dev', completedDate: 'Dec 19, 2022' },
 ]
 
 export function useGetUserTCACompletedCertifications(

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

@@ -12,6 +12,7 @@ const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-cam
 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')
 
 export enum LEARN_PATHS {
     certificate = '/certificate',
@@ -147,6 +148,12 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
                 id: 'My TCA Certification',
                 route: 'tca-certifications/:certification/certificate',
             },
+            {
+                children: [],
+                element: <UserTCACertificate />,
+                id: 'User TCA Certification',
+                route: 'tca-certifications/:certification/:memberHandle/certificate',
+            },
         ],
         element: <LandingLearn />,
         id: toolTitle,

src-ts/tools/learn/tca-certificate/user-certificate/UserCertificate.module.scss renamed to src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.module.scss

@@ -1,18 +1,19 @@
-import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Params, useParams, useSearchParams } from 'react-router-dom'
+import { Dispatch, FC, MutableRefObject, SetStateAction, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { NavigateFunction, Params, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 
 import {
     LoadingSpinner,
     profileGetPublicAsync,
     UserProfile,
 } from '../../../../lib'
-import { getViewStyleParamKey } from '../../learn.routes'
+import { getTCACertificationPath, getViewStyleParamKey } from '../../learn.routes'
 import { CertificateView, CertificateViewStyle } from '../certificate-view'
 
-import styles from './UserCertificate.module.scss'
+import styles from './UserTCACertificate.module.scss'
 
-const UserCertificate: FC<{}> = () => {
+const UserTCACertificate: FC<{}> = () => {
 
+    const navigate: NavigateFunction = useNavigate()
     const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
     const routeParams: Params<string> = useParams()
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
@@ -23,9 +24,10 @@ const UserCertificate: FC<{}> = () => {
     ] = useState()
     const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    const providerParam: string = routeParams.provider ?? ''
     const certificationParam: string = routeParams.certification ?? ''
 
+    const tcaCertificationPath: string = getTCACertificationPath(certificationParam)
+
     useEffect(() => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
@@ -50,6 +52,10 @@ const UserCertificate: FC<{}> = () => {
         el.classList.add(styles['full-screen-cert'])
     })
 
+    const navigateToCertification: () => void = useCallback(() => {
+        navigate(tcaCertificationPath)
+    }, [tcaCertificationPath, navigate])
+
     return (
         <>
             <LoadingSpinner hide={profileReady} />
@@ -59,8 +65,7 @@ const UserCertificate: FC<{}> = () => {
                     <CertificateView
                         certification={certificationParam}
                         profile={profile}
-                        provider={providerParam}
-                        onCertificationNotCompleted={() => { }}
+                        onCertificationNotCompleted={navigateToCertification}
                         hideActions
                         viewStyle={queryParams.get(getViewStyleParamKey()) as CertificateViewStyle}
                     />
@@ -70,4 +75,4 @@ const UserCertificate: FC<{}> = () => {
     )
 }
 
-export default UserCertificate
+export default UserTCACertificate

src-ts/tools/learn/tca-certificate/user-certificate/UserCertificate.tsx renamed to src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.tsx

@@ -1 +1 @@
-export { default as UserCertificate } from './UserCertificate'
+export { default as UserTCACertificate } from './UserTCACertificate'