From 814d6fa0ab2c939a2c5abf0f1566bf6faa2253d0 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Sun, 31 Mar 2024 17:44:26 -0500
Subject: [PATCH] Refactoring requests made with axios to use dedicated request
 services

---
 assets/vue/components/StudentViewButton.vue   | 12 +--
 .../components/resource_links/EditLinks.vue   | 83 +++++++------------
 assets/vue/components/social/Actions.vue      | 24 +++---
 assets/vue/constants/entity/userreluser.js    | 23 +++++
 assets/vue/services/adminService.js           | 10 +--
 assets/vue/services/baseService.js            | 69 ++++++++++++---
 assets/vue/services/cToolIntroService.js      | 33 ++++++++
 assets/vue/services/courseRelUserService.js   | 13 +++
 assets/vue/services/courseService.js          | 27 +++---
 assets/vue/services/messageTagService.js      | 26 ++++++
 assets/vue/services/permissionService.js      | 11 +++
 assets/vue/services/resourceLinkService.js    |  8 +-
 .../sessionRelCourseRelUserService.js         | 13 +++
 assets/vue/services/sessionRelUserService.js  | 11 +--
 assets/vue/services/sessionService.js         | 12 ++-
 assets/vue/services/socialService.js          | 23 +++++
 assets/vue/services/userRelUserService.js     | 50 +++++++++++
 assets/vue/services/userService.js            | 31 +++++++
 assets/vue/services/usergroupService.js       | 60 ++++++++++----
 assets/vue/store/cidReq.js                    |  8 +-
 .../ccalendarevent/CCalendarEventList.vue     |  2 +-
 assets/vue/views/ctoolintro/Create.vue        | 27 +++---
 assets/vue/views/ctoolintro/Update.vue        | 12 ++-
 assets/vue/views/message/MessageCreate.vue    | 32 ++-----
 assets/vue/views/message/MessageShow.vue      | 24 ++----
 assets/vue/views/usergroup/List.vue           | 45 +++-------
 .../vue/views/userreluser/UserRelUserAdd.vue  | 22 ++---
 .../views/userreluser/UserRelUserSearch.vue   | 22 ++---
 28 files changed, 476 insertions(+), 257 deletions(-)
 create mode 100644 assets/vue/constants/entity/userreluser.js
 create mode 100644 assets/vue/services/cToolIntroService.js
 create mode 100644 assets/vue/services/courseRelUserService.js
 create mode 100644 assets/vue/services/messageTagService.js
 create mode 100644 assets/vue/services/permissionService.js
 create mode 100644 assets/vue/services/sessionRelCourseRelUserService.js
 create mode 100644 assets/vue/services/userRelUserService.js
 create mode 100644 assets/vue/services/userService.js

