ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor learningPathStore to use setup syntax

This commit is contained in:
Daniel Egger 2023-03-31 23:49:01 +02:00
parent 26b986b732
commit a0f9e0dfee
2 changed files with 70 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/pages/learningPath/LearningPathPage.vue
View File

@ -38,9 +38,9 @@ onMounted(async () => {
}); });
const learningPath = computed(() => { const learningPath = computed(() => {
if (userStore.loggedIn && learningPathStore.learningPaths.size > 0) { if (userStore.loggedIn && learningPathStore.state.learningPaths.size > 0) {
const learningPathKey = `${props.courseSlug}-lp-${userStore.id}`; const learningPathKey = `${props.courseSlug}-lp-${userStore.id}`;
return learningPathStore.learningPaths.get(learningPathKey); return learningPathStore.state.learningPaths.get(learningPathKey);
} }
return undefined; return undefined;
}); });

41
client/src/stores/learningPath.ts
View File

@ -6,10 +6,10 @@ import { useUserStore } from "@/stores/user";
import type { CourseCompletion } from "@/types"; import type { CourseCompletion } from "@/types";
import cloneDeep from "lodash/cloneDeep"; import cloneDeep from "lodash/cloneDeep";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { computed, reactive } from "vue";
export type LearningPathStoreState = { export type LearningPathStoreState = {
learningPaths: Map<string, LearningPath>; learningPaths: Map<string, LearningPath>;
page: "INDEX" | "OVERVIEW"; page: "INDEX" | "OVERVIEW";
}; };
@ -22,17 +22,13 @@ function getLearningPathKey(
return `${slug}-${userId}`; return `${slug}-${userId}`;
} }
export const useLearningPathStore = defineStore({ export const useLearningPathStore = defineStore("learningPath", () => {
id: "learningPath", const state: LearningPathStoreState = reactive({
state: () => {
return {
learningPaths: new Map<LearningPathKey, LearningPath>(), learningPaths: new Map<LearningPathKey, LearningPath>(),
page: "INDEX", page: "INDEX",
loading: false, });
} as LearningPathStoreState;
}, const learningPathForUser = computed(() => {
getters: {
learningPathForUser: (state) => {
return (courseSlug: string, userId: string | number | undefined) => { return (courseSlug: string, userId: string | number | undefined) => {
if (state.learningPaths.size > 0) { if (state.learningPaths.size > 0) {
const learningPathKey = getLearningPathKey(`${courseSlug}-lp`, userId); const learningPathKey = getLearningPathKey(`${courseSlug}-lp`, userId);
@ -41,10 +37,9 @@ export const useLearningPathStore = defineStore({
return undefined; return undefined;
}; };
}, });
},
actions: { async function loadCompletionData(
async loadCompletionData(
courseSlug: string, courseSlug: string,
userId: number | undefined = undefined userId: number | undefined = undefined
) { ) {
@ -64,8 +59,9 @@ export const useLearningPathStore = defineStore({
} }
return []; return [];
}, }
async loadLearningPath(
async function loadLearningPath(
slug: string, slug: string,
userId: number | undefined = undefined, userId: number | undefined = undefined,
reload = false, reload = false,
@ -78,8 +74,8 @@ export const useLearningPathStore = defineStore({
const key = getLearningPathKey(slug, userId); const key = getLearningPathKey(slug, userId);
if (this.learningPaths.has(key) && !reload) { if (state.learningPaths.has(key) && !reload) {
return this.learningPaths.get(key); return state.learningPaths.get(key);
} }
const learningPathData = await itGetCached(`/api/course/page/${slug}/`); const learningPathData = await itGetCached(`/api/course/page/${slug}/`);
@ -87,7 +83,7 @@ export const useLearningPathStore = defineStore({
throw `No learning path found with: ${slug}`; throw `No learning path found with: ${slug}`;
} }
const completionData = await this.loadCompletionData( const completionData = await loadCompletionData(
learningPathData.course.slug, learningPathData.course.slug,
userId userId
); );
@ -97,8 +93,9 @@ export const useLearningPathStore = defineStore({
completionData, completionData,
userId userId
); );
this.learningPaths.set(key, learningPath); state.learningPaths.set(key, learningPath);
return learningPath; return learningPath;
}, }
},
return { state, learningPathForUser, loadCompletionData, loadLearningPath };
}); });