Replace all axios calls with baseService utilities

* Replace all `axios` calls in `blogs.js` with `baseService` utilities for consistency and code reuse

* Replace direct `axios` calls with `baseService`

* Replace `useCidReq` composable with `getCourseContext` utility throughout the codebase. Centralize course context resolution logic for consistency and reusability.

* Migrate remaining `fetch` calls to `baseService` for consistency and improved error handling. Add new service methods across the codebase.

* Automatically negotiate `Accept` headers in `axios` requests. Add request interceptor for consistent API responses and remove unnecessary `Accept` headers in service calls.

* Migrate all remaining `fetch` calls to `baseService` for improved consistency, error handling, and code reuse across the codebase.

* Remove `addContentType` parameter from `baseService.post` and update all method calls across the codebase for cleaner and more consistent API usage.

* Remove `utils/fetch.js` and fully migrate legacy fetch-based services to use `baseService` through Axios, improving consistency, error handling, and API response interoperability across the codebase.

* Add support for `skipCourseContext` config in `baseService` and API requests to allow global topbar widget requests outside course context

Author: AngelFQC

assets/vue/App.vue

@@ -86,7 +86,7 @@ import {
   watchEffect,
 } from "vue"
 import { useRoute, useRouter } from "vue-router"
-import axios from "axios"
+import api from "./config/api"
 import { capitalize, isEmpty } from "lodash"
 import ConfirmDialog from "primevue/confirmdialog"
 import { useSecurityStore } from "./store/securityStore"
@@ -307,7 +307,7 @@ onUpdated(() => {
   app.dataset.flashes = ""
 })
 
