Try to reload data with event bus event

client/package-lock.json

@@ -19,6 +19,7 @@
         "graphql": "^16.6.0",
         "lodash": "^4.17.21",
         "loglevel": "^1.8.0",
+        "mitt": "^3.0.0",
         "pinia": "^2.0.21",
         "vue": "^3.2.38",
         "vue-i18n": "^9.2.2",
@@ -14025,6 +14026,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -29582,6 +29588,11 @@
         }
       }
     },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",

client/package.json

@@ -29,6 +29,7 @@
     "graphql": "^16.6.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
+    "mitt": "^3.0.0",
     "pinia": "^2.0.21",
     "vue": "^3.2.38",
     "vue-i18n": "^9.2.2",

client/src/services/learningPath.ts

@@ -1,6 +1,7 @@
 import orderBy from "lodash/orderBy";
 
 import { Circle } from "@/services/circle";
+import { useLearningPathStore } from "@/stores/learningPath";
 import type {
   Course,
   CourseCompletion,
@@ -9,6 +10,8 @@ import type {
   Topic,
   WagtailLearningPath,
 } from "@/types";
+import eventBus from "@/utils/eventBus";
+import log from "loglevel";
 
 export interface ContinueData {
   url: string;
@@ -33,7 +36,8 @@ export class LearningPath implements WagtailLearningPath {
 
   public static fromJson(
     json: WagtailLearningPath,
-    completionData: CourseCompletion[]
+    completionData: CourseCompletion[],
+    userId: number | undefined
   ): LearningPath {
     return new LearningPath(
       json.id,
@@ -43,6 +47,7 @@ export class LearningPath implements WagtailLearningPath {
       json.frontend_url,
       json.course,
       json.children,
+      userId,
       completionData
     );
   }
@@ -55,6 +60,7 @@ export class LearningPath implements WagtailLearningPath {
     public readonly frontend_url: string,
     public readonly course: Course,
     public children: LearningPathChild[],
+    public userId: number | undefined,
     completionData?: CourseCompletion[]
   ) {
     // parse children
@@ -94,6 +100,24 @@ export class LearningPath implements WagtailLearningPath {
     if (completionData) {
       this.calcNextLearningContent(completionData);
     }
+
+    if (userId) {
+      eventBus.on("switchedCourseSession", (courseSession) => {
+        log.debug("handle switchedCourseSession", courseSession);
+        this.reloadCompletionData();
+      });
+    }
+  }
+
+  public async reloadCompletionData() {
+    const learningPathStore = useLearningPathStore();
+    const completionData = await learningPathStore.loadCompletionData(
+      this.course.slug,
+      this.userId
+    );
+    for (const circle of this.circles) {
+      circle.parseCompletionData(completionData);
+    }
   }
 
   public calcNextLearningContent(completionData: CourseCompletion[]): void {

client/src/stores/courseSessions.ts

@@ -6,6 +6,7 @@ import type {
   CourseSessionUser,
   ExpertSessionUser,
 } from "@/types";
+import eventBus from "@/utils/eventBus";
 import { useLocalStorage } from "@vueuse/core";
 import uniqBy from "lodash/uniqBy";
 import log from "loglevel";
@@ -95,7 +96,9 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   }
 
   function switchCourseSession(courseSession: CourseSession) {
+    log.debug("switchCourseSession", courseSession);
     selectedCourseSessionMap.value.set(courseSession.course.slug, courseSession.id);
+    eventBus.emit("switchedCourseSession", courseSession.id);
   }
 
   function courseSessionForCourse(courseSlug: string) {

client/src/stores/learningPath.ts

@@ -44,6 +44,27 @@ export const useLearningPathStore = defineStore({
     },
   },
   actions: {
+    async loadCompletionData(
+      courseSlug: string,
+      userId: number | undefined = undefined
+    ) {
+      const completionStore = useCompletionStore();
+
+      let completionData: CourseCompletion[] = [];
+      if (userId) {
+        const courseSessionsStore = useCourseSessionsStore();
+        const courseSession = courseSessionsStore.courseSessionForCourse(courseSlug);
+        if (courseSession) {
+          completionData = await completionStore.loadCompletionData(
+            courseSession.id,
+            userId
+          );
+          return completionData;
+        }
+      }
+
+      return [];
+    },
     async loadLearningPath(
       slug: string,
       userId: number | undefined = undefined,
@@ -66,25 +87,15 @@ export const useLearningPathStore = defineStore({
         throw `No learning path found with: ${slug}`;
       }
 
-      const completionStore = useCompletionStore();
+      const completionData = await this.loadCompletionData(
-
+        learningPathData.course.slug,
-      let completionData: CourseCompletion[] = [];
+        userId
-      if (userId) {
+      );
-        const courseSessionsStore = useCourseSessionsStore();
-        const courseSession = courseSessionsStore.courseSessionForCourse(
-          learningPathData.course.slug
-        );
-        if (courseSession) {
-          completionData = await completionStore.loadCompletionData(
-            courseSession.id,
-            userId
-          );
-        }
-      }
 
       const learningPath = LearningPath.fromJson(
         cloneDeep(learningPathData),
-        completionData
+        completionData,
+        userId
       );
       this.learningPaths.set(key, learningPath);
       return learningPath;

client/src/utils/eventBus.ts

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+
+export type MittEvents = {
+  switchedCourseSession: number;
+};
+
+const eventBus = mitt<MittEvents>();
+
+export default eventBus;