VBV-302: Add course session switch

client/src/components/header/AccountMenuContent.vue

@@ -2,23 +2,13 @@
 import IconLogout from "@/components/icons/IconLogout.vue";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
 
 const props = defineProps<{
   courseSessions: CourseSession[];
   user: UserState | undefined;
 }>();
 
-const emits = defineEmits(["closemodal", "logout"]);
-
-const clickLink = (to: string | undefined) => {
-  if (to) {
-    router.push(to);
-    emits("closemodal");
-  }
-};
+const emits = defineEmits(["selectCourseSession", "logout"]);
 </script>
 
 <template>
@@ -44,7 +34,7 @@ const clickLink = (to: string | undefined) => {
 
     <div v-if="props.courseSessions.length" class="border-b py-4">
       <div v-for="cs in props.courseSessions" :key="cs.id">
-        {{ cs.title }}
+        <button @click="$emit('selectCourseSession', cs)">{{ cs.title }}</button>
       </div>
     </div>
 

client/src/components/header/MainNavigationBar.vue

@@ -9,6 +9,7 @@ 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 { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
@@ -56,6 +57,10 @@ function logout() {
   userStore.handleLogout();
 }
 
+function selectCourseSession(courseSession: CourseSession) {
+  courseSessionsStore.switchCourseSession(courseSession);
+}
+
 function popoverClick(event) {
   if (breakpoints.smaller("lg").value) {
     event.preventDefault();
@@ -216,6 +221,7 @@ onMounted(() => {
                           :course-sessions="courseSessionsStore.courseSessionsForRoute"
                           :user="userStore"
                           @logout="logout"
+                          @select-course-session="selectCourseSession"
                         />
                       </div>
                     </PopoverPanel>

client/src/stores/courseSessions.ts

@@ -6,6 +6,7 @@ import type {
   CourseSessionUser,
   ExpertSessionUser,
 } from "@/types";
+import { useLocalStorage } from "@vueuse/core";
 import uniqBy from "lodash/uniqBy";
 import log from "loglevel";
 import { defineStore } from "pinia";
@@ -14,17 +15,13 @@ import { useRoute } from "vue-router";
 import { useCircleStore } from "./circle";
 import { useUserStore } from "./user";
 
-export type CourseSessionsStoreState = {
-  courseSessions: CourseSession[] | undefined;
-};
-
 export type LearningSequenceCircleDocument = {
   id: number;
   title: string;
   documents: CircleDocument[];
 };
 
-const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessions";
+const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessionMap";
 
 function loadCourseSessionsData(reload = false) {
   log.debug("loadCourseSessionsData called");
@@ -70,6 +67,10 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   // store should do own setup, we don't want to have each component initialize it
   // that's why we call the load function in here
   const { courseSessions } = loadCourseSessionsData();
+  const selectedCourseSessionMap = useLocalStorage(
+    SELECTED_COURSE_SESSIONS_KEY,
+    new Map<string, number>()
+  );
 
   // these will become getters
   const userCourses = computed(() =>
@@ -80,15 +81,11 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
 
   function selectedCourseSessionForCourse(courseSlug: string) {
     try {
-      const data = window.localStorage.getItem(SELECTED_COURSE_SESSIONS_KEY);
-      if (data) {
-        const map = new Map(JSON.parse(data));
-        const courseSessionId = map.get(courseSlug);
-        if (courseSessionId) {
-          return courseSessions.value.find((cs) => {
-            return cs.id === courseSessionId;
-          });
-        }
+      const courseSessionId = selectedCourseSessionMap.value.get(courseSlug);
+      if (courseSessionId) {
+        return courseSessions.value.find((cs) => {
+          return cs.id === courseSessionId;
+        });
       }
     } catch (e) {
       log.error("Error while parsing courseSessions from localStorage", e);
@@ -97,6 +94,10 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return undefined;
   }
 
+  function switchCourseSession(courseSession: CourseSession) {
+    selectedCourseSessionMap.value.set(courseSession.course.slug, courseSession.id);
+  }
+
   function courseSessionForCourse(courseSlug: string) {
     if (courseSlug) {
       const courseSession = selectedCourseSessionForCourse(courseSlug);
@@ -219,6 +220,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     courseSessionForRoute,
     courseSessionsForRoute,
     courseSessionsForCourse,
+    switchCourseSession,
     hasCockpit,
     canUploadCircleDocuments,
     circleDocuments,