-axios.interceptors.response.use(
+api.interceptors.response.use(
   (r) => r,
   (error) => {
     const s = error?.response?.status

assets/vue/components/assignments/AssignmentsForm.vue

@@ -159,7 +159,7 @@ import useVuelidate from "@vuelidate/core"
 import { computed, reactive, ref, watchEffect } from "vue"
 import { maxValue, minValue, required } from "@vuelidate/validators"
 import { useI18n } from "vue-i18n"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import { useRoute } from "vue-router"
 import { RESOURCE_LINK_PUBLISHED } from "../../constants/entity/resourcelink"
 
@@ -177,7 +177,7 @@ const props = defineProps({
 const emit = defineEmits(["submit"])
 
 const { t } = useI18n()
-const { cid, sid, gid } = useCidReq()
+const { cid, sid, gid } = getCourseContext()
 const route = useRoute()
 
 const showAdvancedSettings = ref(false)

assets/vue/components/assignments/AssignmentsLayout.vue

@@ -6,14 +6,14 @@
 import { ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useI18n } from "vue-i18n"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import { useSecurityStore } from "../../store/securityStore"
 
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
 
-const { cid, sid, gid } = useCidReq()
+const { cid, sid, gid } = getCourseContext()
 const securityStore = useSecurityStore()
 
 const isCurrentTeacher = securityStore.isCurrentTeacher

assets/vue/components/assignments/MoveSubmissionModal.vue

@@ -48,7 +48,7 @@ import Button from "primevue/button"
 import Dialog from "primevue/dialog"
 import cStudentPublicationService from "../../services/cstudentpublication"
 import { useNotification } from "../../composables/notification"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 
 const props = defineProps({
   modelValue: Boolean,
@@ -57,7 +57,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(["update:modelValue", "moved"])
-const { cid, sid, gid } = useCidReq()
+const { cid, sid, gid } = getCourseContext()
 const { t } = useI18n()
 const notification = useNotification()
 

assets/vue/components/assignments/StudentAssignmentList.vue

@@ -80,7 +80,7 @@ import { ref, onMounted, nextTick, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { useFormatDate } from "../../composables/formatDate"
 import { useRoute, useRouter } from "vue-router"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import cStudentPublicationService from "../../services/cstudentpublication"
 import BaseIcon from "../basecomponents/BaseIcon.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
@@ -91,7 +91,7 @@ const { t, locale } = useI18n()
 const { abbreviatedDatetime } = useFormatDate()
 const router = useRouter()
 const route = useRoute()
-const { cid, sid, gid } = useCidReq()
+const { cid, sid, gid } = getCourseContext()
 
 const assignments = ref([])
 const loading = ref(false)

assets/vue/components/assignments/TeacherAssignmentList.vue

@@ -141,7 +141,7 @@ import Column from "primevue/column"
 import { computed, reactive, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import cStudentPublicationService from "../../services/cstudentpublication"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import { useFormatDate } from "../../composables/formatDate"
 import BaseTag from "../basecomponents/BaseTag.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
@@ -163,7 +163,7 @@ const selected = ref([])
 const loading = ref(false)
 const totalRecords = ref(0)
 
-const { cid, sid, gid } = useCidReq()
+const { cid, sid, gid } = getCourseContext()
 
 const notification = useNotification()
 

assets/vue/components/assignments/UppyModalUploader.vue

@@ -25,7 +25,7 @@ import { Dashboard } from "@uppy/vue"
 import Uppy from "@uppy/core"
 import Dialog from "primevue/dialog"
 import { useNotification } from "../../composables/notification"
-import axios from "axios"
+import cStudentPublicationService from "../../services/cstudentpublication"
 import "@uppy/core/dist/style.css"
 import "@uppy/dashboard/dist/style.css"
 
@@ -81,17 +81,9 @@ function setupUppy() {
       const formData = new FormData()
       formData.append("uploadFile", file.data)
 
-      const uploadUrl =
-        `/api/c_student_publication_corrections/upload` +
-        `?parentResourceNodeId=${props.parentResourceNodeId}` +
-        `&submissionId=${props.submissionId}` +
-        `&filetype=file`
-
-      await axios.post(uploadUrl, formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-          Accept: "application/json",
-        },
+      await cStudentPublicationService.uploadCorrection(formData, {
+        parentResourceNodeId: props.parentResourceNodeId,
+        submissionId: props.submissionId,
       })
 
       showSuccessNotification("Correction uploaded successfully!")

assets/vue/components/attendance/AttendanceForm.vue

@@ -110,13 +110,13 @@ import BaseInputText from "../basecomponents/BaseInputText.vue"
 import ResourceLanguageSelector from "../resources/ResourceLanguageSelector.vue"
 import { useRoute, useRouter } from "vue-router"
 import { RESOURCE_LINK_PUBLISHED } from "../../constants/entity/resourcelink"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import gradebookService from "../../services/gradebookService"
 
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
-const { sid, cid } = useCidReq()
+const { sid, cid } = getCourseContext()
 const emit = defineEmits(["backPressed"])
 const props = defineProps({
   initialData: {

assets/vue/components/chat/DockedChat.vue

@@ -247,8 +247,9 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRoute } from "vue-router"
-import { useCidReq } from "../../composables/cidReq"
+import { getCourseContext } from "../../utils/courseContext"
 import DOMPurify from "dompurify"
+import baseService from "../../services/baseService"
 
 const { t } = useI18n({ useScope: "global" })
 const route = useRoute()
@@ -303,12 +304,12 @@ function readCidReqFromRouteAndLocation() {
 }
 
 /**
- * Keep compatibility: if useCidReq() works, bind to it.
+ * Keep compatibility: if getCourseContext() works, bind to it.
  * If it doesn't provide cid for path-based routes, route watcher will override via readCidReqFromRouteAndLocation().
  */
 function safeBindCidReq() {
   try {
-    const r = useCidReq()
+    const r = getCourseContext()
     if (r?.cid && typeof r.cid === "object" && "value" in r.cid) cid.value = toInt(r.cid.value) || 0
     if (r?.sid && typeof r.sid === "object" && "value" in r.sid) sid.value = toInt(r.sid.value) || 0
     if (r?.gid && typeof r.gid === "object" && "value" in r.gid) gid.value = toInt(r.gid.value) || 0
@@ -652,21 +653,21 @@ function ackTitle(msg) {
 
 async function getJSON(url, params) {
   const full = params ? `${url}?${qs(withCidReq(params))}` : addCidReqToUrl(url)
-  const r = await fetch(full, { credentials: "same-origin" })
-  if (!r.ok) throw new Error("Network error")
-  return r.json()
+  return baseService.get(full)
 }
 
 async function post(url, params, expectJson = true) {
   const fullUrl = addCidReqToUrl(url)
-  const r = await fetch(fullUrl, {
-    method: "POST",
-    credentials: "same-origin",
-    headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
-    body: new URLSearchParams(withCidReq(params || {})),
-  })
-  if (!r.ok) throw new Error("Network error")
-  return expectJson ? r.json() : r.text()
+  // URLSearchParams body makes axios send application/x-www-form-urlencoded.
+  const body = new URLSearchParams(withCidReq(params || {}))
+
+  if (expectJson) {
+    return baseService.post(fullUrl, body)
+  }
+
+  const r = await baseService.postRaw(fullUrl, body, { responseType: "text" })
+
+  return r.data
 }
 
 function byChronoId(a, b) {

assets/vue/components/course/CatalogueCourseCard.vue

@@ -15,6 +15,7 @@ import CatalogueRequirementModal from "./CatalogueRequirementModal.vue"
 import courseRelUserService from "../../services/courseRelUserService"
 import { useCourseRequirementStatus } from "../../composables/course/useCourseRequirementStatus"
 import { useLocale } from "../../composables/locale"
+import baseService from "../../services/baseService"
 
 const { t } = useI18n()
 const { getOriginalLanguageName } = useLocale()
@@ -53,13 +54,8 @@ localCourse.value.ratingCount = Number(
 const fetchRating = async () => {
   if (!localCourse.value?.id) return
   try {
-    const sessionQuery = localCourse.value?.sessionId ? `?session=${localCourse.value.sessionId}` : ""
-    const res = await fetch(`/catalogue/api/courses/${localCourse.value.id}/rating${sessionQuery}`, {
-      headers: { Accept: "application/json" },
-      credentials: "same-origin",
-    })
-    if (!res.ok) return
-    const data = await res.json()
+    const params = localCourse.value?.sessionId ? { session: localCourse.value.sessionId } : {}
+    const data = await baseService.get(`/catalogue/api/courses/${localCourse.value.id}/rating`, params)
     localCourse.value.ratingAvg = Number(data.average ?? data.avg ?? data.ratingAvg ?? 0)
     localCourse.value.ratingCount = Number(data.count ?? data.countVotes ?? localCourse.value.ratingCount ?? 0)
   } catch (e) {
@@ -136,13 +132,8 @@ localCourse.value.nbVisits = Number(localCourse.value.nbVisits ?? 0)
 const fetchVisits = async () => {
   if (!localCourse.value?.id) return
   try {
-    const sessionQuery = localCourse.value?.sessionId ? `?session=${localCourse.value.sessionId}` : ""
-    const res = await fetch(`/catalogue/api/courses/${localCourse.value.id}/visits${sessionQuery}`, {
-      headers: { Accept: "application/json" },
-      credentials: "same-origin",
-    })
-    if (!res.ok) return
-    const data = await res.json()
+    const params = localCourse.value?.sessionId ? { session: localCourse.value.sessionId } : {}
+    const data = await baseService.get(`/catalogue/api/courses/${localCourse.value.id}/visits`, params)
     localCourse.value.nbVisits = Number(data.visits ?? 0)
   } catch (e) {
     console.error("fetchVisits error", e)