From 14e8d5da4971d232c2c97fd7ffff100a56f884f2 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 13 Dec 2023 15:43:26 +0100
Subject: [PATCH] feat: mentor has no medialibrary

---
 .../components/header/MainNavigationBar.vue   | 13 +++++++--
 client/src/components/header/MobileMenu.vue   |  3 ++-
 .../pages/cockpit/cockpitPage/CockpitPage.vue | 11 +++-----
 client/src/router/guards.ts                   |  5 ++++
 client/src/stores/cockpit.ts                  | 27 ++++++++++++++-----
 5 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 8234380e..ac517904 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -22,6 +22,7 @@ import {
   getLearningPathUrl,
   getMediaCenterUrl,
 } from "@/utils/utils";
+import { useCockpitStore } from "@/stores/cockpit";
 
 log.debug("MainNavigationBar created");
 
@@ -68,6 +69,13 @@ const appointmentsUrl = computed(() => {
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
+
+const hasMediaLibrary = computed(() => {
+  if (useCockpitStore().hasMentorCockpitType) {
+    return false;
+  }
+  return inCourse() && Boolean(courseSessionsStore.currentCourseSession);
+});
 </script>
 
 <template>
@@ -78,6 +86,7 @@ onMounted(() => {
         v-if="userStore.loggedIn"
         :show="state.showMobileNavigationMenu"
         :course-session="courseSessionsStore.currentCourseSession"
+        :has-media-library="hasMediaLibrary"
         :media-url="
           getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
         "
@@ -211,10 +220,10 @@ onMounted(() => {
 
             <div class="flex items-stretch justify-start space-x-8">
               <router-link
-                v-if="inCourse() && courseSessionsStore.currentCourseSession"
+                v-if="hasMediaLibrary"
                 :to="
                   getMediaCenterUrl(
-                    courseSessionsStore.currentCourseSession.course.slug
+                    courseSessionsStore.currentCourseSession?.course.slug
                   )
                 "
                 data-cy="medialibrary-link"
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index c2424be2..beb0bf44 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -15,6 +15,7 @@ const router = useRouter();
 
 defineProps<{
   show: boolean;
+  hasMediaLibrary: boolean;
   courseSession: CourseSession | undefined;
   mediaUrl?: string;
   user: UserState | undefined;
@@ -97,7 +98,7 @@ const courseSessionsStore = useCourseSessionsStore();
                   </button>
                 </li>
               </template>
-              <li class="mb-6">
+              <li v-if="hasMediaLibrary" class="mb-6">
                 <button
                   data-cy="medialibrary-link"
                   @click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue b/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
index b39c49cf..92a694ed 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitPage.vue
@@ -1,24 +1,19 @@
 <script setup lang="ts">
 import { useCockpitStore } from "@/stores/cockpit";
 import { useCurrentCourseSession } from "@/composables";
-import { onMounted } from "vue";
 import CockpitExpertPage from "./CockpitExpertPage.vue";
 import CockpitMentorPage from "./CockpitMentorPage.vue";
 
-const courseSession = useCurrentCourseSession();
 const cockpitStore = useCockpitStore();
-
-onMounted(async () => {
-  await cockpitStore.fetchCockpitType(courseSession.value.course.id);
-});
+const courseSession = useCurrentCourseSession();
 </script>
 
 <template>
   <div class="bg-gray-200">
-    <template v-if="cockpitStore.cockpitType == 'expert'">
+    <template v-if="cockpitStore.hasExpertCockpitType">
       <CockpitExpertPage :course-slug="courseSession.course.slug" />
     </template>
-    <template v-else-if="cockpitStore.cockpitType == 'mentor'">
+    <template v-else-if="cockpitStore.hasMentorCockpitType">
       <CockpitMentorPage :course-slug="courseSession.course.slug" />
     </template>
   </div>
diff --git a/client/src/router/guards.ts b/client/src/router/guards.ts
index 27116000..9051bf9e 100644
--- a/client/src/router/guards.ts
+++ b/client/src/router/guards.ts
@@ -1,3 +1,4 @@
+import { useCockpitStore } from "@/stores/cockpit";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import type { NavigationGuard, RouteLocationNormalized } from "vue-router";
@@ -61,6 +62,10 @@ export async function handleCurrentCourseSession(to: RouteLocationNormalized) {
     if (!courseSessionsStore.loaded) {
       await courseSessionsStore.loadCourseSessionsData();
     }
+
+    // Must be after loadCourseSessionsData & _currentCourseSlug is set!
+    const courseId = courseSessionsStore.currentCourseSession?.course.id || null;
+    await useCockpitStore().fetchCockpitType(courseId);
   }
 }
 
diff --git a/client/src/stores/cockpit.ts b/client/src/stores/cockpit.ts
index 17e39a88..b570783d 100644
--- a/client/src/stores/cockpit.ts
+++ b/client/src/stores/cockpit.ts
@@ -1,21 +1,36 @@
 import { itGetCached } from "@/fetchHelpers";
 import { defineStore } from "pinia";
 import type { Ref } from "vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 type CockpitType = "mentor" | "expert" | null;
 
 export const useCockpitStore = defineStore("cockpit", () => {
   const cockpitType: Ref<CockpitType> = ref(null);
-  const cockpitTypeIsLoading = ref(false);
+  const isLoading = ref(false);
 
-  async function fetchCockpitType(courseId: string) {
-    cockpitTypeIsLoading.value = true;
+  const hasExpertCockpitType = computed(() => cockpitType.value === "expert");
+  const hasMentorCockpitType = computed(() => cockpitType.value === "mentor");
+  const hasNoCockpitType = computed(() => cockpitType.value === null);
+
+  async function fetchCockpitType(courseId: string | null) {
+    if (!courseId) {
+      cockpitType.value = null;
+      return;
+    }
+
+    isLoading.value = true;
     const url = `/api/course/${courseId}/cockpit/`;
     const response = await itGetCached(url);
     cockpitType.value = response.type;
-    cockpitTypeIsLoading.value = false;
+    isLoading.value = false;
   }
 
-  return { cockpitType, cockpitTypeIsLoading, fetchCockpitType };
+  return {
+    fetchCockpitType,
+    hasExpertCockpitType,
+    hasMentorCockpitType,
+    hasNoCockpitType,
+    isLoading,
+  };
 });