From 149de417619bb8089e3c010dff7799afd2567025 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Thu, 27 Apr 2023 13:04:26 +0300
Subject: [PATCH] TCA-1280 - handle breadcrumbs navigation within course pages

---
 .../breadcrumb-item/BreadcrumbItem.tsx        |  1 +
 .../breadcrumb-item/breadcrumb-item.model.ts  |  1 +
 .../course-card/CourseCard.tsx                | 33 +++----
 .../course-completed/CourseCompletedPage.tsx  | 55 ++++-------
 .../course-details/CourseDetailsPage.tsx      | 40 ++------
 .../CoursePage.context.tsx                    | 90 ++++++++++++++++++
 .../course-page-wrapper/CoursePageWrapper.tsx | 27 ++++++
 .../tools/learn/course-page-wrapper/index.ts  |  2 +
 .../learn/free-code-camp/FreeCodeCamp.tsx     | 91 ++++++-------------
 .../collapsible-item/CollapsibleItem.tsx      | 10 +-
 src-ts/tools/learn/learn.routes.tsx           | 67 ++++++++------
 11 files changed, 234 insertions(+), 183 deletions(-)
 create mode 100644 src-ts/tools/learn/course-page-wrapper/CoursePage.context.tsx
 create mode 100644 src-ts/tools/learn/course-page-wrapper/CoursePageWrapper.tsx
 create mode 100644 src-ts/tools/learn/course-page-wrapper/index.ts

diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx b/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
index c262355aa..b27c7aa3d 100644
--- a/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
+++ b/src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx
@@ -26,6 +26,7 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
             <Link
                 className={classNames(props.item.isElipsis && styles.elipsis)}
                 to={props.item.url}
+                state={props.item.state}
             >
                 {props.item.name}
             </Link>
diff --git a/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts b/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
index 16a96414c..909c70e4f 100644
--- a/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
+++ b/src-ts/lib/breadcrumb/breadcrumb-item/breadcrumb-item.model.ts
@@ -3,4 +3,5 @@ export interface BreadcrumbItemModel {
     name: string
     onClick?: (item: BreadcrumbItemModel) => void
     url: string
+    state?: any
 }
diff --git a/src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.tsx b/src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.tsx
index f562d0b43..cacaf631e 100644
--- a/src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.tsx
+++ b/src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 
-import { Button, IconSolid, ProgressBar } from '../../../../../../lib'
+import { BreadcrumbItemModel, Button, IconSolid, ProgressBar } from '../../../../../../lib'
 import {
     clearFCCCertificationTitle,
     CompletionTimeRange,
@@ -20,6 +20,7 @@ import {
     getCertificatePath,
     getCoursePath,
     getLessonPathFromCurrentLesson,
+    getTCACertificationPath,
 } from '../../../../learn.routes'
 import CurriculumCard from '../CurriculumCard'
 
@@ -36,7 +37,16 @@ interface CourseCardProps {
 }
 
 const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
+
     function renderCta(): ReactNode {
+
+        const routeState: { tcaCertInfo: BreadcrumbItemModel } = {
+            tcaCertInfo: {
+                name: props.tcaCertification.title,
+                url: getTCACertificationPath(props.tcaCertification.dashedName),
+            },
+        }
+
         switch (props.progress?.status) {
             case UserCertificationProgressStatus.completed:
                 return (
@@ -49,12 +59,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
                                 props.provider,
                                 props.certification.certification,
                             )}
-                            routeState={{
-                                tcaCertInfo: {
-                                    dashedName: props.tcaCertification.dashedName,
-                                    title: props.tcaCertification.title,
-                                },
-                            }}
+                            routeState={routeState}
                         />
                         <Button
                             buttonStyle='primary'
@@ -78,12 +83,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
                             props.certification.certification,
                             props.progress?.currentLesson,
                         )}
-                        routeState={{
-                            tcaCertInfo: {
-                                dashedName: props.tcaCertification.dashedName,
-                                title: props.tcaCertification.title,
-                            },
-                        }}
+                        routeState={routeState}
                     />
                 )
             default:
@@ -96,12 +96,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
                             props.provider,
                             props.certification.certification,
                         )}
-                        routeState={{
-                            tcaCertInfo: {
-                                dashedName: props.tcaCertification.dashedName,
-                                title: props.tcaCertification.title,
-                            },
-                        }}
+                        routeState={routeState}
                     />
                 )
         }
