From 812d70b1c8c8f81d45ab957011a21c4cbd767a1f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 6 Apr 2023 15:44:12 +0200
Subject: [PATCH] Clean up MainNavigationBar

---
 client/src/components/header/AccountMenu.vue  | 26 ++++++++
 .../components/header/MainNavigationBar.vue   | 64 ++++---------------
 client/src/utils/route.ts                     | 30 +++++++++
 3 files changed, 67 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/header/AccountMenu.vue
 create mode 100644 client/src/utils/route.ts

diff --git a/client/src/components/header/AccountMenu.vue b/client/src/components/header/AccountMenu.vue
new file mode 100644
index 00000000..c981b2b5
--- /dev/null
+++ b/client/src/components/header/AccountMenu.vue
@@ -0,0 +1,26 @@
+<template>
+  <AccountMenuContent
+    :course-sessions="courseSessionsStore.currentCourseSessions"
+    :selected-course-session="courseSessionsStore.currentCourseSession?.id"
+    :user="userStore"
+    @logout="logout"
+    @select-course-session="selectCourseSession"
+  />
+</template>
+
+<script setup lang="ts">
+import AccountMenuContent from "@/components/header/AccountMenuContent.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useUserStore } from "@/stores/user";
+import type { CourseSession } from "@/types";
+
+const logout = () => {
+  userStore.handleLogout();
+};
+const selectCourseSession = (courseSession: CourseSession) => {
+  courseSessionsStore.switchCourseSession(courseSession);
+};
+
+const courseSessionsStore = useCourseSessionsStore();
+const userStore = useUserStore();
+</script>
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index f6b75f94..2f544e46 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import log from "loglevel";
 
-import AccountMenuContent from "@/components/header/AccountMenuContent.vue";
+import AccountMenu from "@/components/header/AccountMenu.vue";
 import MobileMenu from "@/components/header/MobileMenu.vue";
 import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
 import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
@@ -9,20 +9,19 @@ import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useNotificationsStore } from "@/stores/notifications";
 import { useUserStore } from "@/stores/user";
-import type { CourseSession } from "@/types";
+import { useRouteLookups } from "@/utils/route";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 
 log.debug("MainNavigationBar created");
 
-const route = useRoute();
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const userStore = useUserStore();
 const courseSessionsStore = useCourseSessionsStore();
 const notificationsStore = useNotificationsStore();
+const { inCockpit, inCompetenceProfile, inCourse, inLearningPath } = useRouteLookups();
 
 const { t } = useI18n();
 const state = reactive({
@@ -30,37 +29,6 @@ const state = reactive({
   showMobileProfileMenu: false,
 });
 
-function inCourse() {
-  return route.path.startsWith("/course/");
-}
-
-function inCockpit() {
-  const regex = new RegExp("/course/[^/]+/cockpit");
-  return regex.test(route.path);
-}
-
-function inLearningPath() {
-  const regex = new RegExp("/course/[^/]+/learn");
-  return regex.test(route.path);
-}
-
-function inCompetenceProfile() {
-  const regex = new RegExp("/course/[^/]+/competence");
-  return regex.test(route.path);
-}
-
-function inMediaLibrary() {
-  return route.path.startsWith("/media/");
-}
-
-function logout() {
-  userStore.handleLogout();
-}
-
-function selectCourseSession(courseSession: CourseSession) {
-  courseSessionsStore.switchCourseSession(courseSession);
-}
-
 function popoverClick(event: Event) {
   if (breakpoints.smaller("lg").value) {
     event.preventDefault();
@@ -96,11 +64,7 @@ onMounted(() => {
         :show="state.showMobileProfileMenu"
         @closemodal="state.showMobileProfileMenu = false"
       >
-        <AccountMenuContent
-          :course-sessions="courseSessionsStore.currentCourseSessions"
-          :user="userStore"
-          @logout="logout"
-        />
+        <AccountMent />
       </ItFullScreenModal>
     </Teleport>
     <Transition name="nav">
@@ -129,13 +93,14 @@ onMounted(() => {
                     <div
                       class="ml-1 border-l border-white pl-3 pr-10 text-2xl text-white"
                     >
-                      {{ $t("general.title") }}
+                      {{ t("general.title") }}
                     </div>
                   </router-link>
                 </div>
               </div>
 
               <div class="hidden space-x-8 lg:flex">
+                <!-- Navigation Links Desktop -->
                 <router-link
                   v-if="
                     inCourse() &&
@@ -146,7 +111,7 @@ onMounted(() => {
                   class="nav-item"
                   :class="{ 'nav-item--active': inCockpit() }"
                 >
-                  {{ $t("cockpit.title") }}
+                  {{ t("cockpit.title") }}
                 </router-link>
 
                 <router-link
@@ -155,7 +120,7 @@ onMounted(() => {
                   class="nav-item"
                   :class="{ 'nav-item--active': inLearningPath() }"
                 >
-                  {{ $t("general.learningPath") }}
+                  {{ t("general.learningPath") }}
                 </router-link>
 
                 <router-link
@@ -164,12 +129,13 @@ onMounted(() => {
                   class="nav-item"
                   :class="{ 'nav-item--active': inCompetenceProfile() }"
                 >
-                  {{ $t("competences.title") }}
+                  {{ t("competences.title") }}
                 </router-link>
               </div>
             </div>
 
             <div class="flex items-stretch justify-start space-x-8">
+              <!-- Notification Bell & Menu -->
               <div v-if="userStore.loggedIn" class="nav-item">
                 <NotificationPopover>
                   <template #toggleButtonContent>
@@ -217,15 +183,7 @@ onMounted(() => {
                       class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
                     >
                       <div class="p-4">
-                        <AccountMenuContent
-                          :course-sessions="courseSessionsStore.currentCourseSessions"
-                          :selected-course-session="
-                            courseSessionsStore.currentCourseSession.id
-                          "
-                          :user="userStore"
-                          @logout="logout"
-                          @select-course-session="selectCourseSession"
-                        />
+                        <AccountMenu />
                       </div>
                     </PopoverPanel>
                   </Popover>
diff --git a/client/src/utils/route.ts b/client/src/utils/route.ts
new file mode 100644
index 00000000..e5c0eb56
--- /dev/null
+++ b/client/src/utils/route.ts
@@ -0,0 +1,30 @@
+import { useRoute } from "vue-router";
+
+export function useRouteLookups() {
+  const route = useRoute();
+
+  function inCourse() {
+    return route.path.startsWith("/course/");
+  }
+
+  function inCockpit() {
+    const regex = new RegExp("/course/[^/]+/cockpit");
+    return regex.test(route.path);
+  }
+
+  function inLearningPath() {
+    const regex = new RegExp("/course/[^/]+/learn");
+    return regex.test(route.path);
+  }
+
+  function inCompetenceProfile() {
+    const regex = new RegExp("/course/[^/]+/competence");
+    return regex.test(route.path);
+  }
+
+  function inMediaLibrary() {
+    return route.path.startsWith("/media/");
+  }
+
+  return { inMediaLibrary, inCockpit, inLearningPath, inCompetenceProfile, inCourse };
+}