Load completion data for user

client/src/stores/competence.ts

@@ -1,5 +1,6 @@
 import { itGetCached } from "@/fetchHelpers";
 import { useCompletionStore } from "@/stores/completion";
+import { useUserStore } from "@/stores/user";
 import type {
   CircleLight,
   CompetencePage,
@@ -109,10 +110,13 @@ export const useCompetenceStore = defineStore({
       return this.competenceProfilePage;
     },
     async parseCompletionData() {
-      if (this.competenceProfilePage) {
+      const userStore = useUserStore();
+
+      if (this.competenceProfilePage && userStore.loggedIn) {
         const completionStore = useCompletionStore();
         const completionData = await completionStore.loadCompletionData(
-          this.competenceProfilePage.course.id
+          this.competenceProfilePage.course.id,
+          userStore.id
         );
 
         if (completionData) {

client/src/stores/completion.ts

@@ -3,41 +3,46 @@ import type { BaseCourseWagtailPage, CourseCompletion } from "@/types";
 import { defineStore } from "pinia";
 
 export type CompletionStoreState = {
-  completionData: CourseCompletion[] | undefined;
+  completionStore: Map<number, CourseCompletion[]>;
 };
 
 export const useCompletionStore = defineStore({
   id: "completion",
   state: () => {
     return {
-      completionData: undefined,
+      completionStore: new Map(),
     } as CompletionStoreState;
   },
   getters: {},
   actions: {
-    async loadCompletionData(courseId: number, reload = false) {
+    async loadCompletionData(courseId: number, userId: number, reload = false) {
-      this.completionData = await itGetCached(`/api/course/completion/${courseId}/`, {
+      const userCompletionData = await itGetCached(
-        reload: reload,
+        `/api/course/completion/${courseId}/${userId}/`,
-      });
+        {
+          reload: reload,
+        }
+      );
 
-      if (!this.completionData) {
+      if (userCompletionData === undefined) {
-        throw `No completionData found with: ${courseId}`;
+        throw `No completionData found with: ${courseId}, ${userId}`;
       }
 
-      return this.completionData || [];
+      this.completionStore.set(userId, userCompletionData);
+
+      return this.completionStore.get(userId) || [];
     },
-    async markPage(page: BaseCourseWagtailPage) {
+    async markPage(page: BaseCourseWagtailPage, userId: number) {
       const completionData = await itPost("/api/course/completion/mark/", {
         page_key: page.translation_key,
         completion_status: page.completion_status,
       });
 
       if (completionData && completionData.length > 0) {
-        this.completionData = completionData;
+        this.completionStore.set(userId, completionData);
         bustItGetCache(`/api/course/completion/${completionData[0].course}/`);
       }
 
-      return this.completionData || [];
+      return this.completionStore.get(userId) || [];
     },
   },
 });

client/src/stores/learningPath.ts

@@ -1,6 +1,7 @@
 import { itGetCached } from "@/fetchHelpers";
 import { LearningPath } from "@/services/learningPath";
 import { useCompletionStore } from "@/stores/completion";
+import { useUserStore } from "@/stores/user";
 import { defineStore } from "pinia";
 
 export type LearningPathStoreState = {
@@ -35,10 +36,12 @@ export const useLearningPathStore = defineStore({
         throw `No learning path found with: ${slug}`;
       }
 
-      if (learningPathData) {
+      const userStore = useUserStore();
+      if (learningPathData && userStore.loggedIn) {
         lastSlug = slug;
         const completionData = await completionStore.loadCompletionData(
-          learningPathData.course.id
+          learningPathData.course.id,
+          userStore.id
         );
 
         this.learningPath = LearningPath.fromJson(learningPathData, completionData);

client/src/stores/user.ts

@@ -9,6 +9,7 @@ const logoutRedirectUrl = import.meta.env.VITE_LOGOUT_REDIRECT;
 // typed state https://stackoverflow.com/questions/71012513/when-using-pinia-and-typescript-how-do-you-use-an-action-to-set-the-state
 
 export type UserState = {
+  id: number;
   first_name: string;
   last_name: string;
   email: string;
@@ -18,6 +19,7 @@ export type UserState = {
 };
 
 const initialUserState: UserState = {
+  id: 0,
   email: "",
   first_name: "",
   last_name: "",
@@ -56,9 +58,9 @@ export const useUserStore = defineStore({
       }
     },
     handleLogout() {
-      itPost("/api/core/logout/", {}).then((data) => {
+      Object.assign(this, initialUserState);
-        Object.assign(this, initialUserState);
 
+      itPost("/api/core/logout/", {}).then((data) => {
         let redirectUrl;
 
         if (logoutRedirectUrl !== "") {