Add infinite scroll to Todos page

package.json

@@ -19,6 +19,7 @@
     "vue-analytics": "^5.16.1",
     "vue-axios": "^2.1.4",
     "vue-clipboard2": "^0.2.1",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-moment": "^4.0.0",
     "vue-router": "^3.0.2",
     "vuetify": "^1.3.11",

src/services/gitlab/client.js

@@ -135,8 +135,8 @@ export default class Client {
       .then(result => result.data);
   }
 
-  fetchTodos() {
-    return this.client.get("/api/v4/todos");
+  fetchTodos(page = 1) {
+    return this.client.get(`/api/v4/todos?page=${page}`);
   }
 
   fetchIssues() {

src/store/modules/todo.js

@@ -4,10 +4,32 @@ import gitlab from "@/gitlab";
 
 const state = {
   todos: {},
+  lastLoadedPage: 1,
+  isDataLoading: false,
   todoSize: 0
 };
 
 const actions = {
+  loadNexPageTodos({ state, commit }){
+    if(state.todos.length === 0){
+      commit("setLastLoadedPage", 1);
+    }
+    commit("setIsDataLoading", true);
+    gitlab
+      .get()
+      .client.fetchTodos(state.lastLoadedPage + 1)
+      .then(nextPageTodos => {
+        if(nextPageTodos.data.length > 0){
+          nextPageTodos.data.forEach(todo => {
+            commit("addTodo", todo);
+          });
+          commit("setLastLoadedPage", state.lastLoadedPage + 1);
+        }
+      }).finally(() => {
+        commit("setIsDataLoading", false);
+    });
+  },
+
   addTodo({ commit }, todo) {
     commit("addTodo", todo);
   },
@@ -58,6 +80,14 @@ const mutations = {
 
   setTodoSize(state, size) {
     state.todoSize = parseInt(size);
+  },
+
+  setIsDataLoading(state, value){
+    state.isDataLoading = value;
+  },
+
+  setLastLoadedPage(state, value){
+    state.lastLoadedPage = value;
   }
 };
 

src/views/Todos.vue

@@ -6,7 +6,8 @@
         <v-icon right>done_all</v-icon>
       </v-btn>
     </v-layout>
-    <v-list v-if="todosSize" two-line>
+    <v-list v-if="todosSize" two-line
+      v-infinite-scroll="loadMore" infinite-scroll-disabled="isDataLoading" infinite-scroll-distance="10">
       <template v-for="(todo, index) in todos">
         <todo :item="todo" :key="todo.id"/>
         <v-divider v-if="index + 1 < todos.length" :key="index" ></v-divider>
@@ -21,23 +22,30 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 import Todo from "@/components/Todo.vue";
+import infiniteScroll from 'vue-infinite-scroll';
 
 export default {
   name: "todos",
   components: {
     Todo
   },
+  directives: {infiniteScroll},
   computed: {
     ...mapGetters({
       todos: "getTodos",
-      todosSize: "getTodosSize"
+      todosSize: "getTodosSize",
+      isDataLoading: "isDataLoading"
     })
   },
   methods: {
+    ...mapActions(['loadNexPageTodos']),
     markAllAsRead: function() {
       this.$store.dispatch("markAllTodosAsDone");
+    },
+    loadMore(){
+      this.loadNexPageTodos();
     }
   }
 };