Implement infinite scroll

Author: aLLeXUs

frontend/src/components/common/TweetPreviewList.vue

@@ -7,10 +7,14 @@
                 @click="onTweetClick"
             />
         </template>
+        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading" >
+            <span slot="no-more" />
+        </infinite-loading>
     </div>
 </template>
 
 <script>
+import InfiniteLoading from 'vue-infinite-loading';
 import TweetPreview from './TweetPreview.vue';
 
 export default {
@@ -20,17 +24,22 @@ export default {
         tweets: {
             type: Array,
             required: true
-        }
+        },
     },
 
     components: {
         TweetPreview,
+        InfiniteLoading,
     },
 
     methods: {
         onTweetClick(tweet) {
             this.$router.push({ name: 'tweet-page', params: { id: tweet.id } });
         },
+
+        infiniteHandler($state) {
+            this.$emit('infinite', $state);
+        },
     },
 };
 </script>

frontend/src/components/view/feed/FeedContainer.vue

@@ -16,7 +16,7 @@
 
         <NoContent :show="!tweets.length" title="No tweets yet :)" />
 
-        <TweetPreviewList :tweets="tweets" />
+        <TweetPreviewList :tweets="tweets" @infinite="infiniteHandler" />
 
         <b-modal :active.sync="isNewTweetModalActive" has-modal-card>
             <NewTweetForm />
@@ -46,6 +46,7 @@ export default {
 
     data: () => ({
         isNewTweetModalActive: false,
+        page: 1,
     }),
 
     async created() {
@@ -84,6 +85,21 @@ export default {
         showAddTweetModal() {
             this.isNewTweetModalActive = true;
         },
+
+        async infiniteHandler($state) {
+            try {
+                const tweets = await this.fetchTweets({ page: this.page });
+
+                if (tweets.length) {
+                    this.page++;
+                    $state.loaded();
+                } else {
+                    $state.complete();
+                }
+            } catch {
+                $state.complete();
+            }
+        },
     },
 };
 </script>

frontend/src/components/view/user/UserContainer.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="user-container">
-        <TweetPreviewList :tweets="tweets" />
+        <TweetPreviewList :tweets="tweets" @infinite="infiniteHandler" />
         <NoContent :show="!tweets.length" title="No tweets yet :)" />
     </div>
 </template>
@@ -20,20 +20,35 @@ export default {
 
     data: () => ({
         tweets: [],
+        page: 1,
     }),
 
-    async created() {
-        try {
-            this.tweets = await this.fetchTweetsByUserId(this.$route.params.id);
-        } catch (error) {
-            console.error(error.message);
-        }
-    },
-
     methods: {
         ...mapActions('tweet', [
             'fetchTweetsByUserId',
         ]),
+
+        async infiniteHandler($state) {
+            try {
+                const tweets = await this.fetchTweetsByUserId({
+                    userId: this.$route.params.id,
+                    params: { 
+                        page: this.page
+                    }
+                });
+
+                if (tweets.length) {
+                    this.tweets.push(...tweets);
+                    this.page++;
+                    $state.loaded();
+                } else {
+                    $state.complete();
+                }
+            } catch (error) {
+                console.error(error);
+                $state.loaded();
+            }
+        },
     },
 };
 </script>

frontend/src/store/modules/tweet/actions.js

@@ -9,28 +9,27 @@ import api from '@/api/Api';
 import { tweetMapper } from '@/services/Normalizer';
 
 export default {
-    async fetchTweets({ commit }) {
+    async fetchTweets({ commit }, params) {
         commit(SET_LOADING, true, { root: true });
 
         try {
-            const data = await api.get('/tweets');
+            const data = await api.get('/tweets', params);
 
             commit(SET_TWEETS, data);
             commit(SET_LOADING, false, { root: true });
 
-            return Promise.resolve();
+            return Promise.resolve(data);
         } catch (error) {
             commit(SET_LOADING, false, { root: true });
 
             return Promise.reject(error);
         }
     },
 
-    async fetchTweetsByUserId({ commit }, userId) {
+    async fetchTweetsByUserId({ commit }, { userId, params }) {
         commit(SET_LOADING, true, { root: true });
-
         try {
-            const tweets = await api.get(`/users/${userId}/tweets`);
+            const tweets = await api.get(`/users/${userId}/tweets`, params);
 
             commit(SET_LOADING, false, { root: true });