Fix infinite loading

Author: aLLeXUs

frontend/src/components/common/TweetPreviewList.vue

@@ -7,7 +7,7 @@
                 @click="onTweetClick"
             />
         </template>
-        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading" >
+        <infinite-loading @infinite="infiniteHandler">
             <span slot="no-more" />
         </infinite-loading>
     </div>

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

@@ -51,7 +51,9 @@ export default {
 
     async created() {
         try {
-            await this.fetchTweets();
+            await this.fetchTweets({
+                page: 1
+            });
         } catch (error) {
             this.showErrorMessage(error.message);
         }
@@ -88,10 +90,10 @@ export default {
 
         async infiniteHandler($state) {
             try {
-                const tweets = await this.fetchTweets({ page: this.page });
+                const tweets = await this.fetchTweets({ page: this.page + 1 });
 
                 if (tweets.length) {
-                    this.page++;
+                    this.page += 1;
                     $state.loaded();
                 } else {
                     $state.complete();

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

@@ -9,10 +9,13 @@
 import { mapActions } from 'vuex';
 import TweetPreviewList from '@/components/common/TweetPreviewList.vue';
 import NoContent from '@/components/common/NoContent.vue';
+import showStatusToast from '@/components/mixin/showStatusToast';
 
 export default {
     name: 'UserContainer',
 
+    mixins: [showStatusToast],
+
     components: {
         TweetPreviewList,
         NoContent
@@ -23,6 +26,19 @@ export default {
         page: 1,
     }),
 
+    async created() {
+        try {
+            this.tweets = await this.fetchTweetsByUserId({ 
+                userId: this.$route.params.id, 
+                params: {
+                    page: 1
+                }
+            });
+        } catch (error) {
+            this.showErrorMessage(error.message);
+        }
+    },
+
     methods: {
         ...mapActions('tweet', [
             'fetchTweetsByUserId',
@@ -32,20 +48,20 @@ export default {
             try {
                 const tweets = await this.fetchTweetsByUserId({
                     userId: this.$route.params.id,
-                    params: { 
-                        page: this.page
+                    params: {
+                        page: this.page + 1
                     }
                 });
 
                 if (tweets.length) {
                     this.tweets.push(...tweets);
-                    this.page++;
+                    this.page += 1;
                     $state.loaded();
                 } else {
                     $state.complete();
                 }
             } catch (error) {
-                console.error(error);
+                this.showErrorMessage(error.message);
                 $state.loaded();
             }
         },