Refactor usage of useResult

* Refactor usage of useResult with a computed since is deprecated
* Improve validation of sessions composable and add the possibility to
configure the query

assets/vue/views/user/courses/StickyCourses.vue

@@ -1,45 +1,33 @@
 <template>
   <div v-if="courses.length" class="mb-6">
-    <h2> {{ $t('Sticky courses')}}</h2>
+    <h2 class="mb-2"> {{ $t('Sticky courses')}}</h2>
     <div
-        class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2">
+      v-if="courses.length"
+      class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2"
+    >
       <CourseCardList
-          :courses="courses"
+        :courses="courses"
       />
     </div>
-    <hr />
   </div>
 </template>
 
-<script>
-import CourseCardList from '../../../components/course/CourseCardList.vue';
-import {computed} from "vue";
-import {useStore} from 'vuex';
-import {useQuery, useResult} from '@vue/apollo-composable'
-import {GET_STICKY_COURSES} from "../../../graphql/queries/Course";
+<script setup>
+import CourseCardList from '../../../components/course/CourseCardList.vue'
+import {computed} from "vue"
+import {useStore} from 'vuex'
+import {GET_STICKY_COURSES} from "../../../graphql/queries/Course"
+import {useSession} from "../sessions/session"
 
-export default {
-  name: 'StickyCourses',
-  components: {
-    CourseCardList,
-  },
-  setup() {
-    const store = useStore();
-    let user = computed(() => store.getters['security/getUser']);
+const store = useStore()
 
-    if (user.value) {
-      const {result: resultStickyCourses, loading: loadingCourses} = useQuery(GET_STICKY_COURSES);
-      const courses = useResult(resultStickyCourses, [], (data) => {
-        return data.courses.edges.map(function (edge) {
-          return edge.node;
-        });
-      });
+let user = computed(() => store.getters['security/getUser'])
+const {sessions: result} = useSession(user, null, null, GET_STICKY_COURSES)
 
-      return {
-        courses,
-        loadingCourses
-      }
-    }
+const courses = computed(() => {
+  if (result.value === null) {
+    return []
   }
-};
+  return result.value
+})
 </script>

assets/vue/views/user/sessions/session.js

@@ -3,7 +3,7 @@ import {useQuery} from "@vue/apollo-composable"
 import {GET_SESSION_REL_USER, GET_SESSION_REL_USER_CURRENT} from "../../../graphql/queries/SessionRelUser"
 import {DateTime} from 'luxon'
 
-export function useSession(user, start, end) {
+export function useSession(user, start, end, query) {
   let sessions = ref(null)
   let isLoading = ref(false)
 
@@ -15,10 +15,13 @@ export function useSession(user, start, end) {
 
     variables = includeStartDateIfExist(variables, start)
     variables = includeEndDateIfExist(variables, end)
-    let query = getGraphqlQuery(variables)
+    let finalQuery = getGraphqlQuery(variables)
+    if (query !== undefined) {
+      finalQuery = query
+    }
 
     isLoading.value = true
-    const {result, loading} = useQuery(query, variables)
+    const {result, loading} = useQuery(finalQuery, variables)
     sessions.value = result
     return {
       sessions,
@@ -33,7 +36,7 @@ export function useSession(user, start, end) {
 }
 
 const includeStartDateIfExist = (variables, start) => {
-  if (start !== undefined) {
+  if (start !== undefined && start !== null) {
     if (!DateTime.isDateTime(start)) {
       console.error("You should pass a DateTime instance to useSession start parameter")
     }
@@ -44,7 +47,7 @@ const includeStartDateIfExist = (variables, start) => {
 }
 
 const includeEndDateIfExist = (variables, end) => {
-  if (end !== undefined) {
+  if (end !== undefined && end !== null) {
     if (!DateTime.isDateTime(end)) {
       console.error("You should pass a DateTime instance to useSession end parameter")
     }