Add comments for documentation

client/src/App.vue

@@ -30,8 +30,10 @@ onMounted(() => {
   log.debug("App mounted");
 
   eventBus.on("switchedCourseSession", () => {
-    // FIXME: clean up with VBV-305
+    // Rerender the component tree, when the course session gets switched.
+    // Mainly so that the `useCurrentCourseSession` composable gets re-evaluated
     componentKey.value++;
+    log.info("Switched course session, re-evaluate component tree");
   });
 });
 </script>

client/src/composables.ts

@@ -1,16 +1,29 @@
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { CourseSession } from "@/types";
+import log from "loglevel";
 import { computed } from "vue";
 
 export function useCurrentCourseSession(): CourseSession {
+  /**
+   * We often need the current course session in our components.
+   * With this composable we can get it easily.
+   * ATTENTION: The value is not reactive! So the components need to be re-rendered
+   * when the value changes. This is currently done with the "switchedCourseSession"
+   * event handler in the App.vue component.
+   */
   const store = useCourseSessionsStore();
   const currentCourseSession = computed(() => store.currentCourseSession);
 
-  // This will always return a defined value, but you should still handle the case where currentCourseSession is undefined in the store.
   if (!currentCourseSession.value) {
-    throw new Error("currentCourseSession is not defined in the store");
+    log.error(
+      "currentCourseSession is only defined in pages with :courseSlug in the route"
+    );
+    throw new Error(
+      `currentCourseSession is not defined in the store. 
+      It is only defined in pages with :courseSlug in the route`
+    );
   } else {
-    // return a non-reactive copy of the value
+    // return a NON-REACTIVE copy of the value (read above)
     return currentCourseSession.value;
   }
 }

client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue

@@ -80,7 +80,7 @@ onMounted(async () => {
   // noinspection TypeScriptValidateTypes
   await upsertAssignmentCompletionMutation.executeMutation({
     assignmentId: props.learningContent.content_assignment_id.toString(),
-    courseSessionId: courseSessionsStore.currentCourseSession!.id.toString(),
+    courseSessionId: courseSession.id.toString(),
     completionDataString: JSON.stringify({}),
     completionStatus: "IN_PROGRESS",
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -109,9 +109,6 @@ const showExitButton = computed(() => numPages.value === stepIndex.value + 1);
 const dueDate = computed(() =>
   dayjs(state.courseSessionAssignmentDetails?.submissionDeadlineDateTimeUtc)
 );
-const courseSessionId = computed(
-  () => courseSessionsStore.currentCourseSession?.id ?? 0
-);
 const currentTask = computed(() => {
   if (stepIndex.value > 0 && stepIndex.value <= numTasks.value) {
     return assignment.value?.tasks[stepIndex.value - 1];
@@ -154,7 +151,7 @@ const getTitle = () => {
 };
 
 const assignmentUser = computed(() => {
-  return (courseSessionsStore.currentCourseSession?.users ?? []).find(
+  return courseSession.users.find(
     (user) => user.user_id === Number(userStore.id)
   ) as CourseSessionUser;
 });
@@ -199,7 +196,7 @@ const assignmentUser = computed(() => {
               :due-date="dueDate"
               :assignment="assignment"
               :assignment-completion="assignmentCompletion"
-              :course-session-id="courseSessionId!"
+              :course-session-id="courseSession.id"
               @edit-task="jumpToTask($event)"
             ></AssignmentSubmissionView>
           </div>

client/src/router/guards.ts

@@ -43,3 +43,16 @@ export const expertRequired: NavigationGuard = (to: RouteLocationNormalized) =>
     return `/course/${courseSlug}/learn`;
   }
 };
+
+export async function handleCourseSessions(to: RouteLocationNormalized) {
+  // register after login hooks
+  const courseSessionsStore = useCourseSessionsStore();
+  if (to.params.courseSlug) {
+    courseSessionsStore._currentCourseSlug = to.params.courseSlug as string;
+  } else {
+    courseSessionsStore._currentCourseSlug = "";
+  }
+  if (!courseSessionsStore.loaded) {
+    await courseSessionsStore.loadCourseSessionsData();
+  }
+}

client/src/router/index.ts

@@ -1,7 +1,10 @@
 import DashboardPage from "@/pages/DashboardPage.vue";
 import LoginPage from "@/pages/LoginPage.vue";
-import { redirectToLoginIfRequired, updateLoggedIn } from "@/router/guards";
+import {
-import { useCourseSessionsStore } from "@/stores/courseSessions";
+  handleCourseSessions,
+  redirectToLoginIfRequired,
+  updateLoggedIn,
+} from "@/router/guards";
 import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
@@ -181,19 +184,7 @@ const router = createRouter({
 router.beforeEach(updateLoggedIn);
 router.beforeEach(redirectToLoginIfRequired);
 
-router.beforeEach(async (to) => {
+// register after login hooks
-  // register after login hooks
+router.beforeEach(handleCourseSessions);
-  const courseSessionsStore = useCourseSessionsStore();
-  if (to.params.courseSlug) {
-    courseSessionsStore._currentCourseSlug = to.params.courseSlug as string;
-    if (!courseSessionsStore.loaded) {
-      await courseSessionsStore.loadCourseSessionsData();
-    }
-  } else {
-    courseSessionsStore._currentCourseSlug = "";
-    // load async
-    courseSessionsStore.loadCourseSessionsData();
-  }
-});
 
 export default router;

client/src/stores/courseSessions.ts

@@ -17,12 +17,6 @@ import { computed, ref } from "vue";
 import { useCircleStore } from "./circle";
 import { useUserStore } from "./user";
 
-export type LearningSequenceCircleDocument = {
-  id: number;
-  title: string;
-  documents: CircleDocument[];
-};
-
 const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessionMap";
 
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
@@ -96,7 +90,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   function switchCourseSession(courseSession: CourseSession) {
     log.debug("switchCourseSession", courseSession);
     selectedCourseSessionMap.value.set(courseSession.course.slug, courseSession.id);
-    // FIXME: clean up with VBV-305
+    // Emit event so that the App can re-render with the new courseSession
     eventBus.emit("switchedCourseSession", courseSession.id);
   }
 

client/src/utils/eventBus.ts

@@ -1,8 +1,9 @@
 import mitt from "mitt";
 
 export type MittEvents = {
-  // FIXME: clean up with VBV-305
+  // event needed so that the App components do re-render when the course session changes
   switchedCourseSession: number;
+
   finishedLearningContent: boolean;
 };