TCA-790 - use localstorage flag for showing survey

Author: vas3a

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<SetStateAction<string>>
+    ] = useLocalStorage<string>('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 (
         <>
             <LoadingSpinner hide={ready} />

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<SetStateAction<string>>]
         = useState(textFormatGetSafeString(routeParams.lesson))
 
+    const [showSurvey, setShowSurvey]: [
+        string,
+        Dispatch<SetStateAction<string>>
+    ] = useLocalStorage<string>('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 (
         <>
             <LoadingSpinner hide={ready} />