TCA-755 #comment This commit adds the basic sprig html snippet and fixes some lint issues. #time 1h

brooketopcoder · brooketopcoder · commit 0bcf276e8914 · 2022-12-06T11:43:13.000-08:00
diff --git a/public/index.html b/public/index.html
@@ -2,24 +2,26 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description"
-    content="Topcoder is home to the world’s largest community of designers, developers, and data scientists. Allowing you the freedom to start and execute faster." />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />
-  <link rel="stylesheet" href="%PUBLIC_URL%/global.css">
-  <!--
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description"
+        content="Topcoder is home to the world’s largest community of designers, developers, and data scientists. Allowing you the freedom to start and execute faster." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/global.css">
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -28,13 +30,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Topcoder Top Technology Talent On-Demand</title>
+    <title>Topcoder Top Technology Talent On-Demand</title>
 </head>
 
 <body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root" data-id="root"></div>
-  <!--
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" data-id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -44,6 +46,19 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <script>
+        (function (l, e, a, p) {
+            if (window.Sprig) return;
+            window.Sprig = function () { S._queue.push(arguments) }
+            var S = window.Sprig; S.appId = a; S._queue = []; window.UserLeap = S;
+            a = l.createElement('script');
+            a.async = 1; a.src = e + '?id=' + S.appId;
+            p = l.getElementsByTagName('script')[0];
+            p.parentNode.insertBefore(a, p);
+        })(document, 'https://cdn.sprig.com/shim.js', 'bUcousVQ0-yF');
+    </script>
+
 </body>
 
 </html>
