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,83 +22,80 @@ function getLearningPathKey(
   return `${slug}-${userId}`;
 }
 
-export const useLearningPathStore = defineStore({
-  id: "learningPath",
-  state: () => {
-    return {
-      learningPaths: new Map<LearningPathKey, LearningPath>(),
-      page: "INDEX",
-      loading: false,
-    } as LearningPathStoreState;
-  },
-  getters: {
-    learningPathForUser: (state) => {
-      return (courseSlug: string, userId: string | number | undefined) => {
-        if (state.learningPaths.size > 0) {
-          const learningPathKey = getLearningPathKey(`${courseSlug}-lp`, userId);
-          return state.learningPaths.get(learningPathKey);
-        }
+export const useLearningPathStore = defineStore("learningPath", () => {
+  const state: LearningPathStoreState = reactive({
+    learningPaths: new Map<LearningPathKey, LearningPath>(),
+    page: "INDEX",
+  });
 
-        return undefined;
-      };
-    },
-  },
-  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;
-        }
+  const learningPathForUser = computed(() => {
+    return (courseSlug: string, userId: string | number | undefined) => {
+      if (state.learningPaths.size > 0) {
+        const learningPathKey = getLearningPathKey(`${courseSlug}-lp`, userId);
+        return state.learningPaths.get(learningPathKey);
       }
 
-      return [];
-    },
-    async loadLearningPath(
-      slug: string,
-      userId: number | undefined = undefined,
-      reload = false,
-      fail = true
-    ) {
-      if (!userId) {
-        const userStore = useUserStore();
-        userId = userStore.id;
+      return undefined;
+    };
+  });
+
+  async function 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;
       }
+    }
 
-      const key = getLearningPathKey(slug, userId);
+    return [];
+  }
 
-      if (this.learningPaths.has(key) && !reload) {
-        return this.learningPaths.get(key);
-      }
+  async function loadLearningPath(
+    slug: string,
+    userId: number | undefined = undefined,
+    reload = false,
+    fail = true
+  ) {
+    if (!userId) {
+      const userStore = useUserStore();
+      userId = userStore.id;
+    }
 
-      const learningPathData = await itGetCached(`/api/course/page/${slug}/`);
-      if (!learningPathData && fail) {
-        throw `No learning path found with: ${slug}`;
-      }
+    const key = getLearningPathKey(slug, userId);
 
-      const completionData = await this.loadCompletionData(
-        learningPathData.course.slug,
-        userId
-      );
+    if (state.learningPaths.has(key) && !reload) {
+      return state.learningPaths.get(key);
+    }
 
-      const learningPath = LearningPath.fromJson(
-        cloneDeep(learningPathData),
-        completionData,
-        userId
-      );
-      this.learningPaths.set(key, learningPath);
-      return learningPath;
-    },
-  },
+    const learningPathData = await itGetCached(`/api/course/page/${slug}/`);
+    if (!learningPathData && fail) {
+      throw `No learning path found with: ${slug}`;
+    }
+
+    const completionData = await loadCompletionData(
+      learningPathData.course.slug,
+      userId
+    );
+
+    const learningPath = LearningPath.fromJson(
+      cloneDeep(learningPathData),
+      completionData,
+      userId
+    );
+    state.learningPaths.set(key, learningPath);
+    return learningPath;
+  }
+
+  return { state, learningPathForUser, loadCompletionData, loadLearningPath };
 });