Fix My courses page

assets/vue/views/user/courses/List.vue

@@ -1,34 +1,18 @@
 <template>
   <StickyCourses />
 
-  <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"
-    />
-    <Skeleton
-      class="hidden lg:block"
-      height="16rem"
-    />
-    <Skeleton
-      class="hidden xl:block"
-      height="16rem"
-    />
+  <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" />
+    <Skeleton class="hidden lg:block" height="16rem" />
+    <Skeleton class="hidden xl:block" height="16rem" />
   </div>
 
   <div
     v-if="!isLoading && courses.length > 0"
     class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
   >
-    <CourseCardList
-      :courses="courses"
-    />
+    <CourseCardList :courses="courses" />
   </div>
   <EmptyState
     v-else-if="!isLoading && 0 === courses.length"
@@ -39,37 +23,26 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
-import { useQuery } from '@vue/apollo-composable';
-import { useI18n } from 'vue-i18n';
-import { GET_COURSE_REL_USER } from '../../../graphql/queries/CourseRelUser.js';
-import Skeleton from 'primevue/skeleton';
-import StickyCourses from '../../../views/user/courses/StickyCourses.vue';
-import CourseCardList from '../../../components/course/CourseCardList.vue';
-import EmptyState from '../../../components/EmptyState';
+import { computed } from "vue";
+import { useStore } from "vuex";
+import { useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { GET_COURSE_REL_USER } from "../../../graphql/queries/CourseRelUser.js";
+import Skeleton from "primevue/skeleton";
+import StickyCourses from "../../../views/user/courses/StickyCourses.vue";
+import CourseCardList from "../../../components/course/CourseCardList.vue";
+import EmptyState from "../../../components/EmptyState";
 
 const store = useStore();
 const { t } = useI18n();
 
-let user = computed(() => store.getters['security/getUser']);
-let courses = ref([]);
-let isLoading = ref(true);
+let user = computed(() => store.getters["security/getUser"]);
 
-if (user.value) {
-  const { result, loading } = useQuery(
-    GET_COURSE_REL_USER,
-    {
-      user: user.value['@id'],
-    }
-  );
+const { result, loading } = useQuery(GET_COURSE_REL_USER, {
+  user: user.value["@id"],
+});
 
-  isLoading = computed(
-    () => loading.value
-  );
+const isLoading = computed(() => loading.value);
 
-  courses = computed(
-    () => result.value?.courseRelUsers.edges.map(({ node }) => node.course) ?? []
-  );
-}
+const courses = computed(() => result.value?.courseRelUsers.edges.map(({ node }) => node.course) ?? []);
 </script>