diff --git a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx
index ed368a59e..a842ebdc2 100755
--- a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx
+++ b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx
@@ -1,5 +1,5 @@
 import { FC, useContext, useEffect, useMemo } from 'react'
-import { NavigateFunction, Params, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Params, useParams } from 'react-router-dom'
 
 import {
     Breadcrumb,
@@ -19,12 +19,12 @@ import {
     useGetCourses,
     useGetTCACertification,
     useGetUserCertificationProgress,
-    useLearnBreadcrumb,
     UserCertificationProgressProviderData,
     UserCertificationProgressStatus,
     useTCACertificationCheckCompleted,
 } from '../learn-lib'
-import { getCoursePath, getTCACertificationPath, LEARN_PATHS } from '../learn.routes'
+import { getCoursePath, LEARN_PATHS } from '../learn.routes'
+import { CoursePageContextValue, useCoursePageContext } from '../course-page-wrapper'
 
 import { CourseView } from './course-view'
 import { TCACertificationView } from './tca-certification-view'
@@ -32,7 +32,7 @@ import styles from './CourseCompletedPage.module.scss'
 
 const CourseCompletedPage: FC<{}> = () => {
 
-    const navigate: NavigateFunction = useNavigate()
+    const { buildBreadcrumbs, localNavigate }: CoursePageContextValue = useCoursePageContext()
     const routeParams: Params<string> = useParams()
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
     const providerParam: string = textFormatGetSafeString(routeParams.provider)
@@ -94,45 +94,24 @@ const CourseCompletedPage: FC<{}> = () => {
         tcaCertifCompletedCheckReady,
     ])
 
-    const location: any = useLocation()
-
-    const breadcrumbItems: BreadcrumbItemModel[] = useMemo(() => {
-        const bItems: BreadcrumbItemModel[] = [
-            {
-                name: courseData?.title ?? '',
-                url: coursePath,
-            },
-            {
-                name: 'Congratulations!',
-                url: LEARN_PATHS.completed,
-            },
-        ]
-
-        // if coming path is from TCA certification details page
-        // then we need to add the certification to the navi list
-        if (location.state?.tcaCertInfo) {
-            bItems.unshift({
-                name: location.state.tcaCertInfo.title,
-                url: getTCACertificationPath(location.state.tcaCertInfo.dashedName),
-            })
-        }
-
-        return bItems
-    }, [
-        location.state,
-        courseData?.title,
-        coursePath,
-    ])
-
-    const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb(breadcrumbItems)
+    const breadcrumbs: Array<BreadcrumbItemModel> = useMemo(() => buildBreadcrumbs([
+        {
+            name: courseData?.title ?? '',
+            url: coursePath,
+        },
+        {
+            name: 'Congratulations!',
+            url: LEARN_PATHS.completed,
+        },
+    ]), [buildBreadcrumbs, courseData?.title, coursePath])
 
     useEffect(() => {
         if (ready && progress?.status !== UserCertificationProgressStatus.completed) {
-            navigate(coursePath)
+            localNavigate(coursePath)
         }
     }, [
         coursePath,
-        navigate,
+        localNavigate,
         progress,
         ready,
     ])
@@ -147,7 +126,7 @@ const CourseCompletedPage: FC<{}> = () => {
 
             {ready && courseData && (
                 <>
-                    <Breadcrumb items={breadcrumb} />
+                    <Breadcrumb items={breadcrumbs} />
                     <div className={styles['main-wrap']}>
                         <div className={styles['course-frame']}>
                             {tcaCertificationName && tcaCertification ? (
diff --git a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
index 987ace8ce..986877760 100644
--- a/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
+++ b/src-ts/tools/learn/course-details/CourseDetailsPage.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import { FC, ReactNode, useContext, useMemo } from 'react'
-import { Params, useLocation, useParams } from 'react-router-dom'
+import { Params, useParams } from 'react-router-dom'
 
 import {
     Breadcrumb,
@@ -23,17 +23,17 @@ import {
     useGetCourses,
     useGetResourceProvider,
     useGetUserCertificationProgress,
-    useLearnBreadcrumb,
     UserCertificationProgressProviderData,
     UserCertificationProgressStatus,
 } from '../learn-lib'
-import { getCoursePath, getTCACertificationPath } from '../learn.routes'
+import { getCoursePath } from '../learn.routes'
+import { CoursePageContextValue, useCoursePageContext } from '../course-page-wrapper'
 
 import { CourseCurriculum } from './course-curriculum'
 import styles from './CourseDetailsPage.module.scss'
 
 const CourseDetailsPage: FC<{}> = () => {
-
+    const { buildBreadcrumbs }: CoursePageContextValue = useCoursePageContext()
     const routeParams: Params<string> = useParams()
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
 
@@ -69,36 +69,16 @@ const CourseDetailsPage: FC<{}> = () => {
 
     const ready: boolean = profileReady && courseReady && certificateReady && (!profile || progressReady)
 
-    const location: any = useLocation()
-
-    const breadcrumbItems: BreadcrumbItemModel[] = useMemo(() => {
-        const bItems: BreadcrumbItemModel[] = [
-            {
-
-                name: textFormatGetSafeString(course?.title),
-                url: getCoursePath(routeParams.provider as string, textFormatGetSafeString(routeParams.certification)),
-            },
-        ]
-
-        // if coming path is from TCA certification details page
-        // then we need to add the certification to the navi list
-        if (location.state?.tcaCertInfo) {
-            bItems.unshift({
-                name: location.state.tcaCertInfo.title,
-                url: getTCACertificationPath(location.state.tcaCertInfo.dashedName),
-            })
-        }
-
-        return bItems
-    }, [
+    const breadcrumbs: Array<BreadcrumbItemModel> = useMemo(() => buildBreadcrumbs([{
+        name: textFormatGetSafeString(course?.title),
+        url: getCoursePath(routeParams.provider as string, textFormatGetSafeString(routeParams.certification)),
+    }]), [
+        buildBreadcrumbs,
         course?.title,
         routeParams.certification,
         routeParams.provider,
-        location.state,
     ])
 
-    const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb(breadcrumbItems)
-
     function getDescription(): ReactNode {
 
         if (!course) {
@@ -207,7 +187,7 @@ const CourseDetailsPage: FC<{}> = () => {
                     <LoadingSpinner />
                 </div>
             )}
-            <Breadcrumb items={breadcrumb} />
+            <Breadcrumb items={breadcrumbs} />
             {ready && course && certificate && (
                 <>
                     <div className={styles.wrap}>
diff --git a/src-ts/tools/learn/course-page-wrapper/CoursePage.context.tsx b/src-ts/tools/learn/course-page-wrapper/CoursePage.context.tsx
new file mode 100644
index 000000000..c441d8f57
--- /dev/null
+++ b/src-ts/tools/learn/course-page-wrapper/CoursePage.context.tsx
@@ -0,0 +1,90 @@
+import { Context, createContext, FC, ReactNode, useCallback, useContext, useMemo } from 'react'
+import { NavigateFunction, useLocation, useNavigate } from 'react-router-dom'
+import { pick } from 'lodash'
+
+import { rootRoute } from '../learn.routes'
+import { BreadcrumbItemModel } from '../../../lib'
+
+export interface CoursePageContextProviderProps {
+    children: ReactNode
+}
+
+export interface CoursePageContextValue {
+    buildBreadcrumbs: (items: BreadcrumbItemModel[]) => BreadcrumbItemModel[]
+    localNavigate: NavigateFunction
+    navState: { tcaCertInfo: BreadcrumbItemModel } | undefined
+}
+
+const CoursePageContext: Context<CoursePageContextValue> = createContext(
+    {} as CoursePageContextValue,
+)
+
+/**
+ * Page context provider for Course pages: details, fcc, completed
+ *
+ * It keeps into account the navigation path the user took to get here
+ *
+ * Eg. if user clicked the course directly, there's nothing to do, but
+ * if the user clicked the course from inside the TCA certification page
+ * we need to show an extra breadcrumb specific to TCA certification page
+ */
+
+export const CoursePageContextProvider: FC<CoursePageContextProviderProps> = props => {
+    const location: any = useLocation()
+    const navigate: NavigateFunction = useNavigate()
+
+    const parentTcaCert: BreadcrumbItemModel | undefined = useMemo(() => (
+        (
+            location.state
+            && Object.prototype.hasOwnProperty.call(location.state, 'tcaCertInfo')
+            && location.state.tcaCertInfo && pick(location.state.tcaCertInfo, ['name', 'url'])
+        ) || undefined
+    ), [location.state])
+
+    const buildBreadcrumbs: (items: BreadcrumbItemModel[]) => BreadcrumbItemModel[]
+        = useCallback(items => {
+            const breadcrumbs: BreadcrumbItemModel[] = [
+                {
+                    name: 'Topcoder Academy',
+                    url: rootRoute,
+                },
+                ...(!parentTcaCert ? [] : [parentTcaCert]),
+                ...items,
+            ]
+
+            return !parentTcaCert ? breadcrumbs : breadcrumbs.map(item => Object.assign(item, {
+                state: { tcaCertInfo: pick(parentTcaCert, ['name', 'url']) },
+            }))
+        }, [parentTcaCert])
+
+    const localNavigate: NavigateFunction = useCallback((to, options) => (
+        navigate(to, {
+            ...options,
+            state: {
+                ...options?.state,
+                tcaCertInfo: parentTcaCert,
+            },
+        })
+    ), [navigate, parentTcaCert]) as NavigateFunction
+
+    const ctxValue: CoursePageContextValue = useMemo(() => ({
+        buildBreadcrumbs,
+        localNavigate,
+        navState: parentTcaCert ? { tcaCertInfo: parentTcaCert } : undefined,
+    }), [
+        buildBreadcrumbs,
+        localNavigate,
+        parentTcaCert,
+    ])
+
+    return (
+        <CoursePageContext.Provider
+            value={ctxValue}
+        >
+            {props.children}
+        </CoursePageContext.Provider>
+    )
+}
+
+export const useCoursePageContext: () => CoursePageContextValue
+    = () => useContext(CoursePageContext)
diff --git a/src-ts/tools/learn/course-page-wrapper/CoursePageWrapper.tsx b/src-ts/tools/learn/course-page-wrapper/CoursePageWrapper.tsx
new file mode 100644
index 000000000..ade6e5764
--- /dev/null
+++ b/src-ts/tools/learn/course-page-wrapper/CoursePageWrapper.tsx
@@ -0,0 +1,27 @@
+import { FC, ReactElement, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routeContext, RouteContextData } from '../../../lib'
+import { learnRoutes } from '../learn.routes'
+
+import { CoursePageContextProvider } from './CoursePage.context'
+
+const CoursePageWrapper: FC<{}> = () => {
+    const { getRouteElement }: RouteContextData = useContext(routeContext)
+
+    // Get all the CoursePage child routes and render them as a route element
+    const childRoutes: ReactElement[] = useMemo(() => (
+        learnRoutes[0].children?.find(route => route.id === 'CoursePage')?.children ?? []
+    ).map(getRouteElement), [getRouteElement])
+
+    return (
+        <CoursePageContextProvider>
+            <Outlet />
+            <Routes>
+                {childRoutes}
+            </Routes>
+        </CoursePageContextProvider>
+    )
+}
+
+export default CoursePageWrapper
diff --git a/src-ts/tools/learn/course-page-wrapper/index.ts b/src-ts/tools/learn/course-page-wrapper/index.ts
new file mode 100644
index 000000000..d0cba1afc
--- /dev/null
+++ b/src-ts/tools/learn/course-page-wrapper/index.ts
@@ -0,0 +1,2 @@
+export { default as CoursePageWrapper } from './CoursePageWrapper'
+export * from './CoursePage.context'
diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
index 888557725..e9b75cda5 100644
--- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
+++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
@@ -10,7 +10,7 @@ import {
     useMemo,
     useState,
 } from 'react'
-import { NavigateFunction, Params, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Params, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
 import {
@@ -37,7 +37,6 @@ import {
     useGetCourses,
     useGetLesson,
     useGetUserCertificationProgress,
-    useLearnBreadcrumb,
     userCertificationProgressAutocompleteCourse,
     UserCertificationProgressProviderData,
     userCertificationProgressStartAsync,
@@ -49,9 +48,9 @@ import {
     getCertificationCompletedPath,
     getCoursePath,
     getLessonPathFromModule,
-    getTCACertificationPath,
 } from '../learn.routes'
 import { LearnConfig } from '../learn-config'
+import { CoursePageContextValue, useCoursePageContext } from '../course-page-wrapper'
 
 import { useCheckAndMarkCourseCompleted } from './hooks/use-mark-course-completed'
 import { FccFrame } from './fcc-frame'
@@ -67,7 +66,6 @@ const FreeCodeCamp: FC<{}> = () => {
         profile,
     }: ProfileContextData = useContext(profileContext)
 
-    const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
     const providerParam: string = textFormatGetSafeString(routeParams.provider)
 
@@ -107,41 +105,26 @@ const FreeCodeCamp: FC<{}> = () => {
 
     const module: string = textFormatGetSafeString(lesson?.module.title)
 
-    const location: any = useLocation()
-
-    const breadcrumbItems: BreadcrumbItemModel[] = useMemo(() => {
-        const bItems: BreadcrumbItemModel[] = [
-            {
-                name: textFormatGetSafeString(lesson?.course.title),
-                url: getCoursePath(providerParam, certificationParam),
-            },
-            {
-                name: module,
-                url: getLessonPathFromModule(providerParam, certificationParam, module, lessonParam),
-            },
-        ]
-
-        // if coming path is from TCA certification details page
-        // then we need to add the certification to the navi list
-        if (location.state?.tcaCertInfo) {
-            bItems.unshift({
-                name: location.state.tcaCertInfo.title,
-                url: getTCACertificationPath(location.state.tcaCertInfo.dashedName),
-            })
-        }
-
-        return bItems
-    }, [
+    const { buildBreadcrumbs, localNavigate }: CoursePageContextValue = useCoursePageContext()
+
+    const breadcrumbs: BreadcrumbItemModel[] = useMemo(() => buildBreadcrumbs([
+        {
+            name: textFormatGetSafeString(lesson?.course.title),
+            url: getCoursePath(providerParam, certificationParam),
+        },
+        {
+            name: module,
+            url: getLessonPathFromModule(providerParam, certificationParam, module, lessonParam),
+        },
+    ]), [
+        buildBreadcrumbs,
         certificationParam,
-        lesson,
+        lesson?.course.title,
         lessonParam,
-        location.state,
         module,
         providerParam,
     ])
 
-    const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb(breadcrumbItems)
-
     const currentModuleData: LearnModule | undefined
         = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
 
@@ -167,18 +150,13 @@ const FreeCodeCamp: FC<{}> = () => {
             moduleParam,
             nextStep.dashedName,
         )
-        navigate(lessonPath, {
-            state: {
-                tcaCertInfo: location.state?.tcaCertInfo,
-            },
-        })
+        localNavigate(lessonPath)
     }, [
         certificationParam,
         currentModuleData,
         currentStepIndex,
         moduleParam,
-        location.state,
-        navigate,
+        localNavigate,
         providerParam,
     ])
 
@@ -370,11 +348,7 @@ const FreeCodeCamp: FC<{}> = () => {
                 certificationParam,
             )
 
-            navigate(completedPath, {
-                state: {
-                    tcaCertInfo: location.state?.tcaCertInfo,
-                },
-            })
+            localNavigate(completedPath)
             return
         }
 
@@ -405,18 +379,14 @@ const FreeCodeCamp: FC<{}> = () => {
             firstIncompleteLesson.dashedName ?? '',
         )
 
-        navigate(nextLessonPath, {
-            state: {
-                tcaCertInfo: location.state?.tcaCertInfo,
-            },
-        })
+        localNavigate(nextLessonPath)
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, 30), [
         certificateProgress,
         certificationParam,
         courseData?.modules,
         providerParam,
-        location.state,
+        localNavigate,
     ])
 
     useCheckAndMarkCourseCompleted(
@@ -441,11 +411,7 @@ const FreeCodeCamp: FC<{}> = () => {
                     moduleParamData.lessons[0].dashedName,
                 )
 
-                navigate(lessonPath, {
-                    state: {
-                        tcaCertInfo: location.state?.tcaCertInfo,
-                    },
-                })
+                localNavigate(lessonPath)
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -454,9 +420,9 @@ const FreeCodeCamp: FC<{}> = () => {
         courseData,
         courseDataReady,
         lessonParam,
+        localNavigate,
         moduleParam,
         providerParam,
-        location.state,
     ])
 
     useEffect(() => {
@@ -512,20 +478,15 @@ const FreeCodeCamp: FC<{}> = () => {
             providerParam,
             certificationParam,
         )
-        navigate(coursePath, {
-            state: {
-                tcaCertInfo: location.state?.tcaCertInfo,
-            },
-        })
+        localNavigate(coursePath)
     }, [
         ready,
         certificateProgress,
         profile,
         providerParam,
         certificationParam,
-        navigate,
+        localNavigate,
         isLoggedIn,
-        location.state,
     ])
 
     /**
@@ -558,7 +519,7 @@ const FreeCodeCamp: FC<{}> = () => {
 
             <LoadingSpinner hide={ready} />
             <div className={styles.wrapBreadcrumb}>
-                <Breadcrumb items={breadcrumb} />
+                <Breadcrumb items={breadcrumbs} />
                 {
                     lesson && profile?.roles?.includes(UserRole.tcaAdmin) && (
                         <Button
diff --git a/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx b/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
index 21f2a117a..998df7a2d 100644
--- a/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx
@@ -8,7 +8,7 @@ import {
     useMemo,
     useState,
 } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { IconOutline, IconSolid } from '../../../../../lib'
@@ -20,6 +20,10 @@ import {
 } from '../..'
 import { StatusIcon } from '../status-icon'
 import { StepIcon } from '../step-icon'
+import {
+    CoursePageContextValue,
+    useCoursePageContext,
+} from '../../../course-page-wrapper'
 
 import styles from './CollapsibleItem.module.scss'
 
@@ -82,7 +86,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
             />
         )
 
-    const location: any = useLocation()
+    const { navState }: CoursePageContextValue = useCoursePageContext()
 
     const renderListItem: (item: CollapsibleListItem) => ReactNode
         = (item: CollapsibleListItem) => {
@@ -105,7 +109,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
                         <Link
                             className={styles['item-wrap']}
                             to={props.path(item)}
-                            state={{ tcaCertInfo: location.state?.tcaCertInfo }}
+                            state={navState}
                         >
                             {label}
                         </Link>
diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx
index 90a9f808e..84a367b58 100644
--- a/src-ts/tools/learn/learn.routes.tsx
+++ b/src-ts/tools/learn/learn.routes.tsx
@@ -13,6 +13,10 @@ const EnrollmentPage: LazyLoadedComponent = lazyLoad(
     () => import('./certification-details/enrollment-page'),
     'EnrollmentPage',
 )
+const CoursePageWrapper: LazyLoadedComponent = lazyLoad(
+    () => import('./course-page-wrapper'),
+    'CoursePageWrapper',
+)
 const CourseDetailsPage: LazyLoadedComponent = lazyLoad(() => import('./course-details'), 'CourseDetailsPage')
 const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import('./course-completed'), 'CourseCompletedPage')
 const MyCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'MyCertificate')
@@ -170,34 +174,41 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
                 route: 'tca-certifications/:certification/enroll',
             },
             {
-                children: [],
-                element: <CourseDetailsPage />,
-                id: 'Course Details',
-                route: ':provider/:certification',
-            },
-            {
-                children: [],
-                element: <CourseCompletedPage />,
-                id: 'Course Completed',
-                route: ':provider/:certification/completed',
-            },
-            {
-                children: [],
-                element: <MyCertificate />,
-                id: 'My Certificate',
-                route: ':provider/:certification/certificate',
-            },
-            {
-                children: [],
-                element: <UserCertificate />,
-                id: 'User Certificate',
-                route: ':provider/:certification/:memberHandle/certificate',
-            },
-            {
-                children: [],
-                element: <FreeCodeCamp />,
-                id: 'FxreeCodeCamp',
-                route: ':provider/:certification/:module/:lesson',
+                children: [
+                    {
+                        children: [],
+                        element: <CourseDetailsPage />,
+                        id: 'Course Details',
+                        route: ':certification',
+                    },
+                    {
+                        children: [],
+                        element: <CourseCompletedPage />,
+                        id: 'Course Completed',
+                        route: ':certification/completed',
+                    },
+                    {
+                        children: [],
+                        element: <MyCertificate />,
+                        id: 'My Certificate',
+                        route: ':certification/certificate',
+                    },
+                    {
+                        children: [],
+                        element: <UserCertificate />,
+                        id: 'User Certificate',
+                        route: ':certification/:memberHandle/certificate',
+                    },
+                    {
+                        children: [],
+                        element: <FreeCodeCamp />,
+                        id: 'FxreeCodeCamp',
+                        route: ':certification/:module/:lesson',
+                    },
+                ],
+                element: <CoursePageWrapper />,
+                id: 'CoursePage',
+                route: ':provider',
             },
             {
                 children: [],