fix page change on arrow click & simplify pagination component

src/components/Account/UserProjectsList.vue

@@ -107,8 +107,7 @@
       <Pagination
         v-if="count"
         :nb-pages="Math.ceil(count/10)"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        @page-update="changePage"
       />
     </div>
   </div>

src/components/Pagination.vue

@@ -7,9 +7,8 @@
           :class="{ disabled: currentPage === 1 }"
         >
           <a
-            class="page-link"
-            :href="currentLocation"
-            @click="currentPage -= 1"
+            class="page-link pointer"
+            @click="changePage(currentPage - 1)"
           >
             <i
               class="ui icon big angle left"
@@ -28,8 +27,7 @@
             :class="{ active: currentPage === index }"
           >
             <a
-              class="page-link"
-              :href="currentLocation"
+              class="page-link pointer"
               @click="changePage(index)"
             >
               {{ index }}
@@ -47,8 +45,7 @@
             :class="{ active: currentPage === index }"
           >
             <a
-              class="page-link"
-              :href="currentLocation"
+              class="page-link pointer"
               @click="changePage(index)"
             >
               {{ index }}
@@ -60,9 +57,8 @@
           :class="{ disabled: currentPage === nbPages }"
         >
           <a
-            class="page-link"
-            :href="currentLocation"
-            @click="currentPage += 1"
+            class="page-link pointer"
+            @click="changePage(currentPage + 1)"
           >
             <i
               class="ui icon big angle right"
@@ -86,35 +82,12 @@ export default {
       type: Number,
       default: 1
     },
-
-    onPageChange: {
-      type: Function,
-      default: () => {
-        return () => 1;
-      }
-    }
-  },
-
-  data() {
-    return {
-      // TODO: Refactor by using native scroll to top instead of this
-      currentLocation: `${window.location.origin}${window.location.pathname}#`,
-    };
   },
 
   computed: {
     ...mapState('projects', ['currentPage']),
   },
 
-  watch: {
-    currentPage: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.onPageChange(newValue);
-        this.$emit('change-page', newValue);
-      }
-    }
-  },
-
   methods: {
     ...mapMutations('projects', [
       'SET_CURRENT_PAGE',
@@ -154,6 +127,10 @@ export default {
     changePage(pageNumber) {
       if (typeof pageNumber === 'number') {
         this.SET_CURRENT_PAGE(pageNumber);
+        // Scroll back to the first results on top of page
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+        // emit event for parent component to fetch new page data
+        this.$emit('page-update', pageNumber);
       }
     }
   }

src/views/Projects/ProjectsList.vue

@@ -82,8 +82,7 @@
       <Pagination
         v-if="count"
         :nb-pages="nbPages"
-        :on-page-change="SET_CURRENT_PAGE"
-        @change-page="changePage"
+        @page-update="changePage"
       />
     </div>
   </div>