Persist Questions When Clicked (#69)

* Persisting questions when clicked.

* - Refactored the questions to store them in the localStorage so we can persist them when a question is clicked.

Author: jringeisen

database/seeders/PromptSeeder.php

@@ -36,10 +36,12 @@ public function run(): void
             [
                 'category' => 'questions',
                 'prompt' => <<<'EOT'
-                Create an curriculum outline for the subject for the kids to learn more about the topic below.
+                Create a curriculum outline for the subject for the kids to learn more about the topic below.
                 Don't number anything and simply list out the topics to the question. Each of the topics needs
                 to be able to be on it's own. (exclude things like "conclusion" "Wrapping up"). Give me the results
-                in a list and in json format with a key of questions. Include at least 10 items in the list.
+                in a list and in json format with a key of questions and each item being an object that contains
+                a question and a selected property set to false like such {question: "Why is the sky blue", selected: false}.
+                Include at least 10 items in the list.
                 EOT
             ],
             [

resources/js/Pages/Student/Prompts/Index.vue

@@ -107,10 +107,12 @@
     const submit = () => {
         flagged.value = false;
         form.post(route('student.prompts.store'));
+
+        localStorage.removeItem('questions');
     }
 
-    const handleQuestionClicked = (question) => {
-        form.question = question;
+    const handleQuestionClicked = (event) => {
+        form.question = event.question;
         form.post(route('student.prompts.store'));
     }
 

resources/js/Pages/Student/Prompts/Questions.vue

@@ -13,12 +13,13 @@
             <div class="whitespace-pre-wrap mt-14">
                 <ul>
                     <li
-                        v-for="(question, index) in questions"
+                        v-for="(item, index) in questions"
                         :key="index"
                         class="mb-2.5 cursor-pointer text-primary-yellow underline"
-                        @click.prevent="questionClicked(question)"
+                        :class="{'text-yellow-300 font-bold': item.selected}"
+                        @click.prevent="questionClicked(item)"
                     >
-                        {{ question }}
+                        {{ item.question }}
                     </li>
                 </ul>
             </div>
@@ -42,18 +43,30 @@ const props = defineProps({
 
 const emit = defineEmits(['questionClicked']);
 
-const questions = ref([]);
+const questions = ref(JSON.parse(localStorage.getItem('questions')) || []);
 const loading = ref(false);
 
 onMounted(() => {
-    loading.value = true;
-    axios.post('/student/prompts/questions', {question: props.question}).then(response => {
-        questions.value = response.data.questions;
-        loading.value = false;
-    });
+    if (questions.value.length === 0) {
+        loading.value = true;
+
+        axios.post('/student/prompts/questions', {question: props.question}).then(response => {
+            questions.value = response.data.questions;
+            loading.value = false;
+        });
+    }
 });
 
-const questionClicked = (question) => {
-    emit('questionClicked', question);
+const questionClicked = (item) => {
+    const formattedQuestions = questions.value.map((q, index) => {
+        return {
+            'question': q.question,
+            'selected': q.question === item.question || q.selected
+        }
+    });
+
+    localStorage.setItem('questions', JSON.stringify(formattedQuestions));
+
+    emit('questionClicked', {question: item.question});
 }
 </script>