diff --git a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx index a856a0ba4..1af7bc067 100755 --- a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx +++ b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx @@ -1,4 +1,4 @@ -import { FC, useContext, useEffect } from 'react' +import { Dispatch, FC, SetStateAction, useContext, useEffect } from 'react' import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom' import { EnvironmentConfig } from '../../../config' @@ -9,6 +9,7 @@ import { LoadingSpinner, profileContext, ProfileContextData, + surveyTriggerForUser, textFormatGetSafeString, } from '../../../lib' import { @@ -21,11 +22,13 @@ import { useLearnBreadcrumb, UserCertificationProgressProviderData, UserCertificationProgressStatus, + useShowSurvey, } from '../learn-lib' import { getCertificatePath, getCoursePath, LEARN_PATHS, rootRoute } from '../learn.routes' import { ReactComponent as StarsSvg } from './stars.svg' import styles from './CourseCompletedPage.module.scss' +import { LearnConfig } from '../learn-config' const CourseCompletedPage: FC<{}> = () => { @@ -36,6 +39,11 @@ const CourseCompletedPage: FC<{}> = () => { const certificationParam: string = textFormatGetSafeString(routeParams.certification) const coursePath: string = getCoursePath(providerParam, certificationParam) + const [showSurvey, setShowSurvey]: [ + string, + Dispatch> + ] = useShowSurvey() + const { course: courseData, ready: courseDataReady, @@ -87,6 +95,13 @@ const CourseCompletedPage: FC<{}> = () => { ready, ]) + useEffect(() => { + if (ready && showSurvey === certificationParam) { + surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId) + setShowSurvey('') + } + }, [ready, showSurvey, certificationParam]); + return ( <> diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx index 8a889a015..e20942c9b 100644 --- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx +++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx @@ -1,3 +1,4 @@ +import { debounce } from 'lodash' import { Dispatch, FC, @@ -38,6 +39,7 @@ import { UserCertificationProgressStatus, userCertificationProgressUpdateAsync, UserCertificationUpdateProgressActions, + useShowSurvey, } from '../learn-lib' import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes' @@ -45,7 +47,7 @@ import { FccFrame } from './fcc-frame' import { FccSidebar } from './fcc-sidebar' import { TitleNav } from './title-nav' import styles from './FreeCodeCamp.module.scss' -import { debounce } from 'lodash' +import { LearnConfig } from '../learn-config' const FreeCodeCamp: FC<{}> = () => { @@ -66,6 +68,11 @@ const FreeCodeCamp: FC<{}> = () => { const [lessonParam, setLessonParam]: [string, Dispatch>] = useState(textFormatGetSafeString(routeParams.lesson)) + const [showSurvey, setShowSurvey]: [ + string, + Dispatch> + ] = useShowSurvey() + const { certificationProgress: certificateProgress, setCertificateProgress, @@ -212,6 +219,7 @@ const FreeCodeCamp: FC<{}> = () => { profile?.userId, ]) + // eslint-disable-next-line react-hooks/exhaustive-deps const handleFccLessonComplete: (challengeUuid: string) => void = useCallback(debounce((challengeUuid: string) => { const currentLesson: { [key: string]: string } = { @@ -234,7 +242,6 @@ const FreeCodeCamp: FC<{}> = () => { currentLesson, ) .then((progress: LearnUserCertificationProgress) => { - setCertificateProgress(progress) handleSurvey(certWasInProgress, progress) @@ -274,30 +281,16 @@ const FreeCodeCamp: FC<{}> = () => { // This is the last lesson to be completed in the first module completed, // so it's time to trigger the survey - const surveyTrigger: string = 'TCA First Module Completed' - - // If there is only one assessment in a cert (e.g. Data Analysis w/Python), - // the cert is also completed, which redirects the user to the cert page. - // So the survey needs to be delayed so that it appears on the completed - // cert page instead of the current lesson. - - // NOTE: we can't use the cert's status here bc it doesn't get set to - // completed until the UI notices the cert is complete and initiates - // the completion. And we have to use >= instead of === because it's - // possible TCA data isn't in sync w/the latest FCC curriculum. - if (progress.certificationProgressPercentage >= 100) { - setTimeout(async () => { - surveyTriggerForUser(surveyTrigger, profile?.userId) - }, 1000) - } else { - surveyTriggerForUser(surveyTrigger, profile?.userId) - } + // NOTE: We have to add a delay, otherwise the survey closes when the user + // is automatically redirected to the next lesson. + setShowSurvey(certificationParam) } /** * Handle the navigation away from the last step of the course in the FCC frame * @returns */ + // eslint-disable-next-line react-hooks/exhaustive-deps const handleFccLastLessonNavigation: () => void = useCallback(debounce(() => { if (!certificateProgress) { @@ -461,6 +454,17 @@ const FreeCodeCamp: FC<{}> = () => { isLoggedIn, ]) + useEffect(() => { + if (ready && showSurvey === certificationParam) { + surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId) + setShowSurvey('') + } + }, [ + ready, + showSurvey, + certificationParam, + ]); + return ( <> diff --git a/src-ts/tools/learn/learn-config/learn-config.model.ts b/src-ts/tools/learn/learn-config/learn-config.model.ts index 7a68f6a33..dea83ff0a 100644 --- a/src-ts/tools/learn/learn-config/learn-config.model.ts +++ b/src-ts/tools/learn/learn-config/learn-config.model.ts @@ -7,4 +7,7 @@ export interface LearnConfigModel { value: string, } CLIENT: string + SURVEY: { + COMPLETED_FIRST_MODULE: string + } } diff --git a/src-ts/tools/learn/learn-config/learn.default.config.ts b/src-ts/tools/learn/learn-config/learn.default.config.ts index 066ada8dc..dca4e129f 100644 --- a/src-ts/tools/learn/learn-config/learn.default.config.ts +++ b/src-ts/tools/learn/learn-config/learn.default.config.ts @@ -11,4 +11,7 @@ export const LearnConfigDefault: LearnConfigModel = { value: 'certificate-container', }, CLIENT: 'https://fcc.topcoder-dev.com:4431', + SURVEY: { + COMPLETED_FIRST_MODULE: 'TCA First Module Completed', + } } diff --git a/src-ts/tools/learn/learn-lib/index.ts b/src-ts/tools/learn/learn-lib/index.ts index 6a21a12f8..ad81bf8ee 100755 --- a/src-ts/tools/learn/learn-lib/index.ts +++ b/src-ts/tools/learn/learn-lib/index.ts @@ -7,5 +7,6 @@ export * from './data-providers' export * from './learn-breadcrumb-provider' export * from './learn-swr' export * from './my-course-card' +export * from './survey' export * from './svgs' export * from './wave-hero' diff --git a/src-ts/tools/learn/learn-lib/survey/index.ts b/src-ts/tools/learn/learn-lib/survey/index.ts new file mode 100644 index 000000000..d852e9fcd --- /dev/null +++ b/src-ts/tools/learn/learn-lib/survey/index.ts @@ -0,0 +1 @@ +export * from './use-show-survey' diff --git a/src-ts/tools/learn/learn-lib/survey/use-show-survey.ts b/src-ts/tools/learn/learn-lib/survey/use-show-survey.ts new file mode 100644 index 000000000..e72a410de --- /dev/null +++ b/src-ts/tools/learn/learn-lib/survey/use-show-survey.ts @@ -0,0 +1,9 @@ +import { Dispatch, SetStateAction } from "react" +import { useLocalStorage } from "../../../../lib" + +export const useShowSurvey = (): [ + string, + Dispatch> +] => { + return useLocalStorage('tca-show-survey', ''); +}