Refactor learningPathStore to use setup syntax

client/src/pages/learningPath/LearningPathPage.vue

@@ -38,9 +38,9 @@ onMounted(async () => {
 });
 
 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}`;
-    return learningPathStore.learningPaths.get(learningPathKey);
+    return learningPathStore.state.learningPaths.get(learningPathKey);
   }
   return undefined;
 });

client/src/stores/learningPath.ts

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