Product page shows amount of product in cart.

Allows for removal of product from cart.
Product page now uses Vuex instead of local values.

2 files changed, 59 insertions, 31 deletions

diff --git a/client/src/store/index.js b/client/src/store/index.js
index 3d612c7..086c544 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -4,6 +4,7 @@ import axios from 'axios';
 export default createStore({
   state: {
     products: [],
+    currentProduct: {},
     cart: []
   },
   getters: {
@@ -22,23 +23,48 @@ export default createStore({
       let sum = 0;
       state.cart.forEach(x => sum += x.price * x.quantity);
       return sum;
+    },
+    getCurrentProduct(state) {
+      return state.currentProduct;
+    },
+    getCurrentProductImgUrl(state) {
+      return `${process.env.VUE_APP_ROOT_API}/${state.currentProduct.imagePath}`;
+    },
+    getCurrentProductQuantity(state) {
+      let amount = 0
+      state.cart.forEach(x => {
+        if (x.id == state.currentProduct._id)
+          amount = x.quantity;
+      });
+      return amount;
     }
   },
   mutations: {
     setProducts(state, products) {
       state.products = products;
     },
-    addToCart(state, product) {
-      let foundProduct = state.cart.find(x => x.id == product._id);
+    setCurrentProduct(state, product) {
+      state.currentProduct = product;
+    },
+    addToCart(state) {
+      let foundProduct = state.cart.find(x => x.id == state.currentProduct._id);
       if (foundProduct)
         foundProduct.quantity++;
       else
         state.cart.push({
-          id: product._id,
-          name: product.name,
-          price: product.price,
+          id: state.currentProduct._id,
+          name: state.currentProduct.name,
+          price: state.currentProduct.price,
           quantity: 1
         });
+    },
+    removeFromCart(state) {
+      let foundProduct = state.cart.find(x => x.id == state.currentProduct._id);
+      if (foundProduct) {
+        foundProduct.quantity--;
+        if (foundProduct.quantity == 0)
+          state.cart = state.cart.filter(x => x.id != foundProduct.id);
+      }
     }
   },
   actions: {
@@ -46,6 +72,11 @@ export default createStore({
       await axios.get(`${process.env.VUE_APP_ROOT_API}/products`)
         .then(response => context.commit('setProducts', response.data))
         .catch(error => console.error(error));
+    },
+    async pullProduct(context, productId) {
+      await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${productId}`)
+        .then(response => context.commit('setCurrentProduct', response.data))
+        .catch(error => console.error(error));
     }
   },
   modules: {
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 11643c1..ff43857 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -4,15 +4,19 @@
       <div class="row g-0">
 
         <div class="col-md-6">
-          <img :src="productImg" class="img-fluid rounded-start">
+          <img :src="curProductImg" class="img-fluid rounded-start">
         </div>
 
         <div class="col-md-6">
           <div class="card-body">
-            <h3 class="card-title" v-text="productName"></h3>
-            <b><i>Price: ${{ productPrice }}</i></b><br/>
-            <p class="card-text" v-text="productDescription"></p>
+            <h3 class="card-title" v-text="curProduct.name"></h3>
+            <h6 class="card-subtitle mb-2 text-muted">Price: ${{ curProduct.price }}</h6>
+            <p class="card-text" v-text="curProduct.description"></p>
+            <p class="card-text"><small class="text-muted">Amount: {{curProductQuantity}}</small></p>
+          </div>
+          <div class="card-footer">
             <div class="btn btn-dark" @click="buy">Add to cart</div>
+            <div class="btn btn-secondary ms-3" v-show="curProductQuantity" @click="remove">Remove from cart</div>
           </div>
         </div>
 
@@ -22,35 +26,28 @@
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
   name: 'Product',
   async mounted() {
-    await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${this.$route.params.id}`)
-      .then(response => {
-        this.productName = response.data.name;
-        this.productDescription = response.data.description;
-        this.productImg =  `${process.env.VUE_APP_ROOT_API}/${response.data.imagePath}`;
-        this.productPrice = response.data.price;
-      })
-      .catch(error => console.error(error));
+    this.$store.dispatch('pullProduct', this.$route.params.id);
   },
-  data() {
-    return {
-      productName: String,
-      productDescription: String,
-      productImg: String,
-      productPrice: Number
-    }
+  computed: {
+    curProduct() {
+      return this.$store.getters.getCurrentProduct;
+    },
+    curProductImg() {
+      return this.$store.getters.getCurrentProductImgUrl;
+    },
+    curProductQuantity() {
+      return this.$store.getters.getCurrentProductQuantity;
+    },
   },
   methods: {
     buy() {
-      this.$store.commit('addToCart', {
-        _id: this.$route.params.id,
-        name: this.productName,
-        price: this.productPrice
-      });
+      this.$store.commit('addToCart');
+    },
+    remove() {
+      this.$store.commit('removeFromCart');
     }
   }
 }