Merge pull request #194 from topcoder-platform/PROD-2534_force-login-on-course-start

PROD-2534 - Force Users to Log In Upon Start of Lesson

Author: brooketopcoder

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

@@ -1,4 +1,4 @@
-import { FC, useContext, useMemo } from 'react'
+import { FC, ReactNode, useContext, useMemo } from 'react'
 import { Params, useParams } from 'react-router-dom'
 
 import {
@@ -14,8 +14,11 @@ import {
     CoursesProviderData,
     CourseTitle,
     MyCertificationProgressProviderData,
+    MyCertificationProgressStatus,
+    ResourceProviderData,
     useCoursesProvider,
-    useMyCertificationProgress
+    useMyCertificationProgress,
+    useResourceProvider
 } from '../learn-lib'
 
 import { CourseCurriculum } from './course-curriculum'
@@ -25,20 +28,78 @@ import { PromoCourse } from './promo-course'
 const CourseDetailsPage: FC<{}> = () => {
 
     const routeParams: Params<string> = useParams()
-    const { profile }: ProfileContextData = useContext(profileContext)
+    const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
+
+    const {
+        provider: resourceProvider,
+    }: ResourceProviderData = useResourceProvider(routeParams.provider)
 
     const {
         course,
-        ready,
+        ready: courseReady,
     }: CoursesProviderData = useCoursesProvider(routeParams.provider ?? '', routeParams.certification)
 
-    const { certificateProgress: progress }: MyCertificationProgressProviderData = useMyCertificationProgress(profile?.userId, routeParams.provider, routeParams.certification)
+    const {
+        certificateProgress: progress,
+        ready: progressReady,
+    }: MyCertificationProgressProviderData = useMyCertificationProgress(
+        profile?.userId,
+        routeParams.provider,
+        routeParams.certification,
+    )
 
+    const ready: boolean = profileReady && courseReady && (!profile || progressReady)
     const breadcrumb: Array<BreadcrumbItemModel> = useMemo(() => [
         { url: '/learn', name: 'Topcoder Academy' },
         { url: `/learn/${routeParams.provider}/${routeParams.certification}`, name: course?.title ?? '' },
     ], [routeParams, course])
 
+    function getDescription(): ReactNode {
+        if (!course) {
+            return
+        }
+
+        return progress?.status === MyCertificationProgressStatus.completed ? (
+            <>
+                <h3 className='details'>Suggested next steps</h3>
+
+                <div className={styles['text']}>
+                    <p>
+                        Now that you have completed the {course.title},
+                        we'd recommend you enroll in another course to continue your learning.
+                        You can view our other courses from the Topcoder Academy course page.
+                    </p>
+                </div>
+            </>
+        ) : (
+            course.keyPoints && (
+                <>
+                    <h3 className='details'>Why should you complete this course?</h3>
+
+                    <div
+                        className={styles['text']}
+                        dangerouslySetInnerHTML={{ __html: (course.keyPoints ?? []).join('<br /><br />') }}
+                    ></div>
+                </>
+            )
+        )
+    }
+
+    function getFooter(): ReactNode {
+        if (!resourceProvider) {
+            return
+        }
+
+        return (
+            <div className={styles['credits-link']}>
+                <a href={`//${resourceProvider.url}`} target='_blank' referrerPolicy='no-referrer' rel='noreferrer'>
+                    This course was created by the {resourceProvider.url} community.
+                    <IconOutline.ExternalLinkIcon />
+                </a>
+            </div>
+        )
+    }
+
     return (
         <ContentLayout>
             {!ready && (
@@ -51,7 +112,7 @@ const CourseDetailsPage: FC<{}> = () => {
                 <>
                     <div className={styles['wrap']}>
                         <div className={styles['intro-copy']}>
-                            <CourseTitle size='lg' title={course.title} credits={course?.provider} type='webdev' />
+                            <CourseTitle size='lg' title={course.title} credits={course.provider} type='webdev' />
 
                             <div
                                 className={styles['text']}
@@ -60,30 +121,7 @@ const CourseDetailsPage: FC<{}> = () => {
                         </div>
 
                         <div className={styles['description']}>
-                            {progress?.status === 'completed' ? (
-                                <>
-                                    <h3 className='details'>Suggested next steps</h3>
-
-                                    <div className={styles['text']}>
-                                        <p>
-                                            Now that you have completed the {course.title},
-                                            we'd recommend you enroll in another course to continue your learning.
-                                            You can view our other courses from the Topcoder Academy course page.
-                                        </p>
-                                    </div>
-                                </>
-                            ) : (
-                                course.keyPoints && (
-                                    <>
-                                        <h3 className='details'>Why should you complete this course?</h3>
-
-                                        <div
-                                            className={styles['text']}
-                                            dangerouslySetInnerHTML={{ __html: (course.keyPoints ?? []).join('<br /><br />') }}
-                                        ></div>
-                                    </>
-                                )
-                            )}
+                            {getDescription()}
                             <div className={styles['coming-soon']}>
                                 <PromoCourse />
                             </div>
@@ -93,18 +131,12 @@ const CourseDetailsPage: FC<{}> = () => {
                             <CourseCurriculum
                                 course={course}
                                 progress={progress}
-                                profileUserId={profile?.userId}
+                                progressReady={progressReady}
+                                profile={profile}
                             />
                         </div>
                     </div>
-                    {course?.provider === 'freeCodeCamp' && (
-                        <div className={styles['credits-link']}>
-                            <a href='https://freecodecamp.org/' target='_blank' referrerPolicy='no-referrer' rel='noreferrer'>
-                                This course was created by the freeCodeCamp.org community.
-                                <IconOutline.ExternalLinkIcon />
-                            </a>
-                        </div>
-                    )}
+                    {getFooter()}
                 </>
             )}
         </ContentLayout>

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

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
-import { Dispatch, FC, SetStateAction, useCallback, useState } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
+import { NavigateFunction, useNavigate, useSearchParams } from 'react-router-dom'
 
-import { Button } from '../../../../lib'
+import { Button, UserProfile } from '../../../../lib'
 import {
     CourseOutline,
     LearnCourse,
@@ -15,20 +15,24 @@ import {
     UpdateMyCertificateProgressActions,
     updateMyCertificationsProgressAsync
 } from '../../learn-lib'
-import { getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
+import { authenticateAndStartCourseRoute, getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
 
 import styles from './CourseCurriculum.module.scss'
 import { CurriculumSummary } from './curriculum-summary'
 import { TcAcademyPolicyModal } from './tc-academy-policy-modal'
 
 interface CourseCurriculumProps {
     course: LearnCourse
-    profileUserId?: number
+    profile?: UserProfile
     progress?: LearnMyCertificationProgress
+    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)
 
@@ -57,32 +61,44 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
     }, [props.course, props.progress, navigate])
 
     /**
-     * Check if user accepted policy when user clicks start course
-     * If not, show the policy modal
-     * otherwise resume(or start) the course
+     * Handle user click on start course/resume/login button
      */
     const handleStartCourseClick: () => void = useCallback(() => {
-      if (props.progress?.academicHonestyPolicyAcceptedAt) {
-        handleStartCourse()
-        return
-      }
+        // if user is not logged in, redirect to login page
+        if (!isLoggedIn) {
+            // add a flag to the return url to show the academic policy modal
+            // or resume the course when they're back
+            window.location.href = authenticateAndStartCourseRoute
+            return
+        }
 
-      setIsTcAcademyPolicyModal(true)
-    }, [handleStartCourse, props.progress?.academicHonestyPolicyAcceptedAt])
+        // Check if user accepted policy and resume(or start) the course
+        if (props.progress?.academicHonestyPolicyAcceptedAt) {
+            handleStartCourse()
+            return
+        }
+
+        // show the academic policy modal before starting a new course
+        setIsTcAcademyPolicyModal(true)
+    }, [
+        handleStartCourse,
+        isLoggedIn,
+        props.progress?.academicHonestyPolicyAcceptedAt,
+    ])
 
     /**
      * When user clicks accept inside the policy modal,
      * if there's no progress on the course yet, create the progress (this will also mark policy as accepted)
      * otherwise send a PUT request to expressly accept the policy
      */
     const handlePolicyAccept: () => void = useCallback(async () => {
-        if (!props.profileUserId) {
+        if (!props.profile) {
             return
         }
 
         if (!props.progress?.id) {
             await startMyCertificationsProgressAsync(
-                props.profileUserId,
+                props.profile.userId,
                 props.course.certificationId,
                 props.course.id,
                 {
@@ -104,10 +120,20 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
         props.course.certificationId,
         props.course.id,
         props.course.modules,
-        props.profileUserId,
-        props.progress,
+        props.profile,
+        props.progress?.id,
     ])
 
+    /**
+     * If the url has a "start-course" search param,
+     * proceed as if the user just clicked "Start course" button
+     */
+    useEffect(() => {
+      if (props.progressReady && isLoggedIn && searchParams.get('start-course') !== null) {
+        handleStartCourseClick()
+      }
+    }, [handleStartCourseClick, isLoggedIn, props.progressReady, searchParams])
+
     return (
         <>
             <div className={styles['wrap']}>
@@ -128,6 +154,7 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
                     completedPercentage={completedPercentage}
                     completed={isCompleted}
                     completedDate={props.progress?.completedDate}
+                    isLoggedIn={isLoggedIn}
                 />
 
                 <div className={styles['course-outline']}>

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

@@ -11,6 +11,7 @@ interface CurriculumSummaryProps {
     completedPercentage?: number
     course: LearnCourse
     inProgress?: boolean
+    isLoggedIn: boolean
     onClickCertificateBtn?: () => void
     onClickMainBtn: () => void
 }
@@ -20,6 +21,12 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
     const inProgress: boolean|undefined = props.inProgress
     const completed: boolean|undefined = props.completed
 
+    const mainBtnLabel: string = !props.isLoggedIn ? 'Log in' : (
+        completed ? 'Review' : (
+            inProgress ? 'Resume' : 'Start Course'
+        )
+    )
+
     const title: ReactNode = useMemo(() => {
         if (!completed || !props.completedDate) {
             return 'In Progress'
@@ -62,7 +69,7 @@ const CurriculumSummary: FC<CurriculumSummaryProps> = (props: CurriculumSummaryP
                     <Button
                         buttonStyle={completed ? 'secondary' : 'primary'}
                         size='md'
-                        label={completed ? 'Review' : (inProgress ? 'Resume' : 'Start Course')}
+                        label={mainBtnLabel}
                         onClick={props.onClickMainBtn}
                     />
                 </div>

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

@@ -31,7 +31,11 @@ import styles from './FreeCodeCamp.module.scss'
 import { TitleNav } from './title-nav'
 
 const FreeCodeCamp: FC<{}> = () => {
-    const { profile }: ProfileContextData = useContext(profileContext)
+    const {
+        profile,
+        initialized: profileReady,
+    }: ProfileContextData = useContext(profileContext)
+    const isLoggedIn: boolean = !!profile
 
     const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
@@ -59,7 +63,7 @@ const FreeCodeCamp: FC<{}> = () => {
         lessonParam,
     )
 
-    const ready: boolean = courseDataReady && lessonReady && progressReady
+    const ready: boolean = profileReady && courseDataReady && lessonReady && (!isLoggedIn || progressReady)
 
     const breadcrumb: Array<BreadcrumbItemModel> = useMemo(() => [
         { url: '/learn', name: 'Topcoder Academy' },
@@ -200,14 +204,21 @@ const FreeCodeCamp: FC<{}> = () => {
      * if not, redirect user to course details page to accept the policy
      */
     useLayoutEffect(() => {
-        if (ready && !certificateProgress?.academicHonestyPolicyAcceptedAt) {
+        if (ready && !(isLoggedIn && certificateProgress?.academicHonestyPolicyAcceptedAt)) {
             const coursePath: string = getCoursePath(
                 providerParam,
                 certificationParam
             )
             navigate(coursePath)
         }
-    }, [ready, certificateProgress, providerParam, certificationParam, navigate])
+    }, [
+        ready,
+        certificateProgress,
+        providerParam,
+        certificationParam,
+        navigate,
+        isLoggedIn,
+    ])
 
     return (
         <>

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

@@ -1,4 +1,5 @@
 export * from './certifications-provider'
+export * from './resource-provider-provider'
 export * from './collapsible-pane'
 export * from './courses-provider'
 export * from './curriculum-summary'

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

@@ -0,0 +1,3 @@
+export * from './resource-provider-functions'
+export * from './resource-provider-data.model'
+export * from './resource-provider.provider'

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-data.model.ts

@@ -0,0 +1,7 @@
+import { ResourceProvider } from './resource-provider-functions'
+
+export interface ResourceProviderData {
+    loading: boolean
+    provider?: ResourceProvider
+    ready: boolean
+}

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-functions/index.ts

@@ -0,0 +1,2 @@
+export * from './resource-provider.model'
+export * from './resource-provider.store'

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-functions/resource-provider.model.ts

@@ -0,0 +1,6 @@
+export interface ResourceProvider {
+    attributionStatement: string
+    id: string
+    name: string
+    url: string
+}