fix: update jsons for api usage

Author: 4rthurCai

src/composables/useCourses.js

@@ -1,4 +1,5 @@
 import { ref, reactive } from "vue";
+import { apiFetch } from "../utils/api";
 
 export function useCourses() {
   const courses = ref([]);
@@ -27,7 +28,7 @@ export function useCourses() {
 
   const fetchDepartments = async () => {
     try {
-      const response = await fetch("/api/departments/");
+      const response = await apiFetch("/api/departments/");
       if (!response.ok) throw new Error("Failed to fetch departments");
       departments.value = await response.json();
     } catch (e) {
@@ -49,7 +50,7 @@ export function useCourses() {
     params.append("page", pagination.current_page);
 
     try {
-      const response = await fetch(`/api/courses/?${params.toString()}`);
+      const response = await apiFetch(`/api/courses/?${params.toString()}`);
       if (!response.ok) {
         const errorData = await response
           .json()
@@ -59,11 +60,11 @@ export function useCourses() {
         );
       }
       const data = await response.json();
-      courses.value = data.courses;
-      pagination.current_page = data.pagination.current_page;
-      pagination.total_pages = data.pagination.total_pages;
-      pagination.total_courses = data.pagination.total_courses;
-      pagination.limit = data.pagination.limit;
+      // DRF 标准分页格式: { count, next, previous, results }
+      courses.value = data.results || [];
+      const totalCount = data.count || 0;
+      pagination.total_courses = totalCount;
+      pagination.total_pages = Math.ceil(totalCount / pagination.limit) || 1;
     } catch (e) {
       console.error("useCourses: Error fetching courses:", e);
       error.value = e.message;

src/composables/useReviews.js

@@ -1,5 +1,6 @@
 import { ref } from "vue";
 import { getCookie } from "../utils/cookies";
+import { apiFetch } from "../utils/api";
 
 export function useReviews() {
   const loading = ref(false);
@@ -8,7 +9,9 @@ export function useReviews() {
   const fetchUserReview = async (courseId) => {
     if (!courseId) return null;
     try {
-      const response = await fetch(`/api/course/${courseId}/my-review/`);
+      const response = await apiFetch(
+        `/api/courses/${courseId}/reviews/?author=me`,
+      );
       if (response.ok) {
         const data = await response.json();
         return Array.isArray(data) ? data[0] : data;
@@ -29,7 +32,7 @@ export function useReviews() {
 
   const submitReview = async (courseId, newReview) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/`, {
+      const response = await apiFetch(`/api/courses/${courseId}/reviews/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -48,17 +51,17 @@ export function useReviews() {
     }
   };
 
-  const deleteReview = async (courseId) => {
+  const deleteReview = async (reviewId) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/review/`, {
+      const response = await apiFetch(`/api/reviews/${reviewId}/`, {
         method: "DELETE",
         headers: { "X-CSRFToken": getCookie("csrftoken") },
       });
-      if (!response.ok) {
+      if (!response.ok && response.status !== 204) {
         const errorData = await response.json().catch(() => null);
         throw new Error(errorData?.detail || "Failed to delete review");
       }
-      return await response.json();
+      return true;
     } catch (e) {
       console.error("useReviews: deleteReview error", e);
       throw e;
@@ -67,7 +70,7 @@ export function useReviews() {
 
   const vote = async (courseId, value, forLayup) => {
     try {
-      const response = await fetch(`/api/course/${courseId}/vote/`, {
+      const response = await apiFetch(`/api/courses/${courseId}/vote/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -85,7 +88,7 @@ export function useReviews() {
 
   const voteOnReview = async (reviewId, isKudos) => {
     try {
-      const response = await fetch(`/api/review/${reviewId}/vote/`, {
+      const response = await apiFetch(`/api/reviews/${reviewId}/vote/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

src/utils/api.js

@@ -1,8 +1,14 @@
 // Lightweight API utilities used across components
 // checkAuthentication: returns a boolean indicating auth status
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "";
+
+export async function apiFetch(path, options = {}) {
+  return fetch(`${API_BASE_URL}${path}`, options);
+}
+
 export async function checkAuthentication() {
   try {
-    const response = await fetch("/api/user/status/");
+    const response = await apiFetch("/api/user/status/");
     if (response.ok) {
       const data = await response.json();
       return !!data.isAuthenticated;
@@ -14,4 +20,4 @@ export async function checkAuthentication() {
   }
 }
 
-export default { checkAuthentication };
+export default { apiFetch, checkAuthentication };