Fetch products inside Vuex and display them using `ProductCard`

components.

3 files changed, 42 insertions, 9 deletions

diff --git a/client/src/components/ProductCard.vue b/client/src/components/ProductCard.vue
index 57698e5..849c360 100644
--- a/client/src/components/ProductCard.vue
+++ b/client/src/components/ProductCard.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="card">
-    <img :src="productImg" class="card-img-top">
+    <img :src="ImgLink" class="card-img-top">
     <div class="card-body">
-      <h5 class="card-title">{{ productName }}</h5>
-      <a :href="productLink" class="btn btn-dark w-100">Details</a>
+      <h5 class="card-title">{{ Name }}</h5>
+      <p class="card-text">Price: ${{ Price }}</p>
+      <router-link class="btn btn-dark w-100" :to="ProductLink">Details</router-link>
     </div>
   </div>
 </template>
@@ -12,9 +13,18 @@
 export default {
   name: 'ProductCard',
   props: {
-    productName: String,
-    productImg: String,
-    productLink: String
+    Id: String,
+    Name: String,
+    Img: String,
+    Price: Number
+  },
+  computed: {
+    ImgLink() {
+      return `${process.env.VUE_APP_ROOT_API}/${this.Img}`;
+    },
+    ProductLink() {
+      return `/product/${this.Id}`
+    }
   }
 }
 </script>
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 5f05f19..d2fe9b7 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -1,11 +1,26 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
+import axios from 'axios';
 
 export default createStore({
   state: {
+    products: []
+  },
+  getters: {
+    getProducts(state) {
+      return state.products;
+    }
   },
   mutations: {
+    setProducts(state, products) {
+      state.products = products;
+    }
   },
   actions: {
+    async pullProducts(context) {
+      await axios.get(`${process.env.VUE_APP_ROOT_API}/products`)
+        .then(response => context.commit('setProducts', response.data))
+        .catch(error => console.error(error));
+    }
   },
   modules: {
   }
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 3e89885..a71d2cb 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row mt-5">
-    <div class="col-lg-3 col-md-4 col-sm-6">
-      <ProductCard/>
+    <div v-for="product in products" :key="product._id" class="col-lg-3 col-md-4 col-sm-6">
+      <ProductCard :Id="product._id" :Name="product.name" :Price="product.price" :Img="product.imagePath"/>
     </div>
   </div>
 </template>
@@ -13,6 +13,14 @@ export default {
   name: 'Home',
   components: {
     ProductCard
+  },
+  mounted() {
+    this.$store.dispatch('pullProducts');
+  },
+  computed: {
+    products() {
+      return this.$store.getters.getProducts;
+    }
   }
 }
 </script>