Merge pull request #128 from HE-Arc/78-COMI-change-syntax-from-thenca…

…tch-to-async-await

78 comi change syntax from thencatch to async await

frontend/src/api_client.js

@@ -181,4 +181,62 @@ export default
             throw new Error('Error logging in: ' + error.message);
         }
     }
+
+    /**
+     * Post a new community question to the API.
+     * @param {String} question - The text of the new question.
+     * @param {Array<String>} options - An array of options for the question.
+     * @returns {Object} An object containing information about the posted question:
+     *                    {
+     *                      user_is_correct: Boolean, // Indicates if the user's answer was correct.
+     *                      right_answer: String,      // The correct answer to the question.
+     *                      answer_sent: String        // The answer that was submitted.
+     *                    }
+     */
+    static async postNewCommunityQuestion(question, options) {
+        const response = await axios.post(`/api/question/new_community/`, {
+            question,
+            options,
+            answer: '0'
+        });
+
+        return response.data;
+    }
+
+    /**
+     * Register a new user
+     * @param {String} username The username of the new user
+     * @param {String} password The password of the new user
+     * @returns {Object} The response data from the API
+     */
+    static async registerUser(username, password) {
+        try {
+            const response = await axios.post('/api/user/register/', {
+                username,
+                password
+            });
+            return response.data;
+        } catch (error) {
+            throw new Error('Error registering user: ' + error.message);
+        }
+    }
+
+    /**
+     * Log in an existing user
+     * @param {String} username The username of the user
+     * @param {String} password The password of the user
+     * @returns {Object} The response data from the API
+     */
+    static async loginUser(username, password) {
+        try {
+            const response = await axios.post('/api/user/login/', {
+                username,
+                password
+            });
+            return response.data;
+        } catch (error) {
+            throw new Error('Error logging in: ' + error.message);
+        }
+    }
 }
+

frontend/src/views/AddQuestionView.vue

@@ -1,16 +1,15 @@
 <script setup>
 import CustomInput from '@/components/CustomInput.vue';
+import APIClient from '@/api_client.js';
 import { ref } from 'vue';
-import axios from 'axios';
-
-const API_SERVER = import.meta.env.VITE_API_SERVER;
 
 const question = ref('');
 const correctAnswer = ref('');
 const wrongAnswer1 = ref('');
 const wrongAnswer2 = ref('');
 const wrongAnswer3 = ref('');
 const validationMessage = ref('');
+
 const clearForm = () => {
     question.value = '';
     correctAnswer.value = '';
@@ -19,34 +18,34 @@ const clearForm = () => {
     wrongAnswer3.value = '';
 };
 
-const submitForm = () => {
-    if (!question.value.trim() || !correctAnswer.value.trim() || !wrongAnswer1.value.trim()
-        || !wrongAnswer2.value.trim() || !wrongAnswer3.value.trim()) {
-        validationMessage.value = 'Please fill in all fields.';
-        return;
-    }
+const submitForm = async () => {
+    validationMessage.value = '';
+    try {
+        if (!question.value.trim() || !correctAnswer.value.trim() || !wrongAnswer1.value.trim()
+            || !wrongAnswer2.value.trim() || !wrongAnswer3.value.trim()) {
+            validationMessage.value ='Please fill in all fields. ';
+        }
 
-    if (question.value.length > 250 || correctAnswer.value.length > 250 || wrongAnswer1.value.length > 250
-        || wrongAnswer2.value.length > 250 || wrongAnswer3.value.length > 250) {
-        validationMessage.value = 'Input fields cannot exceed 250 characters.';
-        return;
-    }
+        if (question.value.length > 250 || correctAnswer.value.length > 250 || wrongAnswer1.value.length > 250
+            || wrongAnswer2.value.length > 250 || wrongAnswer3.value.length > 250) {
+            validationMessage.value = 'Input fields cannot exceed 250 characters. ';
+        }
+
+        const options = [
+            correctAnswer.value.trim(),
+            wrongAnswer1.value.trim(),
+            wrongAnswer2.value.trim(),
+            wrongAnswer3.value.trim()
+        ];
+
+        const response = await APIClient.postNewCommunityQuestion(question.value.trim(), options);
 
-    axios.post(`${API_SERVER}/api/question/new_community/`, {
-        question: question.value.trim(),
-        options: [correctAnswer.value.trim(), wrongAnswer1.value.trim(), wrongAnswer2.value.trim(), wrongAnswer3.value.trim()],
-        answer: '0' // Indicate which option is the correct answer.
-    })
-    .then(response => {
-        console.log('Question saved successfully:', response.data);
         validationMessage.value = 'Question saved successfully.';
-        clearForm();
-    })
-    .catch(error => {
-        console.error('Error saving question:', error);
-        validationMessage.value = 'Error saving question. Please try again later.';
-        // TODO: Show detail error message to user
-    });
+    } catch (error) {
+        validationMessage.value += 'Failed to save question. Please try again.';
+        console.error('Error saving question:', error.message);
+    }
+  clearForm();
 };
 </script>
 
@@ -56,7 +55,6 @@ const submitForm = () => {
             <h1 class="title">Add your question</h1>
             <p class="info">Help us become the best quiz game ever by adding your amazing new question!</p>
         </div>
-        <p :class="{ 'success-message': validationMessage === 'Question saved successfully.' }">{{ validationMessage }}</p>
         <form @submit.prevent="submitForm" class="form-wrapper">
             <div class="box">
                 <CustomInput label="Question" v-model="question" required />
@@ -66,6 +64,8 @@ const submitForm = () => {
                 <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
                 <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required />
                 <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required />
+                <p class="info" :style="{ color : validationMessage === 'Question saved successfully.' ?
+                    'green' : 'red'}">{{ validationMessage }}</p>
             </div>
             <div class="button-wrapper">
                 <button type="submit" class="btn">Submit</button>
@@ -79,23 +79,19 @@ const submitForm = () => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    min-height: 80vh;
 }
 
 .title, .info {
     text-align: center;
 }
 
-.success-message {
-    color: green;
-}
-
 @media (min-width: 576px) {
     .form-wrapper {
         max-width: 90%;
     }
 }
 
-
 @media (min-width: 1024px) {
     .form-wrapper {
         max-width: 70%;