diff --git a/src-ts/App.tsx b/src-ts/App.tsx
@@ -7,7 +7,7 @@ import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
-    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
@@ -19,9 +19,9 @@ const App: FC<{}> = () => {
 
     useEffect(() => {
         if (ready) {
-            document.getElementById('root')?.classList.add('app-ready');
+            document.getElementById('root')?.classList.add('app-ready')
         }
-    }, [ready]);
+    }, [ready])
 
     return (
         <>
diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
@@ -17,12 +17,15 @@ import {
     LoadingSpinner,
     profileContext,
     ProfileContextData,
+    textFormatGetSafeString,
 } from '../../../lib'
 import {
     CoursesProviderData,
     LearnLesson,
     LearnModule,
     LearnModuleProgress,
+    LearnModuleStatus,
+    LearnUserCertificationProgress,
     LessonProviderData,
     useGetCourses,
     useGetLesson,
@@ -52,11 +55,14 @@ const FreeCodeCamp: FC<{}> = () => {
 
     const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
-    const providerParam: string = routeParams.provider ?? ''
+    const providerParam: string = textFormatGetSafeString(routeParams.provider)
 
-    const [certificationParam, setCourseParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.certification ?? '')
-    const [moduleParam, setModuleParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.module ?? '')
-    const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.lesson ?? '')
+    const [certificationParam, setCourseParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.certification))
+    const [moduleParam, setModuleParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.module))
+    const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.lesson))
 
     const {
         certificationProgress: certificateProgress,
@@ -83,11 +89,11 @@ const FreeCodeCamp: FC<{}> = () => {
 
     const ready: boolean = profileReady && courseDataReady && lessonReady && (!isLoggedIn || progressReady)
 
-    const certification: string = lesson?.course.certification ?? ''
-    const module: string = lesson?.module.title ?? ''
+    const certification: string = textFormatGetSafeString(lesson?.course.certification)
+    const module: string = textFormatGetSafeString(lesson?.module.title)
     const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb([
         {
-            name: lesson?.course.title ?? '',
+            name: textFormatGetSafeString(lesson?.course.title),
             url: getCoursePath(providerParam, certification),
         },
         {
@@ -96,7 +102,8 @@ const FreeCodeCamp: FC<{}> = () => {
         },
     ])
 
-    const currentModuleData: LearnModule | undefined = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
+    const currentModuleData: LearnModule | undefined
+        = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
 
     const currentStepIndex: number = useMemo(() => {
         if (!currentModuleData) {
@@ -155,7 +162,7 @@ const FreeCodeCamp: FC<{}> = () => {
         }
     }
 
-    function handleFccLessonReady(lessonPath: string): void {
+    const handleFccLessonReady: (lessonPath: string) => void = useCallback((lessonPath: string) => {
 
         const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '')
             .split('/')
@@ -195,9 +202,10 @@ const FreeCodeCamp: FC<{}> = () => {
                     .then(setCertificateProgress)
             }, 500)
         }
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
-    function handleFccLessonComplete(challengeUuid: string): void {
+    const handleFccLessonComplete: (challengeUuid: string) => void = useCallback((challengeUuid: string) => {
         const currentLesson: { [key: string]: string } = {
             lesson: lessonParam,
             module: moduleParam,
@@ -209,15 +217,29 @@ const FreeCodeCamp: FC<{}> = () => {
                 UserCertificationUpdateProgressActions.completeLesson,
                 currentLesson,
             )
-                .then(setCertificateProgress)
+                .then((progress: LearnUserCertificationProgress) => {
+
+                    setCertificateProgress(progress)
+
+                    // if this is the last lesson of the first module, show the survey
+                    const firstModule: LearnModuleProgress = progress.modules[0]
+
+                    if (moduleParam === firstModule.module
+                        && firstModule.moduleStatus === LearnModuleStatus.completed) {
+
+                        // TODO: use the Sprig SDK to send the event w/the user
+                        window.Sprig('track', 'TCA First Module Completed')
+                    }
+                })
         }
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
     /**
      * Handle the navigation away from the last step of the course in the FCC frame
      * @returns
      */
-    function handleFccLastLessonNavigation(): void {
+    const handleFccLastLessonNavigation: () => void = useCallback(() => {
         if (!certificateProgress) {
             return
         }
@@ -236,15 +258,18 @@ const FreeCodeCamp: FC<{}> = () => {
         // course is not completed yet,
         // so we find the first incomplete lesson
         // and redirect user to it for a continuous flow
-        const firstIncompleteModule: LearnModuleProgress | undefined = certificateProgress.modules.find(m => m.completedPercentage !== 100)
-        const moduleLessons: Array<LearnLesson> | undefined = courseData?.modules.find(m => m.key === firstIncompleteModule?.module)?.lessons
+        const firstIncompleteModule: LearnModuleProgress | undefined
+            = certificateProgress.modules.find(m => m.completedPercentage !== 100)
+        const moduleLessons: Array<LearnLesson> | undefined
+            = courseData?.modules.find(m => m.key === firstIncompleteModule?.module)?.lessons
         if (!firstIncompleteModule || !moduleLessons) {
             // case unknown, return
             return
         }
 
         const completedLessons: Array<string> = firstIncompleteModule.completedLessons.map(l => l.dashedName)
-        const firstIncompleteLesson: LearnLesson | undefined = moduleLessons.find(l => !completedLessons.includes(l.dashedName))
+        const firstIncompleteLesson: LearnLesson | undefined
+            = moduleLessons.find(l => !completedLessons.includes(l.dashedName))
         if (!firstIncompleteLesson) {
             // case unknown, return
             return
@@ -258,7 +283,8 @@ const FreeCodeCamp: FC<{}> = () => {
         )
 
         navigate(nextLessonPath)
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
 
     useEffect(() => {
 
@@ -300,7 +326,8 @@ const FreeCodeCamp: FC<{}> = () => {
 
     useEffect(() => {
         if (courseDataReady && courseData) {
-            const moduleParamData: LearnModule = courseData.modules.find(m => m.key === moduleParam) ?? courseData.modules[0]
+            const moduleParamData: LearnModule = courseData.modules.find(m => m.key === moduleParam)
+                ?? courseData.modules[0]
             const lessonParamExists: boolean = !!moduleParamData?.lessons.find(l => l.dashedName === lessonParam)
 
             if (!lessonParamExists) {
