Merge pull request #66 from BinaryStudioAcademy/feature/infinite-loading

aLLeXUs · web-flow · commit c816429addad · 2019-05-19T02:19:03.000+03:00
Add infinite loading
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "moment": "^2.24.0",
     "pusher-js": "^4.4.0",
     "vue": "^2.6.6",
+    "vue-infinite-loading": "^2.4.4",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },
diff --git a/frontend/src/components/common/TweetPreviewList.vue b/frontend/src/components/common/TweetPreviewList.vue
@@ -9,10 +9,15 @@
                 />
             </template>
         </transition-group>
+        <infinite-loading @infinite="infiniteHandler">
+            <span slot="no-more" />
+            <div slot="no-results" />
+        </infinite-loading>
     </div>
 </template>
 
 <script>
+import InfiniteLoading from 'vue-infinite-loading';
 import TweetPreview from './TweetPreview.vue';
 
 export default {
@@ -22,17 +27,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>
diff --git a/frontend/src/components/view/feed/FeedContainer.vue b/frontend/src/components/view/feed/FeedContainer.vue
@@ -14,7 +14,7 @@
             </b-button>
         </div>
 
-        <TweetPreviewList :tweets="tweets" />
+        <TweetPreviewList :tweets="tweets" @infinite="infiniteHandler" />
 
         <b-modal :active.sync="isNewTweetModalActive" has-modal-card>
             <NewTweetForm />
@@ -42,11 +42,14 @@ export default {
 
     data: () => ({
         isNewTweetModalActive: false,
+        page: 1,
     }),
 
     async created() {
         try {
-            await this.fetchTweets();
+            await this.fetchTweets({
+                page: 1
+            });
         } catch (error) {
             this.showErrorMessage(error.message);
         }
@@ -80,6 +83,22 @@ export default {
         showAddTweetModal() {
             this.isNewTweetModalActive = true;
         },
+
+        async infiniteHandler($state) {
+            try {
+                const tweets = await this.fetchTweets({ page: this.page + 1 });
+
+                if (tweets.length) {
+                    this.page += 1;
+                    $state.loaded();
+                } else {
+                    $state.complete();
+                }
+            } catch (error) {
+                this.showErrorMessage(error.message);
+                $state.complete();
+            }
+        },
     },
 };
 </script>
diff --git a/frontend/src/components/view/user/UserContainer.vue b/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="noContent" title="No tweets yet :)" />
     </div>
 </template>
@@ -9,36 +9,67 @@
 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
     },
 
     data: () => ({
         tweets: [],
-        noContent: false
+        page: 1,
+        noContent: false,
     }),
 
     async created() {
         try {
-            this.tweets = await this.fetchTweetsByUserId(this.$route.params.id);
+            this.tweets = await this.fetchTweetsByUserId({
+                userId: this.$route.params.id,
+                params: {
+                    page: 1
+                }
+            });
 
             if (!this.tweets.length) {
                 this.noContent = true;
             }
         } catch (error) {
-            console.error(error.message);
+            this.showErrorMessage(error.message);
         }
     },
 
     methods: {
         ...mapActions('tweet', [
             'fetchTweetsByUserId',
         ]),
+
+        async infiniteHandler($state) {
+            try {
+                const tweets = await this.fetchTweetsByUserId({
+                    userId: this.$route.params.id,
+                    params: {
+                        page: this.page + 1
+                    }
+                });
+
+                if (tweets.length) {
+                    this.tweets.push(...tweets);
+                    this.page += 1;
+                    $state.loaded();
+                } else {
+                    $state.complete();
+                }
+            } catch (error) {
+                this.showErrorMessage(error.message);
+                $state.complete();
+            }
+        },
     },
 };
 </script>
diff --git a/frontend/src/store/modules/tweet/actions.js b/frontend/src/store/modules/tweet/actions.js
@@ -11,28 +11,29 @@ import api from '@/api/Api';
 import { tweetMapper } from '@/services/Normalizer';
 
 export default {
-    async fetchTweets({ commit }) {
+    async fetchTweets({ commit }, { page }) {
         commit(SET_LOADING, true, { root: true });
 
         try {
-            const data = await api.get('/tweets');
+            const tweets = await api.get('/tweets', { page });
 
-            commit(SET_TWEETS, data);
+            commit(SET_TWEETS, tweets);
             commit(SET_LOADING, false, { root: true });
 
-            return Promise.resolve();
+            return Promise.resolve(
+                tweets.map(tweetMapper)
+            );
         } 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 });
 
diff --git a/frontend/src/store/modules/tweet/getters.js b/frontend/src/store/modules/tweet/getters.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 export default {
     tweetsSortedByCreatedDate: state => Object.values(state.tweets).sort(
         (a, b) => (
-            moment(a.created).isBefore(moment(b.created)) ? 1 : -1
+            moment(b.created) - moment(a.created)
         )
     ),
 
diff --git a/frontend/src/store/modules/tweet/mutations.js b/frontend/src/store/modules/tweet/mutations.js
@@ -11,16 +11,13 @@ import { tweetMapper } from '@/services/Normalizer';
 
 export default {
     [SET_TWEETS]: (state, tweets) => {
-        let storeTweets = {};
-
-        tweets.forEach(tweet => {
-            storeTweets = {
-                ...storeTweets,
-                [tweet.id]: tweetMapper(tweet)
-            };
-        });
-
-        state.tweets = storeTweets;
+        state.tweets = {
+            ...state.tweets,
+            ...tweets.reduce(
+                (prev, tweet) => ({ ...prev, [tweet.id]: tweetMapper(tweet) }),
+                {}
+            ),
+        };
     },
 
     [SET_TWEET_IMAGE]: (state, { id, imageUrl }) => {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -8003,6 +8003,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-infinite-loading@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.4.tgz#8a9defb9ceeea797c057cb36bdf558a4b2ce409f"
+  integrity sha512-eIFBcyKqkivtsDDq7Ee5ybDJVGLxIzU1NcBJCHG7Zx9Ic66QEGzSPs2OPJlGUdtu0/RS7KpUER35ZP/a7FdSOg==
+
 vue-loader@^15.7.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.0.tgz#27275aa5a3ef4958c5379c006dd1436ad04b25b3"

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import moment from 'moment';`
`3`	`3`	`export default {`
`4`	`4`	`tweetsSortedByCreatedDate: state => Object.values(state.tweets).sort(`
`5`	`5`	`(a, b) => (`
`6`		`- moment(a.created).isBefore(moment(b.created)) ? 1 : -1`
	`6`	`+ moment(b.created) - moment(a.created)`
`7`	`7`	`)`
`8`	`8`	`),`
`9`	`9`