From 9e12e4bc3e1d44834f6887b927f0d2f325e3726c Mon Sep 17 00:00:00 2001
From: DimitriB01 <d.bigler1996@gmx.de>
Date: Fri, 30 Aug 2024 14:19:20 +0200
Subject: [PATCH] LearningPathTopic has ignoreCache variable. Other components
 can set ignoreCache to trigger a fetch

---
 .../LearningPathTopicProgress.hooks.tsx              |  7 +++++--
 src/pages/Course/Course.tsx                          |  4 +++-
 src/store/Slices/LearningPathTopicSlice.ts           | 12 +++++++++---
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/common/hooks/LearningPathTopicProgress/LearningPathTopicProgress.hooks.tsx b/src/common/hooks/LearningPathTopicProgress/LearningPathTopicProgress.hooks.tsx
index 2b4a29619..94c29325d 100644
--- a/src/common/hooks/LearningPathTopicProgress/LearningPathTopicProgress.hooks.tsx
+++ b/src/common/hooks/LearningPathTopicProgress/LearningPathTopicProgress.hooks.tsx
@@ -1,5 +1,5 @@
 import log from 'loglevel'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { LearningPathElementStatus, LearningPathLearningElement, Topic, User } from '@core'
@@ -49,6 +49,9 @@ export const useLearningPathTopicProgress = (
   const getLearningPathElementStatus = usePersistedStore((state) => state.getLearningPathElementStatus)
   const getLearningPathTopic = useStore((state) => state.getLearningPathTopic)
 
+  // Trigger Reload of Fetches
+  const ignoreLearningPathTopicCache = useStore((state) => state.ignoreLearningPathTopicCache)
+
   // Function
   const getTopicProgress = useCallback(
     (
@@ -138,7 +141,7 @@ export const useLearningPathTopicProgress = (
           log.error(t('error.fetchUser') + ' ' + error)
         })
     }
-  }, [isAuth, navigate, getLearningPathTopic, getAllTopicProgress])
+  }, [isAuth, navigate, getLearningPathTopic, getAllTopicProgress, ignoreLearningPathTopicCache])
 
   return useMemo(() => ({ topicProgress, isLoading, topics }), [topicProgress, isLoading, topics])
 }
diff --git a/src/pages/Course/Course.tsx b/src/pages/Course/Course.tsx
index 8bf08f8b9..6545ad0c3 100644
--- a/src/pages/Course/Course.tsx
+++ b/src/pages/Course/Course.tsx
@@ -1,11 +1,11 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import { useContext, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import { Box, Button, Card, CardContent, Grid, Stack } from '@common/components'
 import { useLearningPathTopicProgress, useMediaQuery, useTheme } from '@common/hooks'
 import { CreateTopicModal, SkeletonList, TopicCard } from '@components'
 import { RoleContext } from '@services'
+import { useStore } from '@store'
 
 /**
  * # Course Page
@@ -24,11 +24,13 @@ const Course = () => {
   const { isCourseCreatorRole } = useContext(RoleContext)
   const { courseId } = useParams<{ courseId: string }>()
   const { topicProgress, isLoading, topics } = useLearningPathTopicProgress({ courseId })
+  const triggerLearningPathTopicReload = useStore((state) => state.triggerLearningPathTopicReload)
 
   const [createTopicModalOpen, setCreateTopicModalOpen] = useState<boolean>(false)
   const [successTopicCreated, setSuccessTopicCreated] = useState<boolean>(false)
 
   const handleCloseTopicModal = () => {
+    triggerLearningPathTopicReload(true)
     setCreateTopicModalOpen(false)
   }
 
diff --git a/src/store/Slices/LearningPathTopicSlice.ts b/src/store/Slices/LearningPathTopicSlice.ts
index 15e74af78..6480de8d4 100644
--- a/src/store/Slices/LearningPathTopicSlice.ts
+++ b/src/store/Slices/LearningPathTopicSlice.ts
@@ -6,28 +6,34 @@ import { resetters } from '../Zustand/Store'
 
 export default interface LearningPathTopicSlice {
   _cache_learningPathTopic_record: Record<string, LearningPathTopic | undefined>
+  ignoreLearningPathTopicCache: boolean
   getLearningPathTopic: LearningPathTopicReturn
+  triggerLearningPathTopicReload: (reloadState: boolean) => void
 }
 
 export const createLearningPathTopicSlice: StateCreator<StoreState, [], [], LearningPathTopicSlice> = (set, get) => {
   resetters.push(() => set({ _cache_learningPathTopic_record: {} }))
   return {
     _cache_learningPathTopic_record: {},
+    ignoreLearningPathTopicCache: false,
     getLearningPathTopic: async (...arg) => {
       const [userId, lmsUserId, studentId, courseId] = arg
 
+      const { ignoreLearningPathTopicCache } = get()
       const cached = get()._cache_learningPathTopic_record[`${courseId}`]
 
-      if (!cached) {
+      if (!cached || ignoreLearningPathTopicCache) {
         const learningPathTopic_response = await fetchLearningPathTopic(userId, lmsUserId, studentId, courseId)
         set({
           _cache_learningPathTopic_record: {
             ...get()._cache_learningPathTopic_record,
             [`${courseId}`]: learningPathTopic_response
-          }
+          },
+          ignoreLearningPathTopicCache: false
         })
         return learningPathTopic_response
       } else return cached
-    }
+    },
+    triggerLearningPathTopicReload: (reloadState: boolean) => set({ ignoreLearningPathTopicCache: reloadState })
   }
 }