From 5ae508e94a87224f19195abf43bf9bd7572a2201 Mon Sep 17 00:00:00 2001
From: christianbeeznst <christian.fasanando@beeznest.com>
Date: Mon, 25 Nov 2024 23:22:07 -0500
Subject: [PATCH] Internal: Fix: Reset course list to avoid duplication on page
 reload - refs BT#22105

---
 assets/vue/views/user/courses/List.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/assets/vue/views/user/courses/List.vue b/assets/vue/views/user/courses/List.vue
index 2d83022f52..d6dd9cbcba 100644
--- a/assets/vue/views/user/courses/List.vue
+++ b/assets/vue/views/user/courses/List.vue
@@ -97,6 +97,14 @@ const loadMoreCourses = () => {
     updateQuery: (previousResult, {fetchMoreResult}) => {
       if (!fetchMoreResult) return previousResult
 
+      const newCourses = fetchMoreResult.courseRelUsers.edges.map(({ node }) => node.course)
+      const filteredCourses = newCourses.filter(
+        (newCourse) => !courses.value.some((existingCourse) => existingCourse._id === newCourse._id)
+      )
+      courses.value.push(...filteredCourses)
+      endCursor.value = fetchMoreResult.courseRelUsers.pageInfo.endCursor
+      hasMore.value = fetchMoreResult.courseRelUsers.pageInfo.hasNextPage
+
       return {
         ...previousResult,
         courseRelUsers: {
@@ -105,10 +113,12 @@ const loadMoreCourses = () => {
         },
       }
     },
+  }).finally(() => {
+    isLoading.value = false
   })
 }
 
-const observer = new IntersectionObserver((entries) => {
+let observer = new IntersectionObserver((entries) => {
   if (entries[0].isIntersecting) {
     loadMoreCourses();
   }
@@ -117,6 +127,20 @@ const observer = new IntersectionObserver((entries) => {
 })
 
 onMounted(() => {
+  courses.value = []
+  endCursor.value = null
+  hasMore.value = true
+  isLoading.value = false
+
+  if (observer) observer.disconnect()
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting) {
+      loadMoreCourses()
+    }
+  }, {
+    rootMargin: '300px',
+  })
+
   loadMoreCourses()
 })
 </script>