only load the coaches once a minute

src/pages/coaches/CoachesList.vue

@@ -12,7 +12,9 @@
   <base-card>
     <section>
       <div class="controls">
-        <base-button mode="outline" @click="loadCoaches">Refresh</base-button>
+        <base-button mode="outline" @click="loadCoaches(true)"
+          >Refresh</base-button
+        >
         <base-button v-if="!isCoach && !isLoading" link to="/register"
           >Register as Coach</base-button
         >
@@ -83,10 +85,12 @@ export default {
     setFilter(updatedFilters) {
       this.activeFilters = updatedFilters;
     },
-    async loadCoaches() {
+    async loadCoaches(refresh = false) {
       this.isLoading = true;
       try {
-        await this.$store.dispatch('coaches/loadCoaches');
+        await this.$store.dispatch('coaches/loadCoaches', {
+          forceRefresh: refresh
+        });
       } catch (error) {
         this.error = error || 'Something went wrong!';
       }

src/store/modules/coaches/actions.js

@@ -22,7 +22,10 @@ export default {
       console.log(err.message);
     }
   },
-  async loadCoaches(context) {
+  async loadCoaches(context, payload) {
+    if (!payload.forceRefresh && !context.getters.shouldUpdate) {
+      return;
+    }
     try {
       const response = await getAPI.get('coaches.json');
       const responseData = response.data;
@@ -39,6 +42,7 @@ export default {
         coaches.push(coach);
       }
       context.commit('setCoaches', coaches);
+      context.commit('setFetchTimestamp');
     } catch (err) {
       const error = new Error(err.message || 'Failed to fetch!');
       throw error;

src/store/modules/coaches/getters.js

@@ -9,5 +9,13 @@ export default {
     const coaches = getters.coaches;
     const userId = rootGetters.userId;
     return coaches.some(coach => coach.id === userId);
+  },
+  shouldUpdate(state) {
+    const lastFetch = state.lastFetch;
+    if (!lastFetch) {
+      return true;
+    }
+    const currentTimeStamp = new Date().getTime();
+    return (currentTimeStamp - lastFetch) / 1000 > 60;
   }
 };

src/store/modules/coaches/index.js

@@ -6,26 +6,8 @@ export default {
   namespaced: true,
   state() {
     return {
-      coaches: [
-        {
-          id: 'c1',
-          firstName: 'Maximilian',
-          lastName: 'Schwarzmüller',
-          areas: ['frontend', 'backend', 'career'],
-          description:
-            "I'm Maximilian and I've worked as a freelance web developer for years. Let me help you become a developer as well!",
-          hourlyRate: 30
-        },
-        {
-          id: 'c2',
-          firstName: 'Julie',
-          lastName: 'Jones',
-          areas: ['frontend', 'career'],
-          description:
-            'I am Julie and as a senior developer in a big tech company, I can help you get your first job or progress in your current role.',
-          hourlyRate: 30
-        }
-      ]
+      lastFetch: null,
+      coaches: []
     };
   },
   actions,

src/store/modules/coaches/mutations.js

@@ -4,5 +4,8 @@ export default {
   },
   setCoaches(state, payload) {
     state.coaches = payload;
+  },
+  setFetchTimestamp(state) {
+    state.lastFetch = new Date().getTime();
   }
 };