diff --git a/assets/vue/components/StudentViewButton.vue b/assets/vue/components/StudentViewButton.vue
index 3dfd9e6480..db9acee187 100644
--- a/assets/vue/components/StudentViewButton.vue
+++ b/assets/vue/components/StudentViewButton.vue
@@ -15,10 +15,10 @@ import { computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { useStore } from "vuex"
 import { usePlatformConfig } from "../store/platformConfig"
-import axios from "axios"
 import { storeToRefs } from "pinia"
 import { useCidReqStore } from "../store/cidReq"
 import { useSecurityStore } from "../store/securityStore"
+import permissionService from "../services/permissionService"
 
 const emit = defineEmits(["change"])
 
@@ -30,15 +30,11 @@ const securityStore = useSecurityStore()
 
 const isStudentView = computed({
   async set() {
-    try {
-      const { data } = await axios.get(`${window.location.origin}/toggle_student_view`)
+    const studentView = await permissionService.toogleStudentView()
 
-      platformConfigStore.studentView = data
+    platformConfigStore.studentView = studentView
 
-      emit("change", data)
-    } catch (e) {
-      console.log(e)
-    }
+    emit("change", studentView)
   },
   get() {
     return platformConfigStore.isStudentViewActive
diff --git a/assets/vue/components/resource_links/EditLinks.vue b/assets/vue/components/resource_links/EditLinks.vue
index 76daf00ceb..565e1cc0a2 100644
--- a/assets/vue/components/resource_links/EditLinks.vue
+++ b/assets/vue/components/resource_links/EditLinks.vue
@@ -27,12 +27,17 @@
 <script setup>
 import ShowLinks from "../../components/resource_links/ShowLinks.vue"
 import { ref } from "vue"
-import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint"
 import VueMultiselect from "vue-multiselect"
 import isEmpty from "lodash/isEmpty"
 import { RESOURCE_LINK_PUBLISHED } from "./visibility.js"
 import { useSecurityStore } from "../../store/securityStore"
+import userService from "../../services/userService"
+import userRelUserService from "../../services/userRelUserService"
+import { useCidReqStore } from "../../store/cidReq"
+import { storeToRefs } from "pinia"
+import sessionRelCourseRelUserService from "../../services/sessionRelCourseRelUserService"
+import sessionRelUserService from "../../services/sessionRelUserService"
+import courseRelUserService from "../../services/courseRelUserService"
 
 // eslint-disable-next-line vue/require-prop-types
 const model = defineModel()
@@ -70,6 +75,9 @@ const selectedUsers = ref([])
 const isLoading = ref(false)
 
 const securityStore = useSecurityStore()
+const cidReqStore = useCidReqStore()
+
+const { course, session } = storeToRefs(cidReqStore)
 
 function addUser(userResult) {
   if (isEmpty(model.value[props.linkListName])) {
@@ -90,39 +98,17 @@ function addUser(userResult) {
 }
 
 function findUsers(query) {
-  axios
-    .get(ENTRYPOINT + "users", {
-      params: {
-        username: query,
-      },
-    })
-    .then((response) => {
-      isLoading.value = false
-      let data = response.data
-      users.value = data["hydra:member"]
-    })
-    .catch(function (error) {
-      isLoading.value = false
-      console.log(error)
-    })
+  userService
+    .findByUsername(query)
+    .then(({ items }) => (users.value = items))
+    .finally(() => (isLoading.value = false))
 }
 
 function findUserRelUsers(query) {
-  axios
-    .get(ENTRYPOINT + "user_rel_users", {
-      params: {
-        user: securityStore.user["id"],
-        "friend.username": query,
-      },
-    })
-    .then((response) => {
-      isLoading.value = false
-
-      users.value = response.data["hydra:member"].map((member) => member.friend)
-    })
-    .catch(function () {
-      isLoading.value = false
-    })
+  userRelUserService
+    .searchRelationshipByUsername(securityStore.user["@id"], query)
+    .then(({ items }) => (users.value = items.map((relationship) => relationship.friend)))
+    .finally(() => (isLoading.value = false))
 }
 
 function findStudentsInCourse(query) {
@@ -130,42 +116,35 @@ function findStudentsInCourse(query) {
   const cId = parseInt(searchParams.get("cid"))
   const sId = parseInt(searchParams.get("sid"))
 
-  if (!cId && !sId) {
+  if (!course.value && !session.value) {
     return
   }
 
-  let endpoint = ENTRYPOINT
   let params = {
     "user.username": query,
   }
 
-  if (sId) {
-    params.session = endpoint + `sessions/${sId}`
+  if (session.value) {
+    params.session = session.value["@id"]
   }
 
+  let service
+
   if (cId) {
+    params.course = course.value["@id"]
+
     if (sId) {
-      endpoint += `session_rel_course_rel_users`
-      params.course = endpoint + `courses/${cId}`
+      service = sessionRelCourseRelUserService.findAll
     } else {
-      endpoint += `courses/${cId}/users`
+      service = courseRelUserService.findAll
     }
   } else {
-    endpoint += `session_rel_users`
+    service = sessionRelUserService.findAll
   }
 
-  axios
-    .get(endpoint, {
-      params,
-    })
-    .then((response) => {
-      isLoading.value = false
-
-      users.value = response.data["hydra:member"].map((member) => member.user)
-    })
-    .catch(function () {
-      isLoading.value = false
-    })
+  service(params)
+    .then(({ items }) => (users.value = items.map((membership) => membership.user)))
+    .finally(() => (isLoading.value = false))
 }
 
 function asyncFind(query) {
diff --git a/assets/vue/components/social/Actions.vue b/assets/vue/components/social/Actions.vue
index fdf5fb4d90..b46b5020fc 100644
--- a/assets/vue/components/social/Actions.vue
+++ b/assets/vue/components/social/Actions.vue
@@ -40,8 +40,8 @@
 
 <script>
 import { reactive } from "vue"
-import axios from "axios"
 import { usePlatformConfig } from "../../store/platformConfig"
+import socialService from "../../services/socialService"
 
 export default {
   name: "WallActions",
@@ -68,11 +68,11 @@ export default {
     function onLikeComment() {
       isLoading.like = true
 
-      axios
-        .post(props.socialPost["@id"] + "/like", {})
-        .then(({ data }) => {
-          props.socialPost.countFeedbackLikes = data.countFeedbackLikes
-          props.socialPost.countFeedbackDislikes = data.countFeedbackDislikes
+      socialService
+        .sendPostLike(props.socialPost["@id"])
+        .then((like) => {
+          props.socialPost.countFeedbackLikes = like.countFeedbackLikes
+          props.socialPost.countFeedbackDislikes = like.countFeedbackDislikes
         })
         .finally(() => (isLoading.like = false))
     }
@@ -80,11 +80,11 @@ export default {
     function onDisikeComment() {
       isLoading.dislike = true
 
-      axios
-        .post(props.socialPost["@id"] + "/dislike", {})
-        .then(({ data }) => {
-          props.socialPost.countFeedbackLikes = data.countFeedbackLikes
-          props.socialPost.countFeedbackDislikes = data.countFeedbackDislikes
+      socialService
+        .sendPostDislike(props.socialPost["@id"])
+        .then((like) => {
+          props.socialPost.countFeedbackLikes = like.countFeedbackLikes
+          props.socialPost.countFeedbackDislikes = like.countFeedbackDislikes
         })
         .finally(() => (isLoading.dislike = false))
     }
@@ -92,7 +92,7 @@ export default {
     function onDeleteComment() {
       isLoading.delete = true
 
-      axios
+      socialService
         .delete(props.socialPost["@id"])
         .then(() => emit("post-deleted", props.socialPost))
         .finally(() => (isLoading.delete = false))
diff --git a/assets/vue/constants/entity/userreluser.js b/assets/vue/constants/entity/userreluser.js
new file mode 100644
index 0000000000..1e3f02205a
--- /dev/null
+++ b/assets/vue/constants/entity/userreluser.js
@@ -0,0 +1,23 @@
+export const USER_UNKNOWN = 0
+
+// export const USER_RELATION_TYPE_UNKNOWN = 1;
+
+// export const USER_RELATION_TYPE_PARENT = 2;
+
+export const USER_RELATION_TYPE_FRIEND = 3
+
+export const USER_RELATION_TYPE_GOODFRIEND = 4
+
+// should be deprecated is useless
+
+// export const USER_RELATION_TYPE_ENEMY = 5; // should be deprecated is useless
+
+export const USER_RELATION_TYPE_DELETED = 6
+
+export const USER_RELATION_TYPE_RRHH = 7
+
+export const USER_RELATION_TYPE_BOSS = 8
+
+export const USER_RELATION_TYPE_HRM_REQUEST = 9
+
+export const USER_RELATION_TYPE_FRIEND_REQUEST = 10
diff --git a/assets/vue/services/adminService.js b/assets/vue/services/adminService.js
index 799aedf1b9..ef6ae18cf4 100644
--- a/assets/vue/services/adminService.js
+++ b/assets/vue/services/adminService.js
@@ -1,4 +1,4 @@
-import axios from "axios"
+import api from "../config/api"
 
 export default {
   /**
@@ -6,7 +6,7 @@ export default {
    * @returns {Promise<void>}
    */
   registerCampus: async (doNotListCampus) => {
-    await axios.post("/admin/register-campus", {
+    await api.post("/admin/register-campus", {
       donotlistcampus: doNotListCampus,
     })
   },
@@ -15,7 +15,7 @@ export default {
    * @returns {Promise<string>}
    */
   findAnnouncements: async () => {
-    const { data } = await axios.get("/main/inc/ajax/admin.ajax.php?a=get_latest_news")
+    const { data } = await api.get("/main/inc/ajax/admin.ajax.php?a=get_latest_news")
 
     return data
   },
@@ -24,7 +24,7 @@ export default {
    * @returns {Promise<string>}
    */
   findVersion: async () => {
-    const { data } = await axios.get("/main/inc/ajax/admin.ajax.php?a=version")
+    const { data } = await api.get("/main/inc/ajax/admin.ajax.php?a=version")
 
     return data
   },
@@ -33,7 +33,7 @@ export default {
    * @returns {Promise<Object>}
    */
   findBlocks: async () => {
-    const { data } = await axios.get("/admin/index")
+    const { data } = await api.get("/admin/index")
 
     return data
   },
diff --git a/assets/vue/services/baseService.js b/assets/vue/services/baseService.js
index 3dc7f2922b..a6238163c7 100644
--- a/assets/vue/services/baseService.js
+++ b/assets/vue/services/baseService.js
@@ -1,15 +1,62 @@
 import api from "../config/api"
 
-/**
- * @param {string} iri
- * @returns {Promise<axios.AxiosResponse<any>>}
- */
-async function find(iri) {
-  return await api.get(iri)
-}
+export default {
+  /**
+   * @param {string} iri
+   * @param {Object} [params]
+   * @returns {Promise<Object>}
+   */
+  async get(iri, params = {}) {
+    const { data } = await api.get(iri, {
+      params,
+    })
 
-async function post(params) {
-  return await api.post("/api/resource_links", params)
-}
+    return data
+  },
+
+  /**
+   * @param {string} endpoint
+   * @param {Object} searchParams
+   * @returns {Promise<{totalItems, items}>}
+   */
+  async getCollection(endpoint, searchParams = {}) {
+    const { data } = await api.get(endpoint, {
+      params: searchParams,
+    })
+
+    return {
+      totalItems: data.totalItems,
+      items: data["hydra:member"],
+    }
+  },
+
+  /**
+   * @param {string} endpoint
+   * @param {Object} [params]
+   * @returns {Promise<Object>}
+   */
+  async post(endpoint, params) {
+    const { data } = await api.post(endpoint, params)
 
-export { find, post }
+    return data
+  },
+
+  /**
+   * @param {string} endpoint
+   * @param {Object} params
+   * @returns {Promise<Object>}
+   */
+  async postForm(endpoint, params) {
+    const { data } = await api.postForm(endpoint, params)
+
+    return data
+  },
+
+  /**
+   * @param {string} iri
+   * @returns {Promise<void>}
+   */
+  async delete(iri) {
+    await api.delete(iri)
+  },
+}
diff --git a/assets/vue/services/cToolIntroService.js b/assets/vue/services/cToolIntroService.js
new file mode 100644
index 0000000000..6a4a21a366
--- /dev/null
+++ b/assets/vue/services/cToolIntroService.js
@@ -0,0 +1,33 @@
+import baseService from "./baseService"
+
+/**
+ * @param {number} cId
+ * @param {Object} params
+ * @returns {Promise<Object>}
+ */
+async function findCourseHomeInro(cId, params) {
+  return await baseService.get(`/course/${cId}/getToolIntro`, params)
+}
+
+/**
+ * @param {number} cId
+ * @param {Object} params
+ * @returns {Promise<Object>}
+ */
+async function addToolIntro(cId, params) {
+  return baseService.post(`/course/${cId}/addToolIntro`, params)
+}
+
+/**
+ * @param {number} toolIntroId
+ * @returns {Promise<Object>}
+ */
+async function findById(toolIntroId) {
+  return await baseService.get(`/api/c_tool_intros/${toolIntroId}`)
+}
+
+export default {
+  findCourseHomeInro,
+  addToolIntro,
+  findById,
+}
diff --git a/assets/vue/services/courseRelUserService.js b/assets/vue/services/courseRelUserService.js
new file mode 100644
index 0000000000..8e22a52185
--- /dev/null
+++ b/assets/vue/services/courseRelUserService.js
@@ -0,0 +1,13 @@
+import baseService from "./baseService"
+
+/**
+ * @param {Object} searchParams
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findAll(searchParams) {
+  return await baseService.getCollection("/api/course_rel_users", searchParams)
+}
+
+export default {
+  findAll,
+}
diff --git a/assets/vue/services/courseService.js b/assets/vue/services/courseService.js
index eecacd3fe1..e831933416 100644
--- a/assets/vue/services/courseService.js
+++ b/assets/vue/services/courseService.js
@@ -1,21 +1,22 @@
-import { ENTRYPOINT } from "../config/entrypoint"
-import axios from "axios"
+import api from "../config/api"
+import baseService from "./baseService"
+
+export default {
+  find: baseService.get,
 
-const API_URL = "/course"
-const courseService = {
   /**
    * @param {number} courseId
    * @param {number=} sessionId
    * @returns {Promise<Object>}
    */
   loadTools: async (courseId, sessionId = 0) => {
-    const { data } = await axios.get(ENTRYPOINT + `../course/${courseId}/home.json?sid=${sessionId}`)
+    const { data } = await api.get(`/course/${courseId}/home.json?sid=${sessionId}`)
 
     return data
   },
 
   loadCTools: async (courseId, sessionId = 0) => {
-    const { data } = await axios.get(ENTRYPOINT + "c_tools", {
+    const { data } = await api.get("/api/c_tools", {
       params: {
         cid: courseId,
         sid: sessionId,
@@ -36,7 +37,7 @@ const courseService = {
    * @returns {Promise<Object>}
    */
   updateToolOrder: async (tool, newIndex, courseId, sessionId = 0) => {
-    const { data } = await axios.post(ENTRYPOINT + `../course/${courseId}/home.json?sid=${sessionId}`, {
+    const { data } = await api.post(`/course/${courseId}/home.json?sid=${sessionId}`, {
       index: newIndex,
       toolItem: tool,
     })
@@ -50,7 +51,7 @@ const courseService = {
    * @returns {Promise<{Object}>}
    */
   loadHomeIntro: async (courseId, sessionId = 0) => {
-    const { data } = await axios.get(ENTRYPOINT + `../course/${courseId}/getToolIntro`, {
+    const { data } = await api.get(`/course/${courseId}/getToolIntro`, {
       params: {
         sid: sessionId,
       },
@@ -65,7 +66,7 @@ const courseService = {
    * @returns {Promise<Object>}
    */
   checkLegal: async (courseId, sessionId = 0) => {
-    const { data } = await axios.get(`${API_URL}/${courseId}/checkLegal.json`, {
+    const { data } = await api.get(`/course/${courseId}/checkLegal.json`, {
       params: {
         sid: sessionId,
       },
@@ -80,7 +81,7 @@ const courseService = {
    * @returns {Promise<Object>} The server response after creating the course.
    */
   createCourse: async (courseData) => {
-    const response = await axios.post(`${API_URL}/create`, courseData)
+    const response = await api.post(`/course/create`, courseData)
     console.log("response create ::", response)
 
     return response.data
@@ -91,7 +92,7 @@ const courseService = {
    * @returns {Promise<Array>} A list of available categories.
    */
   getCategories: async () => {
-    const response = await axios.get(`${API_URL}/categories`)
+    const response = await api.get(`/course/categories`)
 
     return response.data
   },
@@ -102,7 +103,7 @@ const courseService = {
    * @returns {Promise<Array>} A list of templates matching the search term.
    */
   searchTemplates: async (searchTerm) => {
-    const response = await axios.get(`${API_URL}/search_templates`, {
+    const response = await api.get(`/course/search_templates`, {
       params: { search: searchTerm },
     })
 
@@ -112,5 +113,3 @@ const courseService = {
     }))
   },
 }
-
-export default courseService
diff --git a/assets/vue/services/messageTagService.js b/assets/vue/services/messageTagService.js
new file mode 100644
index 0000000000..7cd4d2049c
--- /dev/null
+++ b/assets/vue/services/messageTagService.js
@@ -0,0 +1,26 @@
+import baseService from "./baseService"
+
+/**
+ * @param {Object} params
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findAll(params) {
+  return await baseService.getCollection("/api/message_tags", params)
+}
+
+/**
+ * @param {string} userIri
+ * @param {string} searchTerm
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function searchUserTags(userIri, searchTerm) {
+  return await findAll({
+    user: userIri,
+    tag: searchTerm,
+  })
+}
+
+export default {
+  findAll,
+  searchUserTags,
+}
diff --git a/assets/vue/services/permissionService.js b/assets/vue/services/permissionService.js
new file mode 100644
index 0000000000..c6f8d38f0e
--- /dev/null
+++ b/assets/vue/services/permissionService.js
@@ -0,0 +1,11 @@
+import api from "../config/api"
+
+async function toogleStudentView() {
+  const { data } = await api.get("/toggle_student_view")
+
+  return data
+}
+
+export default {
+  toogleStudentView,
+}
diff --git a/assets/vue/services/resourceLinkService.js b/assets/vue/services/resourceLinkService.js
index 0efa94e9c2..f33a44ef72 100644
--- a/assets/vue/services/resourceLinkService.js
+++ b/assets/vue/services/resourceLinkService.js
@@ -1,5 +1,9 @@
-import { post } from "./baseService"
+import api from "../config/api"
 
 export default {
-  post,
+  async create(params) {
+    const { data } = await api.post("/api/resource_links", params)
+
+    return data
+  },
 }
diff --git a/assets/vue/services/sessionRelCourseRelUserService.js b/assets/vue/services/sessionRelCourseRelUserService.js
new file mode 100644
index 0000000000..5f43892009
--- /dev/null
+++ b/assets/vue/services/sessionRelCourseRelUserService.js
@@ -0,0 +1,13 @@
+import baseService from "./baseService"
+
+/**
+ * @param {Object} searchParams
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findAll(searchParams) {
+  return await baseService.getCollection("/api/session_rel_course_rel_users", searchParams)
+}
+
+export default {
+  findAll,
+}
diff --git a/assets/vue/services/sessionRelUserService.js b/assets/vue/services/sessionRelUserService.js
index 6af042b3fe..729d101990 100644
--- a/assets/vue/services/sessionRelUserService.js
+++ b/assets/vue/services/sessionRelUserService.js
@@ -1,8 +1,9 @@
-import { ENTRYPOINT } from "../config/entrypoint"
-import axios from "axios"
+import baseService from "./baseService"
 
-const sessionRelUserService = {
-  findAll: (params) => axios.get(ENTRYPOINT + "session_rel_users", { params }).then((response) => response.data),
+async function findAll(params) {
+  return await baseService.getCollection("/api/session_rel_users", params)
 }
 
-export default sessionRelUserService
+export default {
+  findAll,
+}
diff --git a/assets/vue/services/sessionService.js b/assets/vue/services/sessionService.js
index a8e89bb491..5f96f81c40 100644
--- a/assets/vue/services/sessionService.js
+++ b/assets/vue/services/sessionService.js
@@ -1,5 +1,13 @@
-import { find } from "./baseService"
+import api from "../config/api"
 
 export default {
-  find
+  /**
+   * @param {string} iri
+   * @returns {Promise<Object>}
+   */
+  async find(iri) {
+    const { data } = await api.get(iri)
+
+    return data
+  },
 }
diff --git a/assets/vue/services/socialService.js b/assets/vue/services/socialService.js
index 57e8694e0c..2cd1419350 100644
--- a/assets/vue/services/socialService.js
+++ b/assets/vue/services/socialService.js
@@ -1,7 +1,24 @@
 import axios from "axios"
+import baseService from "./baseService"
 
 const API_URL = "/social-network"
 
+/**
+ * @param {string} postIri
+ * @returns {Promise<Object>}
+ */
+async function sendPostLike(postIri) {
+  return baseService.post(`${postIri}/like`)
+}
+
+/**
+ * @param {string} postIri
+ * @returns {Promise<Object>}
+ */
+async function sendPostDislike(postIri) {
+  return baseService.post(`${postIri}/dislike`)
+}
+
 export default {
   async fetchPersonalData(userId) {
     try {
@@ -150,4 +167,10 @@ export default {
       throw error
     }
   },
+
+  sendPostLike,
+
+  sendPostDislike,
+
+  delete: baseService.delete,
 }
diff --git a/assets/vue/services/userRelUserService.js b/assets/vue/services/userRelUserService.js
new file mode 100644
index 0000000000..7f498fb083
--- /dev/null
+++ b/assets/vue/services/userRelUserService.js
@@ -0,0 +1,50 @@
+import baseService from "./baseService"
+import { USER_RELATION_TYPE_FRIEND, USER_RELATION_TYPE_FRIEND_REQUEST } from "../constants/entity/userreluser"
+
+/**
+ * @param {Object} searchParams
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findAll(searchParams = {}) {
+  return await baseService.getCollection("/api/user_rel_users", searchParams)
+}
+
+/**
+ * @param {string} userIri
+ * @returns {Promise<Array<Object>>}
+ */
+async function getFriendList(userIri) {
+  const { items } = await findAll({
+    user: userIri,
+    relationType: [USER_RELATION_TYPE_FRIEND, USER_RELATION_TYPE_FRIEND_REQUEST],
+  })
+
+  return items
+}
+
+async function sendFriendRequest(userIri, friendIri) {
+  return await baseService.post("/api/user_rel_users", {
+    user: userIri,
+    friend: friendIri,
+    relationType: USER_RELATION_TYPE_FRIEND_REQUEST,
+  })
+}
+
+/**
+ * @param {string} userIri
+ * @param {string} searchTerm
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function searchRelationshipByUsername(userIri, searchTerm) {
+  return await findAll({
+    user: userIri,
+    "friend.username": searchTerm,
+  })
+}
+
+export default {
+  findAll,
+  getFriendList,
+  sendFriendRequest,
+  searchRelationshipByUsername,
+}
diff --git a/assets/vue/services/userService.js b/assets/vue/services/userService.js
new file mode 100644
index 0000000000..1995188209
--- /dev/null
+++ b/assets/vue/services/userService.js
@@ -0,0 +1,31 @@
+import baseService from "./baseService"
+
+/**
+ * @param {string} userIri
+ * @returns {Promise<Object>}
+ */
+async function find(userIri) {
+  return await baseService.get(userIri)
+}
+
+/**
+ * @param {Object} searchParams
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findAll(searchParams) {
+  return await baseService.getCollection("/api/users", searchParams)
+}
+
+/**
+ * @param {string} username
+ * @returns {Promise<{totalItems, items}>}
+ */
+async function findByUsername(username) {
+  return await baseService.getCollection("/api/users", { username })
+}
+
+export default {
+  find,
+  findAll,
+  findByUsername,
+}
diff --git a/assets/vue/services/usergroupService.js b/assets/vue/services/usergroupService.js
index 6b1599efe9..5132c716c4 100644
--- a/assets/vue/services/usergroupService.js
+++ b/assets/vue/services/usergroupService.js
@@ -1,25 +1,57 @@
-import axios from "axios"
+import baseService from "./baseService"
 
 export default {
   /**
    * @param {string} searchTerm
-   * @returns {Promise<Object>} { totalItems, items }
+   * @returns {Promise<{totalItems, items}>}
    */
   search: async (searchTerm) => {
-    const response = {}
+    return await baseService.getCollection("/api/usergroups/search", {
+      search: searchTerm,
+    })
+  },
+
+  /**
+   * @param {Object} params
+   * @returns {Promise<Object>}
+   */
+  async createGroup(params) {
+    return await baseService.post("/api/usergroups", params)
+  },
+
+  /**
+   * @param {number} groupId
+   * @param {Object} params
+   * @returns {Promise<Object>}
+   */
+  async uploadPicture(groupId, params) {
+    return await baseService.postForm(`/social-network/upload-group-picture/${groupId}`, params)
+  },
+
+  /**
+   * @returns {Promise<Array>}
+   */
+  async listNewest() {
+    const { items } = await baseService.getCollection("/api/usergroup/list/newest")
+
+    return items
+  },
+
+  /**
+   * @returns {Promise<Array>}
+   */
+  async listPopular() {
+    const { items } = await baseService.getCollection("/api/usergroup/list/popular")
 
-    try {
-      const { data } = await axios.get("/api/usergroups/search", {
-        params: { search: searchTerm },
-      })
+    return items
+  },
 
-      response.totalItems = data["hydra:totalItems"]
-      response.items = data["hydra:member"]
-    } catch {
-      response.totalItems = 0
-      response.items = []
-    }
+  /**
+   * @returns {Promise<Array>}
+   */
+  async listMine() {
+    const { items } = await baseService.getCollection("/api/usergroup/list/my")
 
-    return response
+    return items
   },
 }
diff --git a/assets/vue/store/cidReq.js b/assets/vue/store/cidReq.js
index b49d6e5a92..a6b8577b6d 100644
--- a/assets/vue/store/cidReq.js
+++ b/assets/vue/store/cidReq.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia"
 import { usePlatformConfig } from "./platformConfig"
-import courseService from "../services/course"
+import courseService from "../services/courseService"
 import sessionService from "../services/sessionService"
 import { computed, ref } from "vue"
 
@@ -56,7 +56,7 @@ export const useCidReqStore = defineStore("cidReq", () => {
       return
     }
 
-    course.value = await courseService.find(iri, { sid }).then((response) => response.json())
+    course.value = await courseService.find(iri, { sid })
   }
 
   const setSessionByIri = async (iri) => {
@@ -64,9 +64,7 @@ export const useCidReqStore = defineStore("cidReq", () => {
       return
     }
 
-    const { data } = await sessionService.find(iri);
-
-    session.value = data
+    session.value = await sessionService.find(iri)
   }
 
   const setCourseAndSessionByIri = async (courseIri, sId = 0) => {
diff --git a/assets/vue/views/ccalendarevent/CCalendarEventList.vue b/assets/vue/views/ccalendarevent/CCalendarEventList.vue
index b7e747634f..730751976e 100644
--- a/assets/vue/views/ccalendarevent/CCalendarEventList.vue
+++ b/assets/vue/views/ccalendarevent/CCalendarEventList.vue
@@ -369,7 +369,7 @@ function confirmDelete() {
 
 async function subscribeToEvent() {
   try {
-    await resourceLinkService.post({
+    await resourceLinkService.create({
       resourceNode: item.value.resourceNode["@id"],
       user: currentUser.value["@id"],
       visibility: RESOURCE_LINK_PUBLISHED,
diff --git a/assets/vue/views/ctoolintro/Create.vue b/assets/vue/views/ctoolintro/Create.vue
index 52bf496b80..e82ab1d424 100644
--- a/assets/vue/views/ctoolintro/Create.vue
+++ b/assets/vue/views/ctoolintro/Create.vue
@@ -21,8 +21,8 @@ import useVuelidate from "@vuelidate/core"
 import { useRoute, useRouter } from "vue-router"
 import isEmpty from "lodash/isEmpty"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility.js"
-import axios from "axios"
 import { useCidReq } from "../../composables/cidReq"
+import cToolIntroService from "../../services/cToolIntroService"
 
 const servicePrefix = "ctoolintro"
 
@@ -59,23 +59,16 @@ export default {
     let ctoolId = route.params.courseTool
 
     async function getIntro() {
-      axios
-        .get("/course/" + courseId + "/getToolIntro", {
-          params: {
-            cid: courseId,
-            sid: sessionId,
-          },
+      cToolIntroService
+        .findCourseHomeInro(courseId, {
+          cid: courseId,
+          sid: sessionId,
         })
-        .then((response) => {
-          if (response.data) {
-            if (response.data.introText) {
-              item.value["introText"] = response.data.introText
-            }
+        .then((intro) => {
+          if (intro.introText) {
+            item.value.introText = intro.introText
           }
         })
-        .catch(function (error) {
-          console.log(error)
-        })
     }
 
     item.value["parentResourceNodeId"] = Number(route.query.parentResourceNodeId)
@@ -93,8 +86,8 @@ export default {
 
     function onCreated(item) {
       //showNotification(t("Updated"))
-      axios
-        .post("/course/" + cid + "/addToolIntro", {
+      cToolIntroService
+        .addToolIntro(cid, {
           iid: item.iid,
           cid: route.query.cid,
           sid: route.query.sid,
diff --git a/assets/vue/views/ctoolintro/Update.vue b/assets/vue/views/ctoolintro/Update.vue
index d551294af4..5b68a98cfd 100644
--- a/assets/vue/views/ctoolintro/Update.vue
+++ b/assets/vue/views/ctoolintro/Update.vue
@@ -19,10 +19,9 @@ import UpdateMixin from "../../mixins/UpdateMixin"
 import { ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import useVuelidate from "@vuelidate/core"
-import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
 import { useCidReq } from "../../composables/cidReq"
+import cToolIntroService from "../../services/cToolIntroService"
 
 const servicePrefix = "ctoolintro"
 
@@ -46,11 +45,10 @@ export default {
     let ctoolintroId = route.query.ctoolintroIid
 
     // Get the current intro text.
-    axios
-      .get(ENTRYPOINT + "c_tool_intros/" + ctoolintroId)
-      .then((response) => {
-        let data = response.data
-        item.value["introText"] = data.introText
+    cToolIntroService
+      .findById(ctoolintroId)
+      .then((toolIntroInfo) => {
+        item.value["introText"] = toolIntroInfo.introText
         item.value["parentResourceNodeId"] = Number(route.query.parentResourceNodeId)
       })
       .catch(function (error) {
diff --git a/assets/vue/views/message/MessageCreate.vue b/assets/vue/views/message/MessageCreate.vue
index 14adbbffa5..51eb393b11 100644
--- a/assets/vue/views/message/MessageCreate.vue
+++ b/assets/vue/views/message/MessageCreate.vue
@@ -55,14 +55,12 @@ import { useStore } from "vuex"
 import MessageForm from "../../components/message/Form.vue"
 import Loading from "../../components/Loading.vue"
 import { computed, ref } from "vue"
-import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint"
 import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import { useI18n } from "vue-i18n"
 import { useRoute, useRouter } from "vue-router"
 import { MESSAGE_TYPE_INBOX } from "../../components/message/constants"
-import userService from "../../services/user"
+import userService from "../../services/userService"
 import BaseUserAvatar from "../../components/basecomponents/BaseUserAvatar.vue"
 import { useNotification } from "../../composables/notification"
 import { capitalize } from "lodash"
@@ -75,26 +73,13 @@ const { t } = useI18n()
 
 const notification = useNotification()
 
-const asyncFind = (query) => {
-  return axios
-    .get(ENTRYPOINT + "users", {
-      params: {
-        username: query,
-      },
-    })
-    .then((response) => {
-      let data = response.data
-
-      return (
-        data["hydra:member"]?.map((member) => ({
-          name: member.fullName,
-          value: member["@id"],
-        })) ?? []
-      )
-    })
-    .catch(function (error) {
-      console.log(error)
-    })
+const asyncFind = async (query) => {
+  const { items } = await userService.findByUsername(query)
+
+  return items.map((member) => ({
+    name: member.fullName,
+    value: member["@id"],
+  }))
 }
 
 const currentUser = computed(() => store.getters["security/getUser"])
@@ -205,7 +190,6 @@ if (route.query.send_to_user) {
 
   userService
     .find("/api/users/" + parseInt(route.query.send_to_user))
-    .then((response) => response.json())
     .then((user) => {
       sendToUser.value = user
 
diff --git a/assets/vue/views/message/MessageShow.vue b/assets/vue/views/message/MessageShow.vue
index 32658f94ba..b1c35cad24 100644
--- a/assets/vue/views/message/MessageShow.vue
+++ b/assets/vue/views/message/MessageShow.vue
@@ -144,8 +144,6 @@ import { useStore } from "vuex"
 import Loading from "../../components/Loading.vue"
 import { computed, ref } from "vue"
 import isEmpty from "lodash/isEmpty"
-import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint"
 import { useRoute, useRouter } from "vue-router"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import { useConfirm } from "primevue/useconfirm"
@@ -154,6 +152,7 @@ import BaseChip from "../../components/basecomponents/BaseChip.vue"
 import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.vue"
 import { useFormatDate } from "../../composables/formatDate"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
+import messageTagService from "../../services/messageTagService"
 
 const confirm = useConfirm()
 const { t } = useI18n()
@@ -250,25 +249,14 @@ function createEvent() {
 
 const foundTag = ref("")
 
-function onSearchTags(query) {
+async function onSearchTags(query) {
   isLoadingSelect.value = true
 
-  return axios
-    .get(ENTRYPOINT + "message_tags", {
-      params: {
-        user: user["@id"],
-        tag: query,
-      },
-    })
-    .then((response) => {
-      isLoadingSelect.value = false
+  const { items } = await messageTagService.searchUserTags(user["@id"], query)
 
-      return response.data["hydra:member"]
-    })
-    .catch(function (error) {
-      isLoadingSelect.value = false
-      console.log(error)
-    })
+  isLoadingSelect.value = false
+
+  return items
 }
 
 async function onItemSelect({ value }) {
diff --git a/assets/vue/views/usergroup/List.vue b/assets/vue/views/usergroup/List.vue
index 2fc2360bf9..2a75cceedb 100644
--- a/assets/vue/views/usergroup/List.vue
+++ b/assets/vue/views/usergroup/List.vue
@@ -198,8 +198,7 @@ import BaseInputTextWithVuelidate from "../../components/basecomponents/BaseInpu
 import BaseFileUpload from "../../components/basecomponents/BaseFileUpload.vue"
 import BaseCheckbox from "../../components/basecomponents/BaseCheckbox.vue"
 import { useI18n } from "vue-i18n"
-import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint"
+import usergroupService from "../../services/usergroupService"
 
 const { t } = useI18n()
 const newestGroups = ref([])
@@ -241,49 +240,27 @@ const createGroup = async () => {
       groupType: 1,
     }
     try {
-      const response = await axios.post(ENTRYPOINT + "usergroups", groupData, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
+      const newGroup = await usergroupService.createGroup(groupData)
 
-      if (selectedFile.value && response.data && response.data.id) {
-        const formData = new FormData()
-        formData.append("picture", selectedFile.value)
-        await axios.post(`/social-network/upload-group-picture/${response.data.id}`, formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-          },
+      if (selectedFile.value && newGroup && newGroup.id) {
+        await usergroupService.uploadPicture(newGroup.id, {
+          picture: selectedFile.value,
         })
       }
 
       showCreateGroupDialog.value = false
       resetForm()
-      await updateGroupsList()
+      updateGroupsList()
     } catch (error) {
       console.error("Failed to create group or upload picture:", error.response.data)
     }
   }
 }
-const fetchGroups = async (endpoint) => {
-  try {
-    const response = await fetch(ENTRYPOINT + `${endpoint}`)
-    if (!response.ok) {
-      throw new Error("Failed to fetch groups")
-    }
-    const data = await response.json()
-    console.log("hidra menber ::: ", data["hydra:member"])
 
-    return data["hydra:member"]
-  } catch (error) {
-    console.error(error)
-    return []
-  }
-}
-const updateGroupsList = async () => {
-  newestGroups.value = await fetchGroups("usergroup/list/newest")
-  popularGroups.value = await fetchGroups("usergroup/list/popular")
-  myGroups.value = await fetchGroups("usergroup/list/my")
+const updateGroupsList = () => {
+  usergroupService.listNewest().then((newest) => (newestGroups.value = newest))
+  usergroupService.listPopular().then((popular) => (popularGroups.value = popular))
+  usergroupService.listMine().then((mine) => (myGroups.value = mine))
 }
 
 const extractGroupId = (group) => {
@@ -294,7 +271,7 @@ const redirectToGroupDetails = (groupId) => {
   router.push({ name: "UserGroupShow", params: { group_id: groupId } })
 }
 onMounted(async () => {
-  await updateGroupsList()
+  updateGroupsList()
 })
 
 const closeDialog = () => {
diff --git a/assets/vue/views/userreluser/UserRelUserAdd.vue b/assets/vue/views/userreluser/UserRelUserAdd.vue
index b3b0d0fad6..ffb494f9c0 100644
--- a/assets/vue/views/userreluser/UserRelUserAdd.vue
+++ b/assets/vue/views/userreluser/UserRelUserAdd.vue
@@ -45,8 +45,8 @@ import { useNotification } from "../../composables/notification"
 import VueMultiselect from "vue-multiselect"
 import BaseToolbar from "../../components/basecomponents/BaseToolbar.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
-import { ENTRYPOINT } from "../../config/entrypoint"
-import axios from "axios"
+import userService from "../../services/userService"
+import userRelUserService from "../../services/userRelUserService"
 
 const store = useStore()
 const router = useRouter()
@@ -61,11 +61,10 @@ const searchQuery = ref("")
 const asyncFind = (query) => {
   if (query.toString().length < 3) return
   isLoadingSelect.value = true
-  axios
-    .get(`${ENTRYPOINT}users`, { params: { username: query } })
-    .then((response) => {
-      users.value = response.data["hydra:member"]
-    })
+
+  userService
+    .findByUsername(query)
+    .then(({ items }) => (users.value = items))
     .catch((error) => {
       console.error("Error fetching users:", error)
     })
@@ -76,12 +75,9 @@ const asyncFind = (query) => {
 
 const addFriend = (friend) => {
   isLoadingSelect.value = true
-  axios
-    .post(`${ENTRYPOINT}user_rel_users`, {
-      user: user["@id"],
-      friend: friend["@id"],
-      relationType: 10,
-    })
+
+  userRelUserService
+    .sendFriendRequest(user["@id"], friend["@id"])
     .then(() => {
       showSuccessNotification(t("Friend request sent successfully"))
     })
diff --git a/assets/vue/views/userreluser/UserRelUserSearch.vue b/assets/vue/views/userreluser/UserRelUserSearch.vue
index e9d6012c5a..fab3606f65 100644
--- a/assets/vue/views/userreluser/UserRelUserSearch.vue
+++ b/assets/vue/views/userreluser/UserRelUserSearch.vue
@@ -79,8 +79,8 @@ import { useI18n } from "vue-i18n"
 import { useNotification } from "../../composables/notification"
 import BaseToolbar from "../../components/basecomponents/BaseToolbar.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
-import { ENTRYPOINT } from "../../config/entrypoint"
-import axios from "axios"
+import userRelUserService from "../../services/userRelUserService"
+import userService from "../../services/userService"
 
 const store = useStore()
 const router = useRouter()
@@ -107,10 +107,9 @@ const isFriend = (user) => {
 
 async function fetchFriendsList() {
   try {
-    const response = await axios.get(`${ENTRYPOINT}user_rel_users`, {
-      params: { user: user.id, relationType: [3, 10] },
-    })
-    friendsList.value = response.data["hydra:member"].map((friendship) => friendship.friend.id).concat(user.id)
+    const friendshipList = await userRelUserService.getFriendList(user["@id"])
+
+    friendsList.value = friendshipList.map((friendship) => friendship.friend.id).concat(user.id)
   } catch (error) {
     showErrorNotification(t("Error fetching friends list"))
     console.error("Error fetching friends list:", error)
@@ -121,8 +120,9 @@ const asyncFind = async (query) => {
   if (query.length < 3) return
   isLoadingSelect.value = true
   try {
-    const { data } = await axios.get(`${ENTRYPOINT}users`, { params: { username: query } })
-    foundUsers.value = data["hydra:member"].filter((foundUser) => !friendsList.value.includes(foundUser.id))
+    const { items } = await userService.findByUsername(query)
+
+    foundUsers.value = items.filter((foundUser) => !friendsList.value.includes(foundUser.id))
   } catch (error) {
     showErrorNotification(t("Error fetching users"))
   } finally {
@@ -131,11 +131,7 @@ const asyncFind = async (query) => {
 }
 const addFriend = async (friend) => {
   try {
-    await axios.post(`${ENTRYPOINT}user_rel_users`, {
-      user: user["@id"],
-      friend: friend["@id"],
-      relationType: 10,
-    })
+    await userRelUserService.sendFriendRequest(user["@id"], friend["@id"])
     showSuccessNotification(t("Friend request sent successfully"))
     await fetchFriendsList()
     const searchQuery = router.currentRoute.value.query.search