From 9f86f33c95559d1c0d2fef8a58584283e1d2c273 Mon Sep 17 00:00:00 2001
From: Joel <joel.nhn@gmail.com>
Date: Sun, 2 May 2021 19:30:20 +0300
Subject: [PATCH] progress update works

---
 .../src/CourseStatusProvider/index.tsx        | 61 ++++++-------------
 1 file changed, 18 insertions(+), 43 deletions(-)

diff --git a/packages/moocfi-quizzes/src/CourseStatusProvider/index.tsx b/packages/moocfi-quizzes/src/CourseStatusProvider/index.tsx
index 7b4c14c9..a16ae8a2 100644
--- a/packages/moocfi-quizzes/src/CourseStatusProvider/index.tsx
+++ b/packages/moocfi-quizzes/src/CourseStatusProvider/index.tsx
@@ -1,5 +1,4 @@
-import * as React from "react"
-import { useEffect, useRef, useState } from "react"
+import React, { useContext, useEffect, useRef, useState } from "react"
 import {
   CourseProgressProviderInterface,
   ProgressData,
@@ -9,9 +8,8 @@ import {
   ProgressResponse,
   ExerciseCompletionsBySection,
   CourseResponse,
-  CourseProgressProvider,
-  useCourseProgressState,
 } from "../contexes/courseProgressProviderContext"
+import { CourseProgressProviderContext } from "../contexes/courseProgressProviderContext"
 import { PointsByGroup } from "../modelTypes"
 import { languageOptions } from "../utils/languages"
 import { ToastContainer, toast, TypeOptions } from "react-toastify"
@@ -69,7 +67,6 @@ export const CourseStatusProvider: React.FunctionComponent<CourseStatusProviderP
   const fetchProgressData = async () => {
     try {
       const progressData = await getUserCourseData(courseId, accessToken)
-
       const data = transformData(progressData.currentUser, progressData.course)
       setData(data)
       setLoading(false)
@@ -85,6 +82,12 @@ export const CourseStatusProvider: React.FunctionComponent<CourseStatusProviderP
     }
   }
 
+  const progress: CourseProgressProviderInterface = {
+    error,
+    loading,
+    courseProgressData: data,
+  }
+
   const logout = () => {
     setLoading(true)
     setError(false)
@@ -107,21 +110,15 @@ export const CourseStatusProvider: React.FunctionComponent<CourseStatusProviderP
     setUpdateQuiz({ ...updateQuiz, [id]: false })
   }
 
-  const progress: CourseProgressProviderInterface = {
-    error,
-    loading,
-    courseProgressData: data,
-    courseId,
-    accessToken,
-  }
-
   const status: CourseStatusProviderInterface = {
     updateQuiz,
     quizUpdated,
   }
 
   return (
-    <CourseProgressProvider courseProgress={progress}>
+    <CourseProgressProviderContext.Provider
+      value={{ progress, fetchProgressData }}
+    >
       <CourseStatusProviderContext.Provider value={status}>
         <ToastContainer
           enableMultiContainer
@@ -140,7 +137,7 @@ export const CourseStatusProvider: React.FunctionComponent<CourseStatusProviderP
         />
         {children}
       </CourseStatusProviderContext.Provider>
-    </CourseProgressProvider>
+    </CourseProgressProviderContext.Provider>
   )
 }
 
@@ -150,34 +147,18 @@ export const injectCourseProgress = <P extends CourseProgressProviderInterface>(
   props: P,
 ) => {
   // initial course progress
-  const { state } = useCourseProgressState()
-  // course progress with updates
-  const { courseId, accessToken, ...rest } = state
-  const [injectProps, setInjectProps] = useState(rest)
+  const { progress: injectProps, fetchProgressData } = useContext(
+    CourseProgressProviderContext,
+  )
 
   // Ref for the wrapped element
   const ref: any = useRef<HTMLElement>()
   const rootMargin = "0px"
-  const outOfViewThreshold = 10
-
-  const refetchData = async () => {
-    if (courseId && accessToken) {
-      // fetch data
-      setInjectProps({ ...injectProps, loading: true })
-      const progressData = await getUserCourseData(courseId, accessToken)
-      const data = transformData(progressData.currentUser, progressData.course)
-      setInjectProps({
-        ...injectProps,
-        courseProgressData: data,
-        loading: false,
-      })
-    }
-  }
+  const outOfViewThreshold = 4
 
   /**
    * Triggers a refetch of progress after given time interval
    *  */
-
   useEffect(() => {
     const observer = new IntersectionObserver(
       async ([entry]) => {
@@ -193,7 +174,7 @@ export const injectCourseProgress = <P extends CourseProgressProviderInterface>(
               1000
 
             if (secondsOutOfView >= outOfViewThreshold) {
-              await refetchData()
+              await fetchProgressData()
             }
 
             // reset off view counter
@@ -220,13 +201,7 @@ export const injectCourseProgress = <P extends CourseProgressProviderInterface>(
     }
   }, [])
 
-  const isLoggedInAndLoading = accessToken && state.loading
-
-  return (
-    <div ref={ref}>
-      {!isLoggedInAndLoading && <Component {...props} {...injectProps} />}
-    </div>
-  )
+  return <div ref={ref}>{<Component {...props} {...injectProps} />}</div>
 }
 
 const transformData = (