Finished extra credit - removing next link if no more pages

Author: Gregg

src/store.js

@@ -16,14 +16,18 @@ export default new Vuex.Store({
       'food',
       'community'
     ],
-    events: []
+    events: [],
+    eventsTotal: 0
   },
   mutations: {
     ADD_EVENT(state, event) {
       state.events.push(event)
     },
     SET_EVENTS(state, events) {
       state.events = events
+    },
+    SET_EVENTS_TOTAL(state, eventsTotal) {
+      state.eventsTotal = eventsTotal
     }
   },
   actions: {
@@ -35,6 +39,10 @@ export default new Vuex.Store({
     fetchEvents({ commit }, { perPage, page }) {
       EventService.getEvents(perPage, page)
         .then(response => {
+          commit(
+            'SET_EVENTS_TOTAL',
+            parseInt(response.headers['x-total-count'])
+          )
           commit('SET_EVENTS', response.data)
         })
         .catch(error => {

src/views/EventList.vue

@@ -4,10 +4,13 @@
     <EventCard v-for="event in events" :key="event.id" :event="event"/>
     <template v-if="page != 1">
       <router-link :to="{ name: 'event-list', query: { page: page - 1 } }" rel="prev">
-      Prev Page</router-link> |
+      Prev Page</router-link>
+      <template v-if="isLastPage"> | </template>
     </template>
-    <router-link :to="{ name: 'event-list', query: { page: page + 1 } }" rel="next">
+    <template v-if="isLastPage">
+      <router-link :to="{ name: 'event-list', query: { page: page + 1 } }" rel="next">
       Next Page</router-link>
+    </template>
   </div>
 </template>
 
@@ -29,7 +32,10 @@ export default {
     page() {
       return parseInt(this.$route.query.page) || 1
     },
-    ...mapState(['events'])
+    isLastPage() {
+      return this.eventsTotal > this.page * 3
+    },
+    ...mapState(['events', 'eventsTotal'])
   }
 }
 </script>