Using Vuex to handle pagination and list size

Author: JBris

client/src/components/PaginatedList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="paginated-list" @resetPageNumber="pageNumber = $event">
+  <div class="paginated-list" >
       <div class="row">
         <ListItem class="col-md-3" 
           v-for="repo in paginatedData"   
@@ -27,29 +27,19 @@
     components:{
       ListItem,
     },
-    data() {
-      return {
-        pageNumber: 0
-      }
-    },
     props:{
       list:{
         type:Array,
         required:true
       },
-      size:{
-        type:Number,
-        required:false,
-        default: 10
-      },
     },
     methods: {
       nextPage() {
-         this.pageNumber++;
+        this.$store.commit('incrementSearchPageNumber')
       },
       prevPage(){
-        this.pageNumber--;
-      }
+        this.$store.commit('decrementSearchPageNumber')
+      },
     },
     computed: {
       pageCount() {
@@ -64,7 +54,13 @@
         if (start > len ) { start = len - this.size; }
         const end = start + this.size;     
         return this.list.slice(start, end);
-      }
+      },
+      size() {
+        return this.$store.state.searchListSize
+      },
+      pageNumber() {
+        return this.$store.state.searchPageNumber
+      },
     }
   };
 </script>

client/src/components/PaginationSelect.vue

@@ -20,8 +20,9 @@
     },
     methods: {
         changeSearchPagination(event) {
-            const size = parseInt(event.target.value);
-            this.$emit('changeSearchPagination', size)
+          const size = parseInt(event.target.value);
+          this.$store.commit('setSearchListSize', size);
+          this.$store.commit('resetSearchPageNumber')
         }
     }
   }

client/src/components/SearchForm.vue

@@ -3,16 +3,14 @@
     <div>
         <input type="text" v-model="project" class="form-control" placeholder="search projects...">
         <ProviderSelect/>
-        <PaginationSelect @changeSearchPagination="size = $event" />
+        <PaginationSelect/>
         <div v-if="$apollo.queries.gitRepos.loading">Searching...</div>
         <div v-if="error">{{ error }}</div>
         <br/>
         <PaginatedList 
           v-if="gitRepoResults.length > 0" 
           :list="gitRepoResults" 
-          :size="size" 
-          :pageNumber="pageNumber" 
-          @resetPageNumber="pageNumber = $event" />
+        />
     </div>
   </div>
 
@@ -30,8 +28,6 @@
       return {
         project: '',
         error: null,
-        size: 10,
-        pageNumber: 0,
       }
     },
     components:{
@@ -50,7 +46,7 @@
           }
         },
         result ({ data }) {
-            this.$emit('resetPageNumber', 0);
+            this.$store.commit('resetSearchPageNumber')
             return this.gitRepoResults = data.gitRepos.items;
         },
         options: () => ({ errorPolicy: 'all' }),

client/src/store.js

@@ -6,15 +6,29 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     provider: 'GITHUB',
-    gitRepos: []
+    gitRepos: [],
+    searchPageNumber: 0,
+    searchListSize: 10,
   },
   mutations: {
     setProvider(state, provider) {
       state.provider = provider;
     },
     setGitRepos(state, gitRepos) {
       state.gitRepos = gitRepos;
-    }
+    },
+    incrementSearchPageNumber(state) {
+      state.searchPageNumber++;
+    },
+    decrementSearchPageNumber(state) {
+      state.searchPageNumber--;
+    },
+    resetSearchPageNumber(state) {
+      state.searchPageNumber = 0;
+    },
+    setSearchListSize(state, searchListSize) {
+      state.searchListSize = searchListSize;
+    },
   },
   actions: {