From df67f69d332868194eb37c3e6527f36793987aec Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 9 Dec 2022 10:13:37 -0800 Subject: [PATCH 1/4] TCA-790 Delay all calls to the survey so they don't close when the user goes to the next lesson. #time 30m --- .../learn/free-code-camp/FreeCodeCamp.tsx | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx index 8a889a015..8f97f541f 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, @@ -45,7 +46,6 @@ 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' const FreeCodeCamp: FC<{}> = () => { @@ -212,6 +212,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 } = { @@ -274,30 +275,18 @@ 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. + setTimeout(async () => { + surveyTriggerForUser('TCA First Module Completed', profile?.userId) + }, 1000) } /** * 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) { From a3be4d020caaf394b4a235898df8bfa7de26c719 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 9 Dec 2022 23:03:25 +0200 Subject: [PATCH 2/4] TCA-790 - use localstorage flag for showing survey --- .../course-completed/CourseCompletedPage.tsx | 16 +++++++++++++- .../learn/free-code-camp/FreeCodeCamp.tsx | 21 +++++++++++++++---- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx index a856a0ba4..279178e6a 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,7 +9,9 @@ import { LoadingSpinner, profileContext, ProfileContextData, + surveyTriggerForUser, textFormatGetSafeString, + useLocalStorage, } from '../../../lib' import { AllCertificationsProviderData, @@ -36,6 +38,11 @@ const CourseCompletedPage: FC<{}> = () => { const certificationParam: string = textFormatGetSafeString(routeParams.certification) const coursePath: string = getCoursePath(providerParam, certificationParam) + const [showSurvey, setShowSurvey]: [ + string, + Dispatch> + ] = useLocalStorage('tca-show-survey', '') + const { course: courseData, ready: courseDataReady, @@ -87,6 +94,13 @@ const CourseCompletedPage: FC<{}> = () => { ready, ]) + useEffect(() => { + if (ready && showSurvey === certificationParam) { + surveyTriggerForUser('TCA First Module Completed', 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 8f97f541f..665ab7bcf 100644 --- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx +++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx @@ -20,6 +20,7 @@ import { ProfileContextData, surveyTriggerForUser, textFormatGetSafeString, + useLocalStorage, } from '../../../lib' import { CoursesProviderData, @@ -66,6 +67,11 @@ const FreeCodeCamp: FC<{}> = () => { const [lessonParam, setLessonParam]: [string, Dispatch>] = useState(textFormatGetSafeString(routeParams.lesson)) + const [showSurvey, setShowSurvey]: [ + string, + Dispatch> + ] = useLocalStorage('tca-show-survey', '') + const { certificationProgress: certificateProgress, setCertificateProgress, @@ -235,7 +241,6 @@ const FreeCodeCamp: FC<{}> = () => { currentLesson, ) .then((progress: LearnUserCertificationProgress) => { - setCertificateProgress(progress) handleSurvey(certWasInProgress, progress) @@ -277,9 +282,7 @@ const FreeCodeCamp: FC<{}> = () => { // so it's time to trigger the survey // NOTE: We have to add a delay, otherwise the survey closes when the user // is automatically redirected to the next lesson. - setTimeout(async () => { - surveyTriggerForUser('TCA First Module Completed', profile?.userId) - }, 1000) + setShowSurvey(certificationParam) } /** @@ -450,6 +453,16 @@ const FreeCodeCamp: FC<{}> = () => { isLoggedIn, ]) + useEffect(() => { + if (ready && showSurvey === certificationParam) { + surveyTriggerForUser('TCA First Module Completed', profile?.userId) + setShowSurvey('') + } + }, [ + showSurvey, + certificationParam, + ]); + return ( <> From caf8e3b0c3aa1184350d406d451a3ec595296e3c Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 9 Dec 2022 23:06:27 +0200 Subject: [PATCH 3/4] add missing hook deps --- src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx index 665ab7bcf..f360f690a 100644 --- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx +++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx @@ -459,6 +459,7 @@ const FreeCodeCamp: FC<{}> = () => { setShowSurvey('') } }, [ + ready, showSurvey, certificationParam, ]); From 970815c8e1fe571066fa1d2950351c1557c35b80 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 12 Dec 2022 16:06:09 +0200 Subject: [PATCH 4/4] Move name of survey in learn-config, move storage hook in learn-lib --- .../tools/learn/course-completed/CourseCompletedPage.tsx | 7 ++++--- src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx | 7 ++++--- src-ts/tools/learn/learn-config/learn-config.model.ts | 3 +++ src-ts/tools/learn/learn-config/learn.default.config.ts | 3 +++ src-ts/tools/learn/learn-lib/index.ts | 1 + src-ts/tools/learn/learn-lib/survey/index.ts | 1 + src-ts/tools/learn/learn-lib/survey/use-show-survey.ts | 9 +++++++++ 7 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 src-ts/tools/learn/learn-lib/survey/index.ts create mode 100644 src-ts/tools/learn/learn-lib/survey/use-show-survey.ts diff --git a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx index 279178e6a..1af7bc067 100755 --- a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx +++ b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx @@ -11,7 +11,6 @@ import { ProfileContextData, surveyTriggerForUser, textFormatGetSafeString, - useLocalStorage, } from '../../../lib' import { AllCertificationsProviderData, @@ -23,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<{}> = () => { @@ -41,7 +42,7 @@ const CourseCompletedPage: FC<{}> = () => { const [showSurvey, setShowSurvey]: [ string, Dispatch> - ] = useLocalStorage('tca-show-survey', '') + ] = useShowSurvey() const { course: courseData, @@ -96,7 +97,7 @@ const CourseCompletedPage: FC<{}> = () => { useEffect(() => { if (ready && showSurvey === certificationParam) { - surveyTriggerForUser('TCA First Module Completed', profile?.userId) + surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId) setShowSurvey('') } }, [ready, showSurvey, certificationParam]); diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx index f360f690a..e20942c9b 100644 --- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx +++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx @@ -20,7 +20,6 @@ import { ProfileContextData, surveyTriggerForUser, textFormatGetSafeString, - useLocalStorage, } from '../../../lib' import { CoursesProviderData, @@ -40,6 +39,7 @@ import { UserCertificationProgressStatus, userCertificationProgressUpdateAsync, UserCertificationUpdateProgressActions, + useShowSurvey, } from '../learn-lib' import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes' @@ -47,6 +47,7 @@ import { FccFrame } from './fcc-frame' import { FccSidebar } from './fcc-sidebar' import { TitleNav } from './title-nav' import styles from './FreeCodeCamp.module.scss' +import { LearnConfig } from '../learn-config' const FreeCodeCamp: FC<{}> = () => { @@ -70,7 +71,7 @@ const FreeCodeCamp: FC<{}> = () => { const [showSurvey, setShowSurvey]: [ string, Dispatch> - ] = useLocalStorage('tca-show-survey', '') + ] = useShowSurvey() const { certificationProgress: certificateProgress, @@ -455,7 +456,7 @@ const FreeCodeCamp: FC<{}> = () => { useEffect(() => { if (ready && showSurvey === certificationParam) { - surveyTriggerForUser('TCA First Module Completed', profile?.userId) + surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId) setShowSurvey('') } }, [ 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', ''); +}