Refactor course sessions store to use setup API

client/src/components/MainNavigationBar.vue

@@ -6,7 +6,7 @@ import IconSettings from "@/components/icons/IconSettings.vue";
 import MobileMenu from "@/components/MobileMenu.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";
 import { useAppStore } from "@/stores/app";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useSetupCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import type { DropdownListItem } from "@/types";
 import type { Component } from "vue";
@@ -26,7 +26,7 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
-const courseSessionsStore = useCourseSessionsStore();
+const courseSessionsStore = useSetupCourseSessionsStore();
 
 const { t } = useI18n();
 const state = reactive({ showMenu: false });
@@ -78,7 +78,8 @@ function logout() {
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
   if (userStore.loggedIn) {
-    courseSessionsStore.loadCourseSessionsData();
+    // fixme: only when i'm logged in? should this be handled in the store?
+    // courseSessionsStore.loadCourseSessionsData();
   }
 });
 

client/src/pages/DashboardPage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import Feedback from "@/components/Feedback.vue";
 import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useSetupCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import log from "loglevel";
 import { onMounted } from "vue";
@@ -9,7 +8,7 @@ import { onMounted } from "vue";
 log.debug("DashboardPage created");
 
 const userStore = useUserStore();
-const courseSessionsStore = useCourseSessionsStore();
+const courseSessionsStore = useSetupCourseSessionsStore();
 
 function employer() {
   return userStore.email === "bianca.muster@eiger-versicherungen.ch"
@@ -19,7 +18,6 @@ function employer() {
 
 onMounted(async () => {
   log.debug("DashboardPage mounted");
-  await courseSessionsStore.loadCourseSessionsData();
 });
 </script>
 

client/src/stores/courseSessions.ts

@@ -1,25 +1,82 @@
 import { itGetCached } from "@/fetchHelpers";
-import type { CourseSession } from "@/types";
+import type { CircleExpert, Course, CourseSession } from "@/types";
 import _ from "lodash";
 import log from "loglevel";
 
 import { defineStore } from "pinia";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useUserStore } from "./user";
 
-export type CourseSessionsStoreState = {
+function loadCourseSessionsData(reload = false) {
-  courseSessions: CourseSession[] | undefined;
+  log.debug("loadCourseSessionsData called");
-};
+  const courseSessions = ref<CourseSession[]>([]);
 
-export const useCourseSessionsStore = defineStore({
+  async function loadAndUpdate() {
+    courseSessions.value = await itGetCached(`/api/course/sessions/`, {
+      reload: reload,
+    });
+    if (!courseSessions.value) {
+      throw `No courseSessionData found for user`;
+    }
+  }
+
+  loadAndUpdate(); // this will be called asynchronously, but does not block
+
+  // returns the empty sessions array at first, then after loading populates the ref
+  return { courseSessions };
+}
+
+export const useSetupCourseSessionsStore = defineStore("courseSessionsSetup", () => {
+  // using setup function seems cleaner, see https://pinia.vuejs.org/core-concepts/#setup-stores
+
+  // this will become a state variable (like each other `ref()`
+
+  // 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();
+  // these will become getters
+  const coursesFromCourseSessions = computed(() =>
+    _.uniqBy(courseSessions.value, "course.id")
+  );
+  const courseSessionForRoute = computed(() => {
+    const route = useRoute();
+    const routePath = decodeURI(route.path);
+
+    return courseSessions.value.find((cs) => {
+      return routePath.startsWith(cs.course_url);
+    });
+  });
+  const hasCockpit = computed(() => {
+    if (courseSessionForRoute.value) {
+      const userStore = useUserStore();
+      return (
+        courseSessionForRoute.value.experts.filter(
+          (expert) => expert.user_id === userStore.id
+        ).length > 0
+      );
+    }
+
+    return false;
+  });
+
+  return {
+    courseSessions,
+    coursesFromCourseSessions,
+    courseSessionForRoute,
+    hasCockpit,
+  };
+});
+
+export const useOptionsCourseSessionsStore = defineStore({
   id: "courseSessions",
   state: () => {
     return {
-      courseSessions: undefined,
+      courseSessions: [] as CourseSession[],
-    } as CourseSessionsStoreState;
+    };
   },
   getters: {
-    courseSessionForRoute: (state) => {
+    courseSessionForRoute: (state): CourseSession | undefined => {
       const route = useRoute();
       const routePath = decodeURI(route.path);
       return state.courseSessions?.find((cs) => {

client/src/stores/user.ts

@@ -2,7 +2,7 @@ import * as log from "loglevel";
 
 import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
 import { useAppStore } from "@/stores/app";
-import { useCourseSessionsStore } from "@/stores/courseSessions";
+// import { useSetupCourseSessionsStore } from "@/stores/courseSessions";
 import { defineStore } from "pinia";
 
 const logoutRedirectUrl = import.meta.env.VITE_LOGOUT_REDIRECT;
@@ -77,8 +77,9 @@ export const useUserStore = defineStore({
       this.$state = data;
       this.loggedIn = true;
       appStore.userLoaded = true;
-      const courseSessionsStore = useCourseSessionsStore();
+      // todo: why?
-      await courseSessionsStore.loadCourseSessionsData();
+      // const courseSessionsStore = useCourseSessionsStore();
+      // await courseSessionsStore.loadCourseSessionsData();
     },
   },
 });