Added new ReviewList and ReviewForm to leave a reviews for people to …

src/components/ProductDisplay.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
+import ReviewForm from './ReviewForm.vue'
+import ReviewList from '@/components/ReviewList.vue'
 import socksGreenImage from '@/assets/images/socks_green.jpeg'
 import socksBlueImage from '@/assets/images/socks_blue.jpeg'
 
@@ -24,6 +26,8 @@ const variants = ref([
   { id: 2235, color: 'blue', image: socksBlueImage, quantity: 0 },
 ])
 
+const reviews = ref([])
+
 const title = computed(() => {
   return brand.value + ' ' + product.value
 })
@@ -52,6 +56,10 @@ const addToCart = () => {
 const updateVariant = (index) => {
   selectedVariant.value = index
 }
+
+const addReview = (refiew) => {
+  reviews.value.push(refiew)
+}
 </script>
 
 <template>
@@ -86,5 +94,7 @@ const updateVariant = (index) => {
         </button>
       </div>
     </div>
+    <ReviewList v-if="reviews.length > 0" :reviews="reviews"></ReviewList>
+    <ReviewForm @review-submitted="addReview"></ReviewForm>
   </div>
 </template>

src/components/ReviewForm.vue

@@ -1,5 +1,38 @@
+<script setup>
+import { reactive } from 'vue'
+
+const emit = defineEmits(['review-submitted'])
+
+const review = reactive({
+  name: '',
+  content: '', 
+  recomend: '',
+  rating: null
+})
+
+const onSubmit = () => {
+  if(review.name === '' || review.content === '' || review.rating === null || review.recomend === '') {
+    alert('Review is incomplete. Please fill out every field.')
+    return
+  }
+
+  const ProductReview = {
+    name: review.name,
+    content: review.content,
+    recomend: review.recomend,
+    rating: review.rating
+  }
+  emit('review-submitted', ProductReview)
+
+  review.name = ''
+  review.content = ''
+  review.recomend = ''
+  review.rating = null
+}
+</script>
+
 <template>
-  <form class="review-form">
+  <form class="review-form" @submit.prevent ="onSubmit">
     <h3>Leave a review</h3>
     <label for="name">Name:</label>
     <input id="name" v-model="review.name">
@@ -16,6 +49,12 @@
       <option>1</option>
     </select>
 
+    <label for="recomend">Would you recomend this product?</label>
+    <select id="recomend" v-model="review.recomend">
+      <option>Yes</option>
+      <option>No</option>
+    </select>
+
     <input class="button" type="submit" value="Submit">
   </form>
 </template>

src/components/ReviewList.vue

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+    reviews: {
+        type: Array,
+        required: true
+    }
+})
+
+</script>
+
+<template>
+    <div class = "review-container">
+        <h3>Reviews: </h3>
+        <ul>
+            <li v-for="(review, index) in reviews" :key="index">
+            <span>{{ review.name }} gave this {{ review.rating }} stars</span>
+            <br />
+            <span>Would you recomend the product ? {{ review.recomend }}</span>
+            <br />
+            <span>"{{ review.content }}"</span>
+            </li>
+        </ul>
+    </div>
+</template>