From 8baecc07365c37a2a75fe7af539c9cdad9f32daa Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Wed, 7 Aug 2024 18:03:28 +0200
Subject: [PATCH] Refactor common code into composable

---
 client/src/composables.ts                     | 30 ++++++++++++++++
 .../CompetenceCertificateDetailPage.vue       | 28 +++++----------
 .../CompetenceCertificateListPage.vue         | 32 ++++-------------
 .../pages/competence/CompetenceIndexPage.vue  | 34 ++++---------------
 4 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/client/src/composables.ts b/client/src/composables.ts
index 6c231576..2fd0d777 100644
--- a/client/src/composables.ts
+++ b/client/src/composables.ts
@@ -32,6 +32,7 @@ import { useUserStore } from "@/stores/user";
 import type {
   ActionCompetence,
   CircleType,
+  CompetenceCertificate,
   Course,
   CourseCompletion,
   CourseCompletionStatus,
@@ -52,6 +53,8 @@ import log from "loglevel";
 import type { ComputedRef, Ref } from "vue";
 import { computed, onMounted, ref, watchEffect } from "vue";
 import { useRouter, type RouteLocationRaw } from "vue-router";
+import { getCertificates } from "./services/competence";
+import { mergeCompetenceCertificates } from "./pages/competence/utils";
 
 export function useCurrentCourseSession() {
   /**
@@ -746,3 +749,30 @@ export function useVVByLink() {
 
   return { href };
 }
+
+export function useAllCompetenceCertificates(
+  userId: string | undefined,
+  courseSlug: string
+) {
+  const courseSessionsStore = useCourseSessionsStore();
+  const certificateQueries = courseSessionsStore.allCourseSessions.map(
+    (courseSession) => {
+      return useCertificateQuery(userId, courseSlug, courseSession).certificatesQuery;
+    }
+  );
+
+  const competenceCertificatesPerCs = computed(() =>
+    certificateQueries.map((query) => {
+      return getCertificates(query.data.value, userId ?? null)
+        ?.competence_certificates as unknown as CompetenceCertificate[];
+    })
+  );
+  const isLoaded = computed(() => !certificateQueries.some((q) => q.fetching.value));
+  const competenceCertificates = computed(() =>
+    mergeCompetenceCertificates(competenceCertificatesPerCs.value.flat())
+  );
+  return {
+    competenceCertificates,
+    isLoaded,
+  };
+}
diff --git a/client/src/pages/competence/CompetenceCertificateDetailPage.vue b/client/src/pages/competence/CompetenceCertificateDetailPage.vue
index 227a6a0c..d9d6efac 100644
--- a/client/src/pages/competence/CompetenceCertificateDetailPage.vue
+++ b/client/src/pages/competence/CompetenceCertificateDetailPage.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed } from "vue";
-import type { CompetenceCertificate } from "@/types";
-import { useCertificateQuery } from "@/composables";
+import { useAllCompetenceCertificates } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
-import { getCertificates } from "@/services/competence";
 import { getPreviousRoute } from "@/router/history";
-import { mergeCompetenceCertificates } from "./utils";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-
 const props = defineProps<{
   courseSlug: string;
   certificateSlug: string;
@@ -17,24 +12,19 @@ const props = defineProps<{
 
 log.debug("CompetenceCertificateDetailPage setup", props);
 
-const store = useCourseSessionsStore();
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
-  return useCertificateQuery(props.userId, props.courseSlug, courseSession)
-    .certificatesQuery;
-});
+const { competenceCertificates } = useAllCompetenceCertificates(
+  props.userId,
+  props.courseSlug
+);
 
 const certificate = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
-    return getCertificates(query.data.value, props.userId!)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-  const certificates = mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-
-  if (!certificates) {
+  if (!competenceCertificates) {
     return null;
   }
 
-  return certificates.find((cc) => cc.slug.endsWith(props.certificateSlug));
+  return competenceCertificates.value.find((cc) =>
+    cc.slug.endsWith(props.certificateSlug)
+  );
 });
 </script>
 
diff --git a/client/src/pages/competence/CompetenceCertificateListPage.vue b/client/src/pages/competence/CompetenceCertificateListPage.vue
index 49b83ba6..0fedf299 100644
--- a/client/src/pages/competence/CompetenceCertificateListPage.vue
+++ b/client/src/pages/competence/CompetenceCertificateListPage.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed, onMounted } from "vue";
-import type { CompetenceCertificate } from "@/types";
-import { useCertificateQuery } from "@/composables";
+import { useAllCompetenceCertificates } from "@/composables";
 import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
 import {
   assignmentsUserPoints,
   calcCompetencesTotalGrade,
-  mergeCompetenceCertificates,
 } from "@/pages/competence/utils";
 import { useRoute } from "vue-router";
-import { getCertificates } from "@/services/competence";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-
 const props = defineProps<{
   courseSlug: string;
   userId?: string;
@@ -22,30 +17,17 @@ log.debug("CompetenceCertificateListPage setup", props);
 
 const route = useRoute();
 
-const store = useCourseSessionsStore();
-console.log(
-  `Loading competence certificates from ${store.allCourseSessions.length} course sessions:`,
-  store.allCourseSessions.map((cs) => cs.title)
+const { competenceCertificates } = useAllCompetenceCertificates(
+  props.userId,
+  props.courseSlug
 );
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
-  return useCertificateQuery(props.userId, props.courseSlug, courseSession)
-    .certificatesQuery;
-});
-
-const mergedCertificates = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
-    return getCertificates(query.data.value, props.userId ?? null)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-  return mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-});
 
 const assignments = computed(() => {
-  return mergedCertificates?.value?.flatMap((cc) => cc.assignments);
+  return competenceCertificates?.value.flatMap((cc) => cc.assignments);
 });
 
 const totalGrade = computed(() => {
-  return calcCompetencesTotalGrade(mergedCertificates.value ?? []);
+  return calcCompetencesTotalGrade(competenceCertificates.value ?? []);
 });
 
 const userPointsEvaluatedAssignments = computed(() => {
@@ -102,7 +84,7 @@ onMounted(async () => {
     </div>
 
     <div
-      v-for="competenceCertificate in mergedCertificates"
+      v-for="competenceCertificate in competenceCertificates"
       :key="competenceCertificate.id"
     >
       <CompetenceCertificateComponent
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index f94e4238..fa71ac5d 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { computed } from "vue";
-import type { CompetenceCertificate } from "@/types";
-import { useCertificateQuery, useCurrentCourseSession } from "@/composables";
+import { useAllCompetenceCertificates, useCurrentCourseSession } from "@/composables";
 import {
   assignmentsUserPoints,
   calcCompetenceCertificateGrade,
   calcCompetencesTotalGrade,
   competenceCertificateProgressStatusCount,
-  mergeCompetenceCertificates,
 } from "@/pages/competence/utils";
 import ItProgress from "@/components/ui/ItProgress.vue";
 import SelfEvaluationAndFeedbackOverview from "@/components/selfEvaluationFeedback/SelfEvaluationAndFeedbackOverview.vue";
 import { useUserStore } from "@/stores/user";
 import { useRouter } from "vue-router";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
-import { getCertificates } from "@/services/competence";
 
 const props = defineProps<{
   courseSlug: string;
@@ -23,27 +19,13 @@ const props = defineProps<{
 
 log.debug("CompetenceIndexPage setup", props);
 
-const store = useCourseSessionsStore();
-console.log(
-  `Loading competence certificates from ${store.allCourseSessions.length} course sessions:`,
-  store.allCourseSessions.map((cs) => cs.title)
+const { competenceCertificates, isLoaded } = useAllCompetenceCertificates(
+  undefined,
+  props.courseSlug
 );
-const certificateQueries = store.allCourseSessions.map((courseSession) => {
-  return useCertificateQuery(undefined, props.courseSlug, courseSession)
-    .certificatesQuery;
-});
-
-const mergedCertificates = computed(() => {
-  const competenceCertificatesPerCs = certificateQueries.map((query) => {
-    return getCertificates(query.data.value, null)
-      ?.competence_certificates as unknown as CompetenceCertificate[];
-  });
-
-  return mergeCompetenceCertificates(competenceCertificatesPerCs.flat());
-});
 
 const allAssignments = computed(() => {
-  return mergedCertificates.value.flatMap((cc) => cc.assignments);
+  return competenceCertificates.value.flatMap((cc) => cc.assignments);
 });
 
 const userPointsEvaluatedAssignments = computed(() => {
@@ -52,8 +34,6 @@ const userPointsEvaluatedAssignments = computed(() => {
 
 const currentCourseSession = useCurrentCourseSession();
 
-const isLoaded = computed(() => !certificateQueries.some((q) => q.fetching.value));
-
 const router = useRouter();
 </script>
 
@@ -71,7 +51,7 @@ const router = useRouter();
         <div v-if="userPointsEvaluatedAssignments > 0">
           {{ $t("a.Erfahrungsnote üK") }}:
           <span class="font-bold">
-            {{ calcCompetencesTotalGrade(mergedCertificates ?? []) }}
+            {{ calcCompetencesTotalGrade(competenceCertificates ?? []) }}
           </span>
 
           <span class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2">
@@ -86,7 +66,7 @@ const router = useRouter();
       <div>
         <div class="mt-4">
           <div
-            v-for="certificate in mergedCertificates"
+            v-for="certificate in competenceCertificates"
             :key="certificate.id"
             class="flex flex-col justify-between py-4 lg:flex-row lg:items-center"
             :data-cy="`certificate-${certificate.slug}`"