From a3be4d020caaf394b4a235898df8bfa7de26c719 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 9 Dec 2022 23:03:25 +0200 Subject: [PATCH 1/3] 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 2/3] 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 3/3] 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', ''); +}