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

@@ -45,7 +45,6 @@ const CourseCompletedPage: FC<{}> = () => {
         certificateProgress: progress,
         ready: progressReady,
     }: MyCertificationProgressProviderData = useMyCertificationProgress(
-        profile?.userId,
         routeParams.provider,
         routeParams.certification
     )

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

@@ -43,7 +43,6 @@ const CourseDetailsPage: FC<{}> = () => {
         certificateProgress: progress,
         ready: progressReady,
     }: MyCertificationProgressProviderData = useMyCertificationProgress(
-        profile?.userId,
         routeParams.provider,
         routeParams.certification,
     )

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

@@ -10,12 +10,17 @@ import {
     LearnLesson,
     LearnModule,
     LearnMyCertificationProgress,
+    myCertificationProgressStart,
     MyCertificationProgressStatus,
-    startMyCertificationsProgressAsync,
-    UpdateMyCertificateProgressActions,
-    updateMyCertificationsProgressAsync
+    myCertificationProgressUpdate,
+    MyCertificationUpdateProgressActions
 } 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'
@@ -29,14 +34,15 @@ interface CourseCurriculumProps {
 }
 
 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 ?? MyCertificationProgressStatus.inititialized
     const completedPercentage: number = (props.progress?.courseProgressPercentage ?? 0) / 100
     const inProgress: boolean = status === MyCertificationProgressStatus.inProgress || !!props.progress?.currentLesson
     const isCompleted: boolean = status === MyCertificationProgressStatus.completed
