Fixing bug after refresh

frontend/src/components/AnswerForm.vue

@@ -1,11 +1,6 @@
 <script setup>
-import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { defineEmits, onMounted, ref } from 'vue';
-
-// default variables
-const route = useRoute();
-const id_category = route.params.id_category;
+import { defineEmits, onMounted, ref, defineProps, watch } from 'vue';
 
 // variables specific to this component
 const emit = defineEmits(['newQuestion'])
@@ -17,6 +12,13 @@ const options = ref([]);
 
 const response_to_answer = ref(null);
 
+const props = defineProps({
+    hasAskedOptions: {
+        type: Boolean,
+        required: true,
+    }
+})
+
 const submitAnswerText = async () => {
     const response = await axios.post(`/api/question/answer_text/`, {
         answer: answer_text.value,
@@ -39,36 +41,26 @@ const fetchOptions = async () => {
     });
     options.value = response.data.options;
 }
-
-const hasAskedOptions = async () => {
-    const response = await axios.get(`/api/question/options_asked`);
-    return !!response.data.options_asked;
-}
-
 const newQuestion = () => {
     answer_sent.value = false;
     show_text_form.value = true;
     answer_text.value = "";
     emit('newQuestion');
 }
 
-const init = async () => {
-    // ask backend if the user has already ask options in this category
-    // if so, show the options form
-
-    console.log("request Has asked options")
-    const response = await hasAskedOptions();
-    console.log("response Has asked options")
-    console.log(response);
-    if (response) {
+const displayOptionsAsked = () => {
+    if (props.hasAskedOptions) {
         fetchOptions();
         show_text_form.value = false;
     }
-    // if not, show the text form (default value is true)
 }
 
 onMounted(() => {
-    init();
+    displayOptionsAsked();
+});
+
+watch(() => props.hasAskedOptions, () => {
+    displayOptionsAsked();
 });
 </script>
 

frontend/src/views/QuizView.vue

@@ -10,13 +10,16 @@ const id_category = route.params.id_category;
 
 // variables specific to this component
 const question = ref(null);
+const hasAskedOptions = ref(false);
 
 const fetchNewQuestion = async () => {
-    console.log("fetch new question");
-    const response = await axios.get(`/api/question/${id_category}/new`, {
+    const responseQuestion = await axios.get(`/api/question/${id_category}/new`, {
     });
-    console.log("response to new question");
-    question.value = response.data.text;
+    question.value = responseQuestion.data.text;
+
+    // wait for the question before checking if the user has asked for options
+    const responseOptionAsked = await axios.get(`/api/question/options_asked`);
+    hasAskedOptions.value = !!responseOptionAsked.data.options_asked;
 }
 
 onMounted(() => {
@@ -30,7 +33,7 @@ onMounted(() => {
         <p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
         <h1 class="title">Question</h1>
         <p class="question box">{{ question }}</p>
-        <AnswerForm @new-question="fetchNewQuestion" />
+        <AnswerForm @new-question="fetchNewQuestion" :hasAskedOptions="hasAskedOptions"/>
         <LeaderBoard :id_category="Number(id_category)"/>
     </section>
 </template>