diff --git a/client/src/stores/competence.ts b/client/src/stores/competence.ts index 2941774f..f0e87bb3 100644 --- a/client/src/stores/competence.ts +++ b/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) { diff --git a/client/src/stores/completion.ts b/client/src/stores/completion.ts index 04b81471..ae4d1ded 100644 --- a/client/src/stores/completion.ts +++ b/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; }; export const useCompletionStore = defineStore({ id: "completion", state: () => { return { - completionData: undefined, + completionStore: new Map(), } as CompletionStoreState; }, getters: {}, actions: { - async loadCompletionData(courseId: number, reload = false) { - this.completionData = await itGetCached(`/api/course/completion/${courseId}/`, { - reload: reload, - }); + async loadCompletionData(courseId: number, userId: number, reload = false) { + const userCompletionData = await itGetCached( + `/api/course/completion/${courseId}/${userId}/`, + { + reload: reload, + } + ); - if (!this.completionData) { - throw `No completionData found with: ${courseId}`; + if (userCompletionData === undefined) { + 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) || []; }, }, }); diff --git a/client/src/stores/learningPath.ts b/client/src/stores/learningPath.ts index f836469e..8683c781 100644 --- a/client/src/stores/learningPath.ts +++ b/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); diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts index bdf82349..d269530f 100644 --- a/client/src/stores/user.ts +++ b/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 !== "") {