[KTP-66] Student Course Page API endpoints in Front End

frontend/src/pages/CourseContentPage.vue

@@ -36,6 +36,7 @@
 import { useStore } from "vuex";
 import ModuleList from "@/components/ModuleList.vue";
 import VideoPlayer from "@/components/VideoPlayer.vue";
+import { putData } from "@/services/api.js"
 
 export default {
   components: { ModuleList, VideoPlayer },
@@ -82,9 +83,19 @@ export default {
     selectLesson(selectedLesson) {
       this.selectedLesson = selectedLesson;
     },
-    markLessonAsCompleted() {
-        // TODO: call API endpoint to POST this change
-        console.log('marked')
+    async markLessonAsCompleted() {
+      try {
+        // Call the API and wait for the response
+        const response = await putData("/course/update", this.course);
+
+        console.log("Response from server to mark lesson as completed:", response);
+
+        // Update it in real time
+        this.selectedLesson.isCompleted = true;
+        console.log("Marked lesson as completed.");
+      } catch (error) {
+        console.error("Error marking lesson as complete:", error);
+      }    
     }
   },
 };

frontend/src/services/api.js

@@ -38,7 +38,7 @@ api.interceptors.response.use(
 export const fetchData = async (endpoint, DTO) => {
   try {
     const response = await api.get(endpoint);
-    return response.data.map((item) => new DTO(item));
+    return new DTO(response.data);
   } catch (error) {
     console.error(`Error fetching data from ${endpoint}:`, error);
     throw error;
@@ -54,3 +54,13 @@ export const postData = async (endpoint, data) => {
     throw error;
   }
 };
+
+export const putData = async (endpoint, data) => {
+  try {
+    const response = await api.put(endpoint, data);
+    return response.data;
+  } catch (error) {
+    console.error(`Error putting data to ${endpoint}:`, error);
+    throw error;
+  }
+};

frontend/src/services/dtos/CourseContentDTO.js

@@ -2,38 +2,39 @@
 
 // Define a class for the lesson
 class Lesson {
-    constructor(title, lessonContent, isCompleted) {
-      this.title = title;
-      this.lessonContent = lessonContent;
-      this.isCompleted = isCompleted
+    constructor(data) {
+      this.title = data.title;
+      this.lessonContent = data.lessonContent;
+      this.isCompleted = data.isCompleted;
     }
   }
 
   // Define a class for the module
   class Module {
-    constructor(title, lessons = []) {
-      this.title = title;
-      this.lessons = lessons; // Array of Lesson objects
+    constructor(data) {
+      this.title = data.title;
+      // Array of Lesson objects
+      this.lessons = data.lessons.map((lessonItem) => new Lesson(lessonItem));
     }
 
     addLesson(lesson) {
-        console.log('Current lessons:', this.lessons);
       this.lessons.push(lesson);
     }
   }
 
   // Define the main course class
   class CourseContentDTO {
-    constructor(id, title, modules = []) {
-      this.id = id;
-      this.title = title;
-      this.modules = modules; // Array of Module objects
+    constructor(data) {
+      this.id = data.id;
+      this.title = data.title;
+      // Array of Module objects
+      this.modules = data.modules.map((moduleItem) => new Module(moduleItem));
     }
     addModule(module) {
         this.modules.push(module);
     }
   }
 
-  // Export the DTO class
-  export { CourseContentDTO, Module, Lesson };
+// Export the DTO class
+export { CourseContentDTO, Module, Lesson };
 

frontend/src/store/index.js

@@ -1,7 +1,8 @@
 import { createStore } from "vuex";
 import { SearchResultDTO } from "@/services/dtos/SearchResultDTO";
 import { fetchCourses } from "@/services/searchApi";
-import { fetchCourseContent } from "@/services/courseContentService";
+import { fetchData } from "@/services/api";
+import { CourseContentDTO } from "@/services/dtos/CourseContentDTO";
 
 const store = createStore({
   state: {
@@ -89,10 +90,10 @@ const store = createStore({
         console.error("Failed to fetch courses:", error);
       }
     },  
-    async fetchCourseData(state, courseId) {
+    async fetchCourseData({ commit }, courseId) {
       try {
-        const course = await fetchCourseContent(courseId);
-        this.commit('setCourseData', course);
+        const course = await fetchData(`/course/content/${courseId}`, CourseContentDTO);
+        commit('setCourseData', course);
       } catch (error) {
         console.error('Failed to fetch course data:', error);
       }