@@ -46,19 +52,25 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
      * 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 myCertificationProgressStart(
                 props.profile.userId,
                 props.course.certificationId,
                 props.course.id,
@@ -107,9 +119,9 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
                 }
             )
         } else {
-            await updateMyCertificationsProgressAsync(
+            await myCertificationProgressUpdate(
                 props.progress.id,
-                UpdateMyCertificateProgressActions.acceptHonestyPolicy,
+                MyCertificationUpdateProgressActions.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 (

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

@@ -1,4 +1,14 @@
-import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import {
+    Dispatch,
+    FC,
+    SetStateAction,
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+} from 'react'
 import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
 
 import {
@@ -16,15 +26,15 @@ import {
     LearnModule,
     LessonProviderData,
     MyCertificationProgressProviderData,
+    myCertificationProgressStart,
     MyCertificationProgressStatus,
-    startMyCertificationsProgressAsync,
-    UpdateMyCertificateProgressActions,
-    updateMyCertificationsProgressAsync,
+    myCertificationProgressUpdate,
+    MyCertificationUpdateProgressActions,
     useCoursesProvider,
     useLessonProvider,
     useMyCertificationProgress,
 } from '../learn-lib'
-import { getCertificationCompletedPath, getCoursePath, getFccLessonPath } from '../learn.routes'
+import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes'
 
 import { FccFrame } from './fcc-frame'
 import styles from './FreeCodeCamp.module.scss'
@@ -49,7 +59,7 @@ const FreeCodeCamp: FC<{}> = () => {
         certificateProgress,
         setCertificateProgress,
         ready: progressReady,
-    }: MyCertificationProgressProviderData = useMyCertificationProgress(profile?.userId, routeParams.provider, certificationParam)
+    }: MyCertificationProgressProviderData = useMyCertificationProgress(routeParams.provider, certificationParam)
 
     const {
         course: courseData,
@@ -71,27 +81,27 @@ const FreeCodeCamp: FC<{}> = () => {
         { url: '/learn/fcc', name: lesson?.module.title ?? '' },
     ], [providerParam, lesson])
 
-    const currentModuleData: LearnModule|undefined = useMemo(() => {
+    const currentModuleData: LearnModule | undefined = useMemo(() => {
         return courseData?.modules.find(d => d.key === moduleParam)
     }, [courseData, moduleParam])
 
     const currentStepIndex: number = useMemo(() => {
-      if (!currentModuleData) {
-          return 0
-      }
+        if (!currentModuleData) {
+            return 0
+        }
 
-      const lessonIndex: number = currentModuleData.lessons.findIndex(l => l.dashedName === lessonParam)
-      return lessonIndex + 1
+        const lessonIndex: number = currentModuleData.lessons.findIndex(l => l.dashedName === lessonParam)
+        return lessonIndex + 1
     }, [currentModuleData, lessonParam])
 
     const handleNavigate: (direction: number) => void = useCallback((direction = 1) => {
 
-        const nextStep: LearnLesson|undefined = currentModuleData?.lessons[(currentStepIndex - 1) + direction]
+        const nextStep: LearnLesson | undefined = currentModuleData?.lessons[(currentStepIndex - 1) + direction]
         if (!nextStep) {
             return
         }
 
-        const lessonPath: string = getFccLessonPath(
+        const lessonPath: string = getLessonPathFromModule(
             providerParam,
             certificationParam,
             moduleParam,
@@ -108,12 +118,19 @@ const FreeCodeCamp: FC<{}> = () => {
     ])
 
     function updatePath(lessonPath: string, modulePath: string, coursePath: string): void {
-        if (coursePath !== certificationParam) { setCourseParam(coursePath) }
-        if (modulePath !== moduleParam) { setModuleParam(modulePath) }
-        if (lessonPath !== lessonParam) { setLessonParam(lessonPath) }
+
+        if (coursePath !== certificationParam) {
+            setCourseParam(coursePath)
+        }
+        if (modulePath !== moduleParam) {
+            setModuleParam(modulePath)
+        }
+        if (lessonPath !== lessonParam) {
+            setLessonParam(lessonPath)
+        }
 
         if (lessonPath !== lessonParam || modulePath !== moduleParam || coursePath !== certificationParam) {
-            const nextLessonPath: string = getFccLessonPath(
+            const nextLessonPath: string = getLessonPathFromModule(
                 providerParam,
                 coursePath,
                 modulePath,
@@ -124,10 +141,11 @@ const FreeCodeCamp: FC<{}> = () => {
     }
 
     function handleFccLessonReady(lessonPath: string): void {
+
         const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '').split('/').reverse()
         updatePath(nLessonPath, modulePath, coursePath)
 
-        const currentLesson: {[key: string]: string} = {
+        const currentLesson: { [key: string]: string } = {
             lesson: nLessonPath,
             module: modulePath,
         }
@@ -141,7 +159,7 @@ const FreeCodeCamp: FC<{}> = () => {
         }
 
         if (!certificateProgress) {
-            startMyCertificationsProgressAsync(
+            myCertificationProgressStart(
                 profile.userId,
                 lesson.course.certificationId,
                 lesson.course.id,
@@ -151,51 +169,51 @@ const FreeCodeCamp: FC<{}> = () => {
             // TODO: remove this delay!!
             // TEMP_FIX: delay this api call to allow for previous "completeLesson" call to write in the api
             setTimeout(() => {
-                updateMyCertificationsProgressAsync(
-                        certificateProgress.id,
-                        UpdateMyCertificateProgressActions.currentLesson,
-                        currentLesson
-                    )
+                myCertificationProgressUpdate(
+                    certificateProgress.id,
+                    MyCertificationUpdateProgressActions.currentLesson,
+                    currentLesson
+                )
                     .then(setCertificateProgress)
             }, 500)
         }
     }
 
     function handleFccLessonComplete(): void {
-        const currentLesson: {[key: string]: string} = {
+        const currentLesson: { [key: string]: string } = {
             lesson: lessonParam,
             module: moduleParam,
         }
         if (certificateProgress) {
-            updateMyCertificationsProgressAsync(
+            myCertificationProgressUpdate(
                 certificateProgress.id,
-                UpdateMyCertificateProgressActions.completeLesson,
+                MyCertificationUpdateProgressActions.completeLesson,
                 currentLesson
             ).then(setCertificateProgress)
         }
     }
 
     useEffect(() => {
-      if (
-        certificateProgress &&
-        certificateProgress.courseProgressPercentage === 100 &&
-        certificateProgress.status === MyCertificationProgressStatus.inProgress
-    ) {
-        updateMyCertificationsProgressAsync(
-            certificateProgress.id,
-            UpdateMyCertificateProgressActions.completeCertificate,
-            {}
-        )
-            .then(setCertificateProgress)
-            .then(() => {
-                const completedPath: string = getCertificationCompletedPath(
-                    providerParam,
-                    certificationParam
-                )
+        if (
+            certificateProgress &&
+            certificateProgress.courseProgressPercentage === 100 &&
+            certificateProgress.status === MyCertificationProgressStatus.inProgress
+        ) {
+            myCertificationProgressUpdate(
+                certificateProgress.id,
+                MyCertificationUpdateProgressActions.completeCertificate,
+                {}
+            )
+                .then(setCertificateProgress)
+                .then(() => {
+                    const completedPath: string = getCertificationCompletedPath(
+                        providerParam,
+                        certificationParam
+                    )
 
-                navigate(completedPath)
-            })
-      }
+                    navigate(completedPath)
+                })
+        }
     }, [
         certificateProgress,
         certificationParam,

src-ts/tools/learn/learn-lib/certifications-provider/certifications-functions/learn-certification.model.ts

@@ -5,6 +5,6 @@ export interface LearnCertification {
     key: string
     providerId: string
     providerName: string
-    state: string
+    state: 'active' | 'coming-soon'
     title: string
 }

src-ts/tools/learn/learn-lib/course-outline/CourseOutline.tsx

@@ -8,7 +8,7 @@ import {
     LearnModule,
     LearnMyCertificationProgress,
 } from '../../learn-lib'
-import { getFccLessonPath } from '../../learn.routes'
+import { getLessonPathFromModule } from '../../learn.routes'
 
 import { CollapsibleItem } from './collapsible-item'
 import styles from './CourseOutline.module.scss'
@@ -22,14 +22,15 @@ interface CourseOutlineProps {
 
 const CourseOutline: FC<CourseOutlineProps> = (props: CourseOutlineProps) => {
 
-    const lessonPath: (course: LearnCourse, module: LearnModule, lesson: LearnLesson) => string = useCallback((course: LearnCourse, module: LearnModule, lesson: LearnLesson) => {
-        return getFccLessonPath(
-            course.provider,
-            course.certification,
-            module.key,
-            lesson.dashedName,
-        )
-    }, [])
+    const lessonPath: (course: LearnCourse, module: LearnModule, lesson: LearnLesson) => string
+        = useCallback((course: LearnCourse, module: LearnModule, lesson: LearnLesson) => {
+            return getLessonPathFromModule(
+                course.provider,
+                course.certification,
+                module.key,
+                lesson.dashedName,
+            )
+        }, [])
 
     return (
         <div className={classNames(styles['wrap'], 'course-outline-wrap')}>

src-ts/tools/learn/learn-lib/index.ts

@@ -1,13 +1,12 @@
 export * from './certifications-provider'
-export * from './resource-provider-provider'
 export * from './collapsible-pane'
+export * from './course-outline'
+export * from './course-title'
 export * from './courses-provider'
 export * from './curriculum-summary'
 export * from './lesson-provider'
 export * from './my-certifications-provider'
 export * from './my-course-card'
-
-export * from './course-outline'
-export * from './course-title'
+export * from './resource-provider-provider'
 export * from './svgs'
 export * from './wave-hero'