From f5bf11d812255b80f89790929508d8152c2fbbff Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo.depeuter@ugent.be>
Date: Mon, 19 May 2025 20:53:05 +0200
Subject: [PATCH] chore(frontend): Tweaks

---
 .../components/DiscussionSideBarElement.vue   | 26 ++++---
 .../src/components/DiscussionsSideBar.vue     |  3 +-
 .../views/discussions/SingleDiscussion.vue    | 77 ++++---------------
 3 files changed, 30 insertions(+), 76 deletions(-)

diff --git a/frontend/src/components/DiscussionSideBarElement.vue b/frontend/src/components/DiscussionSideBarElement.vue
index 34440ad6..a5b909e4 100644
--- a/frontend/src/components/DiscussionSideBarElement.vue
+++ b/frontend/src/components/DiscussionSideBarElement.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-    import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
-    import type { LearningPath } from "@/data-objects/learning-paths/learning-path";
-    import { useLearningObjectListForPathQuery } from "@/queries/learning-objects";
-    import { useRoute } from "vue-router";
-    import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import type { LearningObject } from '@/data-objects/learning-objects/learning-object';
+import type { LearningPath } from '@/data-objects/learning-paths/learning-path';
+import { useLearningObjectListForPathQuery } from '@/queries/learning-objects';
+import { useRoute } from 'vue-router';
+import UsingQueryResult from '@/components/UsingQueryResult.vue';
 
-    const route = useRoute();
+const route = useRoute();
 
     const props = defineProps<{
         path: LearningPath;
@@ -19,6 +19,7 @@
             {{ path.title }}
         </v-expansion-panel-title>
         <v-expansion-panel-text>
+          <v-lazy>
             <using-query-result
                 :query-result="useLearningObjectListForPathQuery(props.path)"
                 v-slot="learningObjects: { data: LearningObject[] }"
@@ -33,12 +34,13 @@
                             path: `/discussion-reload/${props.path.hruid}/${node.language}/${node.key}`,
                             query: route.query,
                         }"
-                        :title="node.title"
-                        :active="node.key === props.activeObjectId"
-                    >
-                    </v-list-item>
-                </template>
-            </using-query-result>
+                            :title="node.title"
+                            :active="node.key === props.activeObjectId"
+                        >
+                        </v-list-item>
+                    </template>
+                </using-query-result>
+            </v-lazy>
         </v-expansion-panel-text>
     </v-expansion-panel>
 </template>
diff --git a/frontend/src/components/DiscussionsSideBar.vue b/frontend/src/components/DiscussionsSideBar.vue
index c90394c2..5c68e6ac 100644
--- a/frontend/src/components/DiscussionsSideBar.vue
+++ b/frontend/src/components/DiscussionsSideBar.vue
@@ -44,8 +44,7 @@
                         :path="learningPath"
                         :activeObjectId="'' as string"
                         :key="learningPath.hruid"
-                    >
-                    </DiscussionSideBarElement>
+                    />
                 </using-query-result>
             </v-expansion-panels>
         </div>
diff --git a/frontend/src/views/discussions/SingleDiscussion.vue b/frontend/src/views/discussions/SingleDiscussion.vue
index 698b5688..51230c51 100644
--- a/frontend/src/views/discussions/SingleDiscussion.vue
+++ b/frontend/src/views/discussions/SingleDiscussion.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
-    import { Language } from "@/data-objects/language.ts";
-    import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
-    import { computed, type ComputedRef, ref, watch } from "vue";
-    import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
-    import { useRoute } from "vue-router";
-    import { useGetAllLearningPaths, useGetLearningPathQuery } from "@/queries/learning-paths.ts";
-    import { useLearningObjectListForPathQuery } from "@/queries/learning-objects.ts";
-    import UsingQueryResult from "@/components/UsingQueryResult.vue";
-    import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
-    import { useQuestionsQuery } from "@/queries/questions";
-    import type { QuestionsResponse } from "@/controllers/questions";
-    import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
-    import QandA from "@/components/QandA.vue";
-    import type { QuestionDTO } from "@dwengo-1/common/interfaces/question";
-    import DiscussionsSideBar from "@/components/DiscussionsSideBar.vue";
-    import QuestionBox from "@/components/QuestionBox.vue";
-    import { useI18n } from "vue-i18n";
+import { Language } from '@/data-objects/language.ts';
+import { computed, type ComputedRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useGetLearningPathQuery } from '@/queries/learning-paths.ts';
+import UsingQueryResult from '@/components/UsingQueryResult.vue';
+import { LearningPathNode } from '@/data-objects/learning-paths/learning-path-node.ts';
+import { useQuestionsQuery } from '@/queries/questions';
+import type { QuestionsResponse } from '@/controllers/questions';
+import type { LearningObjectIdentifierDTO } from '@dwengo-1/common/interfaces/learning-content';
+import QandA from '@/components/QandA.vue';
+import type { QuestionDTO } from '@dwengo-1/common/interfaces/question';
+import DiscussionsSideBar from '@/components/DiscussionsSideBar.vue';
+import QuestionBox from '@/components/QuestionBox.vue';
+import { useI18n } from 'vue-i18n';
 
-    const { t } = useI18n();
+const { t } = useI18n();
 
     const route = useRoute();
 
@@ -46,50 +43,6 @@
         return undefined;
     });
 
-    const allLearningPathsResult = useGetAllLearningPaths(props.language);
-
-    async function learningObjectHasQuestions(learningObject: LearningObject): Promise<boolean> {
-        const loid = {
-            hruid: learningObject.key,
-            version: learningObject.version,
-            language: learningObject.language,
-        } as LearningObjectIdentifierDTO;
-        const { data } = useQuestionsQuery(loid);
-        return (data.value?.questions.length ?? 0) > 0;
-    }
-
-    async function learningPathHasQuestions(learningPath: LearningPath): Promise<boolean> {
-        const learningPathQueryResult = useGetLearningPathQuery(
-            learningPath.hruid,
-            learningPath.language as Language,
-            forGroup,
-        );
-        const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
-        const learningObjects = learningObjectListQueryResult.data.value || [];
-        const hasQuestions = await Promise.all(
-            learningObjects.map(async (learningObject) => learningObjectHasQuestions(learningObject)),
-        );
-        return hasQuestions.some((hasQuestion) => hasQuestion);
-    }
-
-    const questionedLearningPaths = ref<LearningPath[] | null>(null);
-
-    watch(
-        () => allLearningPathsResult.data.value,
-        async (learningPaths) => {
-            if (learningPaths) {
-                const pathsWithQuestions = await Promise.all(
-                    learningPaths.map(async (learningPath) => {
-                        const hasQuestions = await learningPathHasQuestions(learningPath);
-                        return hasQuestions ? learningPath : null;
-                    }),
-                );
-                questionedLearningPaths.value = pathsWithQuestions.filter((path) => path !== null);
-            }
-        },
-        { immediate: true },
-    );
-
     const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
 
     const nodesList: ComputedRef<LearningPathNode[] | null> = computed(