Merge pull request #199 from topcoder-platform/TA_add-course-completion-redirect

Add course completion redirect to /completed page

Author: brooketopcoder

src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx

@@ -15,7 +15,7 @@ import {
     UpdateMyCertificateProgressActions,
     updateMyCertificationsProgressAsync
 } from '../../learn-lib'
-import { authenticateAndStartCourseRoute, getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
+import { authenticateAndStartCourseRoute, getCertificatePath, getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
 
 import styles from './CourseCurriculum.module.scss'
 import { CurriculumSummary } from './curriculum-summary'
@@ -124,6 +124,11 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
         props.progress?.id,
     ])
 
+    const handleNavigateToCertificate: () => void = () => {
+        const certificatePath: string = getCertificatePath(props.course.provider, props.course.certification)
+        navigate(certificatePath)
+    }
+
     /**
      * If the url has a "start-course" search param,
      * proceed as if the user just clicked "Start course" button
@@ -154,6 +159,7 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
                     completedPercentage={completedPercentage}
                     completed={isCompleted}
                     completedDate={props.progress?.completedDate}
+                    onClickCertificateBtn={handleNavigateToCertificate}
                     isLoggedIn={isLoggedIn}
                 />
 

src-ts/tools/learn/course-details/course-curriculum/curriculum-summary/CurriculumSummary.tsx

@@ -41,7 +41,7 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
                 <Button
                     buttonStyle='secondary'
                     size='xs'
-                    label='Get your certificate'
+                    label='View certificate'
                     onClick={props.onClickCertificateBtn}
                 />
             </>

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -24,7 +24,7 @@ import {
     useLessonProvider,
     useMyCertificationProgress,
 } from '../learn-lib'
-import { getCoursePath, getFccLessonPath } from '../learn.routes'
+import { getCertificationCompletedPath, getCoursePath, getFccLessonPath } from '../learn.routes'
 
 import { FccFrame } from './fcc-frame'
 import styles from './FreeCodeCamp.module.scss'
@@ -185,9 +185,24 @@ const FreeCodeCamp: FC<{}> = () => {
             certificateProgress.id,
             UpdateMyCertificateProgressActions.completeCertificate,
             {}
-        ).then(setCertificateProgress)
+        )
+            .then(setCertificateProgress)
+            .then(() => {
+                const completedPath: string = getCertificationCompletedPath(
+                    providerParam,
+                    certificationParam
+                )
+
+                navigate(completedPath)
+            })
       }
-    }, [certificateProgress, setCertificateProgress])
+    }, [
+        certificateProgress,
+        certificationParam,
+        navigate,
+        providerParam,
+        setCertificateProgress,
+    ])
 
     useEffect(() => {
         const certificationPath: string = routeParams.certification ?? ''

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

@@ -16,6 +16,10 @@ export function getCertificatePath(provider: string, certification: string): str
     return `/learn/${provider}/${certification}/certificate`
 }
 
+export function getCertificationCompletedPath(provider: string, certification: string): string {
+    return `/learn/${provider}/${certification}/completed`
+}
+
 export function getFccLessonPath(
     provider: string,
     certification: string,