From aff14e9666b56e257cf588dc95497cd83384d762 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Thu, 3 Aug 2023 18:48:51 -0500
Subject: [PATCH] Fix sticky courses

---
 assets/vue/views/user/courses/List.vue        |  2 ++
 .../vue/views/user/courses/StickyCourses.vue  | 24 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/assets/vue/views/user/courses/List.vue b/assets/vue/views/user/courses/List.vue
index ae515d6023..d52eae6f8a 100644
--- a/assets/vue/views/user/courses/List.vue
+++ b/assets/vue/views/user/courses/List.vue
@@ -1,6 +1,8 @@
 <template>
   <StickyCourses />
 
+  <hr>
+
   <div v-if="isLoading" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
     <Skeleton height="16rem" />
     <Skeleton class="hidden md:block" height="16rem" />
diff --git a/assets/vue/views/user/courses/StickyCourses.vue b/assets/vue/views/user/courses/StickyCourses.vue
index 2d18eb6647..38137d4574 100644
--- a/assets/vue/views/user/courses/StickyCourses.vue
+++ b/assets/vue/views/user/courses/StickyCourses.vue
@@ -14,20 +14,24 @@
 
 <script setup>
 import CourseCardList from '../../../components/course/CourseCardList.vue'
-import {computed} from "vue"
+import { computed, ref, watchEffect } from "vue"
 import {useStore} from 'vuex'
 import {GET_STICKY_COURSES} from "../../../graphql/queries/Course"
-import {useSession} from "../sessions/session"
+import { useQuery } from "@vue/apollo-composable"
 
 const store = useStore()
 
-let user = computed(() => store.getters['security/getUser'])
-const {sessions: result} = useSession(user, null, null, GET_STICKY_COURSES)
+let isAuthenticated = computed(() => store.getters['security/isAuthenticated'])
 
-const courses = computed(() => {
-  if (result.value === null) {
-    return []
-  }
-  return result.value
-})
+const queryResponse = ref({})
+
+if (isAuthenticated.value) {
+  const { result } = useQuery(GET_STICKY_COURSES)
+
+  watchEffect(() => {
+    queryResponse.value = result.value
+  })
+}
+
+const courses = computed(() => queryResponse.value?.courses?.edges?.map(({node}) => node) ?? [])
 </script>