Merge pull request #279 from topcoder-platform/TCA-376_refetch-course-progress

TCA-376 - refetch course progress data when user opens sidebar nav

Author: vas3a

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -62,6 +62,7 @@ const FreeCodeCamp: FC<{}> = () => {
         certificationProgress: certificateProgress,
         setCertificateProgress,
         ready: progressReady,
+        refetch: refetchProgress,
     }: UserCertificationProgressProviderData = useUserCertificationProgress(
         profile?.userId,
         routeParams.provider,
@@ -362,7 +363,10 @@ const FreeCodeCamp: FC<{}> = () => {
             {lesson && (
                 <div className={styles['main-wrap']}>
                     <div className={styles['course-outline-pane']}>
-                        <CollapsiblePane title='Course Outline'>
+                        <CollapsiblePane
+                            title='Course Outline'
+                            onToggle={(isOpen) => isOpen && refetchProgress()}
+                        >
                             <div className={styles['course-outline-wrap']}>
                                 <div className={styles['course-outline-title']}>
                                     {courseData?.title}

src-ts/tools/learn/learn-lib/collapsible-pane/CollapsiblePane.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { noop } from 'lodash'
 import { Dispatch, FC, ReactNode, SetStateAction, useCallback, useState } from 'react'
 
 import { IconSolid } from '../../../../lib'
@@ -7,16 +8,19 @@ import styles from './CollapsiblePane.module.scss'
 
 interface CollapsiblePaneProps {
     children: ReactNode
+    onToggle?: (isOpen: boolean) => void
     position?: 'to-left'|'to-right'
     title: string
 }
 
 const CollapsiblePane: FC<CollapsiblePaneProps> = (props: CollapsiblePaneProps) => {
+    const {onToggle = noop}: CollapsiblePaneProps = props
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const toggle: () => void = useCallback(() => {
-      setIsOpen(open => !open)
-    }, [])
+      setIsOpen(!isOpen)
+      onToggle(!isOpen)
+    }, [isOpen, onToggle])
 
     return (
         <div className={

src-ts/tools/learn/learn-lib/user-certifications-provider/user-certification-progress-provider-data.model.ts

@@ -4,5 +4,6 @@ export interface UserCertificationProgressProviderData {
     certificationProgress?: LearnUserCertificationProgress
     loading: boolean
     ready: boolean
+    refetch: () => void,
     setCertificateProgress: (progess: LearnUserCertificationProgress) => void,
 }

src-ts/tools/learn/learn-lib/user-certifications-provider/user-certification-progress.provider.tsx

@@ -1,49 +1,60 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
 
 import { UserCertificationProgressProviderData } from './user-certification-progress-provider-data.model'
 import { LearnUserCertificationProgress, userCertificationProgressGetAsync } from './user-certifications-functions'
 
 export function useUserCertificationProgress(userId?: number, provider?: string, certification?: string):
     UserCertificationProgressProviderData {
+    const callCounter: MutableRefObject<number> = useRef(0)
 
     function setCertificateProgress(progress: LearnUserCertificationProgress): void {
         setState((prevState) => ({ ...prevState, certificationProgress: progress }))
+        callCounter.current++
     }
 
+    const fetchProgress: () => void = useCallback(() => {
+        if (!userId) {
+            return
+        }
+
+        const currentCallCounter: number = ++callCounter.current
+
+        userCertificationProgressGetAsync(userId, provider, certification)
+            .then((myCertifications) => {
+                // if another call to fetchProgress or to setCertificateProgress
+                // was made before we got the api response
+                // return, and do not update state
+                if (callCounter.current !== currentCallCounter) {
+                    return
+                }
+
+                setState((prevState) => ({
+                    ...prevState,
+                    certificationProgress: myCertifications.find(c => c.certification === certification),
+                    loading: false,
+                    ready: true,
+                }))
+            })
+    }, [certification, provider, userId])
+
     const [state, setState]:
         [UserCertificationProgressProviderData, Dispatch<SetStateAction<UserCertificationProgressProviderData>>]
         = useState<UserCertificationProgressProviderData>({
             certificationProgress: undefined,
             loading: false,
             ready: false,
+            refetch: fetchProgress,
             setCertificateProgress,
         })
 
     useEffect(() => {
-
         setState((prevState) => ({
             ...prevState,
             loading: true,
         }))
 
-        if (!userId) {
-            return
-        }
-
-        userCertificationProgressGetAsync(userId, provider, certification)
-            .then((myCertifications) => {
-                setState((prevState) => ({
-                    ...prevState,
-                    certificationProgress: myCertifications.find(c => c.certification === certification),
-                    loading: false,
-                    ready: true,
-                }))
-            })
-    }, [
-        certification,
-        provider,
-        userId,
-    ])
+        fetchProgress()
+    }, [certification, fetchProgress])
 
     return state
 }