Fetch products inside Vuex and display them using `ProductCard`

components.

5 files changed, 52 insertions, 11 deletions

diff --git a/client/package-lock.json b/client/package-lock.json
index 24dc872..b3c84a5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2489,6 +2489,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5581,8 +5589,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
     "for-in": {
       "version": "1.0.2",
diff --git a/client/package.json b/client/package.json
index 17dc6f0..db66ead 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.9.2",
+    "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
     "core-js": "^3.6.5",
     "validator": "^13.6.0",
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>