REFACTOR: REST API endpoints and integration in frontend

src/questions/api/urls.py

@@ -9,19 +9,19 @@
 urlpatterns = [
     path("", include(router.urls)), 
 
-    path("questions/<slug:slug>/answers/", 
+    path("questions-answers/<slug:slug>/",
          qv.AnswerListAPIView.as_view(),
          name="answer-list"),
 
-    path("questions/<slug:slug>/answer/", 
+    path("questions-new-answer/<slug:slug>/",
          qv.AnswerCreateAPIView.as_view(),
          name="answer-create"),
 
-    path("answers/<uuid:uuid>/", 
+    path("answers-detail/<uuid:uuid>/",
          qv.AnswerRUDAPIView.as_view(),
          name="answer-detail"),
 
-    path("answers/<uuid:uuid>/like/",
+    path("answers-like/<uuid:uuid>/",
          qv.AnswerLikeAPIView.as_view(),
          name="answer-like")
 ]

src/vite-frontend/src/App.vue

@@ -7,6 +7,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 import NavbarComponent from "@/components/Navbar.vue";
 
 export default {
@@ -18,7 +19,7 @@ export default {
     async setUserInfo() {
       // add the username of the current user to localStorage
       try {
-        const response = await axios.get("/auth/users/me/");
+        const response = await axios.get(endpoints["usersDetail"]);
         const requestUser = response.data["username"];
         window.localStorage.setItem("username", requestUser);
       } catch (error) {

src/vite-frontend/src/common/endpoints.js

@@ -0,0 +1,14 @@
+const baseAcademyEndpoint = "/api/v1/";
+
+const endpoints = {
+  questionsCRUD: `${baseAcademyEndpoint}questions/`,
+  questionsAnswersList: `${baseAcademyEndpoint}questions-answers/`,
+  questionsNewAnswer: `${baseAcademyEndpoint}questions-new-answer/`,
+
+  answersDetail: `${baseAcademyEndpoint}answers-detail/`,
+  answersLike: `${baseAcademyEndpoint}answers-like/`,
+
+  usersDetail: "/auth/users/me/"
+};
+
+export { endpoints };

src/vite-frontend/src/components/Answer.vue

@@ -30,6 +30,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 
 export default {
   name: "AnswerComponent",
@@ -63,7 +64,7 @@ export default {
     async likeAnswer() {
       this.userLikedAnswer = true;
       this.likesCounter += 1;
-      const endpoint = `/api/v1/answers/${this.answer.uuid}/like/`;
+      const endpoint = `${endpoints["answersLike"]}${this.answer.uuid}/`;
       try {
         await axios.post(endpoint);
       } catch (error) {
@@ -74,7 +75,7 @@ export default {
     async unLikeAnswer() {
       this.userLikedAnswer = false;
       this.likesCounter -= 1;
-      const endpoint = `/api/v1/answers/${this.answer.uuid}/like/`;
+      const endpoint = `${endpoints["answersLike"]}${this.answer.uuid}/`;
       try {
         await axios.delete(endpoint);
       } catch (error) {

src/vite-frontend/src/components/QuestionActions.vue

@@ -15,6 +15,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 
 export default {
   name: "QuestionActions",
@@ -31,7 +32,7 @@ export default {
   },
   methods: {
     async deleteQuestion() {
-      const endpoint = `/api/v1/questions/${this.slug}/`;
+      const endpoint = `${endpoints["questionsCRUD"]}${this.slug}/`;
       try {
         await axios.delete(endpoint);
         this.$router.push({

src/vite-frontend/src/views/AnswerEditor.vue

@@ -12,6 +12,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 
 export default {
   name: "AnswerEditor",
@@ -34,7 +35,7 @@ export default {
         this.error = "You can't submit an empty answer!";
         return;
       }
-      const endpoint = `/api/v1/answers/${this.uuid}/`;
+      const endpoint = `${endpoints["answersDetail"]}${this.uuid}/`;
       try {
         await axios.put(endpoint, { body: this.answerBody });
         this.$router.push({
@@ -49,7 +50,7 @@ export default {
   },
   async beforeRouteEnter(to, from, next) {
     // get the answer's data from the REST API and set two data properties for the component
-    const endpoint = `/api/v1/answers/${to.params.uuid}/`;
+    const endpoint = `${endpoints["answersDetail"]}${to.params.uuid}/`;
     try {
       const response = await axios.get(endpoint);
       return next(

src/vite-frontend/src/views/HomeView.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 
 export default {
   name: "home-view",
@@ -40,7 +41,7 @@ export default {
   methods: {
     async getQuestions() {
       // make a GET Request to the questions list endpoint and populate the questions array
-      let endpoint = "/api/v1/questions/";
+      let endpoint = endpoints["questionsCRUD"];
       if (this.next) {
         endpoint = this.next;
       }

src/vite-frontend/src/views/QuestionEditor.vue

@@ -11,6 +11,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 
 export default {
   name: "QuestionEditor",
@@ -29,7 +30,7 @@ export default {
   methods: {
     async performNetworkRequest() {
       // Tell the REST API to create or update a Question instance;
-      let endpoint = "/api/v1/questions/";
+      let endpoint = endpoints["questionsCRUD"];
       let method = "POST";
       if (this.slug !== undefined && this.slug !== "") {
         endpoint += `${this.slug}/`;
@@ -64,7 +65,7 @@ export default {
     // if the component is used to update a question
     // get the question's data from the REST API
     if (to.params.slug !== undefined && to.params.slug !== "") {
-      const endpoint = `/api/v1/questions/${to.params.slug}/`;
+      const endpoint = `${endpoints["questionsCRUD"]}${to.params.slug}/`;
       try {
         const response = await axios.get(endpoint);
         return next((vm) => (vm.questionBody = response.data.content));

src/vite-frontend/src/views/QuestionView.vue

@@ -49,6 +49,7 @@
 
 <script>
 import { axios } from "@/common/api.service.js";
+import { endpoints } from "@/common/endpoints.js";
 import AnswerComponent from "@/components/Answer.vue";
 import QuestionActions from "@/components/QuestionActions.vue";
 
@@ -94,7 +95,7 @@ export default {
     },
     async getQuestionData() {
       // get the details of a question instance from the REST API and call setPageTitle
-      const endpoint = `/api/v1/questions/${this.slug}/`;
+      const endpoint = `${endpoints["questionsCRUD"]}${this.slug}/`;
       try {
         const response = await axios.get(endpoint);
         this.question = response.data;
@@ -108,7 +109,7 @@ export default {
     },
     async getQuestionAnswers() {
       // get a page of answers for a single question from the REST API's paginated 'Questions Endpoint'
-      let endpoint = `/api/v1/questions/${this.slug}/answers/`;
+      let endpoint = `${endpoints["questionsAnswersList"]}${this.slug}/`;
       if (this.next) {
         endpoint = this.next;
       }
@@ -134,7 +135,7 @@ export default {
         this.error = "You can't send an empty answer!";
         return;
       }
-      const endpoint = `/api/v1/questions/${this.slug}/answer/`;
+      const endpoint = `${endpoints["questionsNewAnswer"]}${this.slug}/`;
       try {
         const response = await axios.post(endpoint, {
           body: this.newAnswerBody,
@@ -153,7 +154,7 @@ export default {
     },
     async deleteAnswer(answer) {
       // delete a given answer from the answers array and make a delete request to the REST API
-      const endpoint = `/api/v1/answers/${answer.uuid}/`;
+      const endpoint = `${endpoints["answersDetail"]}${answer.uuid}/`;
       try {
         await axios.delete(endpoint);
         this.answers.splice(this.answers.indexOf(answer), 1);