PROD-2549 Add Course State to Course Cards -> dev

src-ts/tools/learn/Learn.tsx

@@ -2,7 +2,6 @@ import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
 import {
-    ContentLayout,
     routeContext,
     RouteContextData,
 } from '../../lib'

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -11,16 +11,16 @@ import {
     ProfileContextData
 } from '../../../lib'
 import {
-    CertificationsProviderData,
+    AllCertificationsProviderData,
     CollapsiblePane,
     CourseOutline,
     CoursesProviderData,
     CourseTitle,
-    MyCertificationProgressProviderData,
-    MyCertificationProgressStatus,
-    useCertificationsProvider,
-    useCoursesProvider,
-    useMyCertificationProgress
+    useAllCertifications,
+    useCourses,
+    UserCertificationProgressProviderData,
+    UserCertificationProgressStatus,
+    useUserCertificationProgress
 } from '../learn-lib'
 import { getCertificatePath, getCoursePath } from '../learn.routes'
 
@@ -39,12 +39,12 @@ const CourseCompletedPage: FC<{}> = () => {
     const {
         course: courseData,
         ready: courseDataReady,
-    }: CoursesProviderData = useCoursesProvider(providerParam, certificationParam)
+    }: CoursesProviderData = useCourses(providerParam, certificationParam)
 
     const {
-        certificateProgress: progress,
+        certificationProgress: progress,
         ready: progressReady,
-    }: MyCertificationProgressProviderData = useMyCertificationProgress(
+    }: UserCertificationProgressProviderData = useUserCertificationProgress(
         profile?.userId,
         routeParams.provider,
         routeParams.certification
@@ -53,7 +53,7 @@ const CourseCompletedPage: FC<{}> = () => {
     const {
         certification,
         ready: certifReady,
-    }: CertificationsProviderData = useCertificationsProvider(providerParam, progress?.certificationId, {
+    }: AllCertificationsProviderData = useAllCertifications(providerParam, progress?.certificationId, {
         enabled: progressReady && !!progress,
     })
 
@@ -66,9 +66,9 @@ const CourseCompletedPage: FC<{}> = () => {
     ], [coursePath, courseData])
 
     useEffect(() => {
-      if (ready && progress?.status !== MyCertificationProgressStatus.completed) {
-        navigate(coursePath)
-      }
+        if (ready && progress?.status !== UserCertificationProgressStatus.completed) {
+            navigate(coursePath)
+        }
     }, [
         coursePath,
         navigate,

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -13,12 +13,12 @@ import {
 import {
     CoursesProviderData,
     CourseTitle,
-    MyCertificationProgressProviderData,
-    MyCertificationProgressStatus,
     ResourceProviderData,
-    useCoursesProvider,
-    useMyCertificationProgress,
-    useResourceProvider
+    useCourses,
+    UserCertificationProgressProviderData,
+    UserCertificationProgressStatus,
+    useResourceProvider,
+    useUserCertificationProgress
 } from '../learn-lib'
 
 import { CourseCurriculum } from './course-curriculum'
@@ -37,12 +37,12 @@ const CourseDetailsPage: FC<{}> = () => {
     const {
         course,
         ready: courseReady,
-    }: CoursesProviderData = useCoursesProvider(routeParams.provider ?? '', routeParams.certification)
+    }: CoursesProviderData = useCourses(routeParams.provider ?? '', routeParams.certification)
 
     const {
-        certificateProgress: progress,
+        certificationProgress: progress,
         ready: progressReady,
-    }: MyCertificationProgressProviderData = useMyCertificationProgress(
+    }: UserCertificationProgressProviderData = useUserCertificationProgress(
         profile?.userId,
         routeParams.provider,
         routeParams.certification,
@@ -59,7 +59,7 @@ const CourseDetailsPage: FC<{}> = () => {
             return
         }
 
-        return progress?.status === MyCertificationProgressStatus.completed ? (
+        return progress?.status === UserCertificationProgressStatus.completed ? (
             <>
                 <h3 className='details'>Suggested next steps</h3>
 

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

@@ -9,13 +9,18 @@ import {
     LearningHat,
     LearnLesson,
     LearnModule,
-    LearnMyCertificationProgress,
-    MyCertificationProgressStatus,
-    startMyCertificationsProgressAsync,
-    UpdateMyCertificateProgressActions,
-    updateMyCertificationsProgressAsync
+    LearnUserCertificationProgress,
+    userCertificationProgressStartAsync,
+    UserCertificationProgressStatus,
+    userCertificationProgressUpdateAsync,
+    UserCertificationUpdateProgressActions
 } from '../../learn-lib'
-import { authenticateAndStartCourseRoute, getCertificatePath, getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
+import {
+    authenticateAndStartCourseRoute,
+    getCertificatePath,
+    getLessonPathFromCurrentLesson,
+    LEARN_PATHS,
+} from '../../learn.routes'
 
 import styles from './CourseCurriculum.module.scss'
 import { CurriculumSummary } from './curriculum-summary'
@@ -24,41 +29,48 @@ import { TcAcademyPolicyModal } from './tc-academy-policy-modal'
 interface CourseCurriculumProps {
     course: LearnCourse
     profile?: UserProfile
-    progress?: LearnMyCertificationProgress
+    progress?: LearnUserCertificationProgress
     progressReady?: boolean
 }
 
 const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProps) => {
+
     const navigate: NavigateFunction = useNavigate()
     const [searchParams]: any = useSearchParams()
 
     const isLoggedIn: boolean = !!props.profile
 
     const [isTcAcademyPolicyModal, setIsTcAcademyPolicyModal]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    const status: string = props.progress?.status ?? 'init'
+    const status: string = props.progress?.status ?? UserCertificationProgressStatus.inititialized
     const completedPercentage: number = (props.progress?.courseProgressPercentage ?? 0) / 100
-    const inProgress: boolean = status === MyCertificationProgressStatus.inProgress || !!props.progress?.currentLesson
-    const isCompleted: boolean = status === MyCertificationProgressStatus.completed
+    const inProgress: boolean = status === UserCertificationProgressStatus.inProgress || !!props.progress?.currentLesson
+    const isCompleted: boolean = status === UserCertificationProgressStatus.completed
 
     /**
      * Redirect user to the currentLesson if there's already some progress recorded
      * otherwise redirect to first module > first lesson
      */
     const handleStartCourse: () => void = useCallback(() => {
-        const current: Array<string> = (props.progress?.currentLesson ?? '').split('/')
+
         const course: LearnCourse = props.course
         const module: LearnModule = course.modules[0]
         const lesson: LearnLesson = module.lessons[0]
 
-        const lessonPath: string = getFccLessonPath(
+        const lessonPath: string = getLessonPathFromCurrentLesson(
             course.provider,
             course.certification,
-            current[0] || module.meta.dashedName,
-            current[1] || lesson.dashedName,
+            props.progress?.currentLesson,
+            module.meta.dashedName,
+            lesson.dashedName,
         )
         navigate(lessonPath)
-    }, [props.course, props.progress, navigate])
+    }, [
+        getLessonPathFromCurrentLesson,
+        navigate,
+        props.course,
+        props.progress,
+    ])
 
     /**
      * Handle user click on start course/resume/login button
@@ -97,7 +109,7 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
         }
 
         if (!props.progress?.id) {
-            await startMyCertificationsProgressAsync(
+            await userCertificationProgressStartAsync(
                 props.profile.userId,
                 props.course.certificationId,
                 props.course.id,
@@ -107,9 +119,9 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
                 }
             )
         } else {
-            await updateMyCertificationsProgressAsync(
+            await userCertificationProgressUpdateAsync(
                 props.progress.id,
-                UpdateMyCertificateProgressActions.acceptHonestyPolicy,
+                UserCertificationUpdateProgressActions.acceptHonestyPolicy,
                 {}
             )
         }
@@ -134,9 +146,9 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
      * proceed as if the user just clicked "Start course" button
      */
     useEffect(() => {
-      if (props.progressReady && isLoggedIn && searchParams.get('start-course') !== null) {
-        handleStartCourseClick()
-      }
+        if (props.progressReady && isLoggedIn && searchParams.get('start-course') !== null) {
+            handleStartCourseClick()
+        }
     }, [handleStartCourseClick, isLoggedIn, props.progressReady, searchParams])
 
     return (