feat: add team loading

src/components/TeamMember.vue

@@ -2,7 +2,7 @@
   <article class="w-[342px]">
     <img
       class="w-[193px] h-[193px] mx-auto"
-      :src="`${$publicPath}img/team/${data.image}`"
+      :src="`${apiUrl}${data.image.data.attributes.url}`"
       alt=""
     />
     <p class="text-center mt-6 text-dark font-bold text-lg">
@@ -20,6 +20,11 @@
 <script>
 export default {
   name: "TeamMember",
+  data() {
+    return {
+      apiUrl: process.env.VUE_APP_API_URL,
+    };
+  },
   props: {
     data: {
       type: Object,

src/pages/HomePage.vue

@@ -150,9 +150,9 @@
           class="mt-16 mx-auto mb-[53px] w-max grid grid-cols-1 lg:grid-cols-2 gap-x-[90px] gap-y-16"
         >
           <TeamMember
-            v-for="(member, index) in team"
-            :key="index"
-            :data="member"
+            v-for="member in $store.state.team"
+            :key="member.id"
+            :data="member.attributes"
           ></TeamMember>
         </div>
         &nbsp;
@@ -213,8 +213,8 @@ export default {
       this.reviews = [...this.$store.state.reviews];
       this.onWidthChange();
       this.updateReviews();
-      console.log(this.reviews);
     });
+    this.$store.dispatch("getTeam");
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.onWidthChange);

src/plugins/store.js

@@ -9,6 +9,7 @@ export default new Vuex.Store({
     services: [],
     homePage: null,
     reviews: [],
+    team: [],
   },
   mutations: {
     setServices(state, services) {
@@ -29,8 +30,11 @@ export default new Vuex.Store({
       state.homePage = payload;
     },
     setReviews(state, payload) {
-        state.reviews = payload;
-      },
+      state.reviews = payload;
+    },
+    setTeam(state, payload) {
+      state.team = payload;
+    },
   },
   actions: {
     async getServices(state) {
@@ -66,21 +70,37 @@ export default new Vuex.Store({
       });
     },
     async getReviews(state) {
-        return new Promise((resolve) => {
-          if (!state.getters.isReviewsEmpty) {
+      return new Promise((resolve) => {
+        if (!state.getters.isReviewsEmpty) {
+          resolve();
+          return;
+        }
+        axios
+          .get(`/V1/reviews`)
+          .then((response) => {
+            state.commit("setReviews", response.data.data);
+          })
+          .finally(() => {
             resolve();
-            return;
-          }
-          axios
-            .get(`/V1/reviews`)
-            .then((response) => {
-              state.commit("setReviews", response.data.data);
-            })
-            .finally(() => {
-              resolve();
-            });
-        });
-      },
+          });
+      });
+    },
+    async getTeam(state) {
+      return new Promise((resolve) => {
+        if (!state.getters.isTeamEmpty) {
+          resolve();
+          return;
+        }
+        axios
+          .get(`/V1/team-members?populate=*`)
+          .then((response) => {
+            state.commit("setTeam", response.data.data);
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
   },
   getters: {
     isServicesEmpty(state) {
@@ -90,7 +110,10 @@ export default new Vuex.Store({
       return state.homePage ? false : true;
     },
     isReviewsEmpty(state) {
-        return state.reviews.length <= 0;
-      },
+      return state.reviews.length <= 0;
+    },
+    isTeamEmpty(state) {
+      return state.team.length <= 0;
+    },
   },
 });