From b14f9d72a2f284800082729e8381f6e2ec727bad Mon Sep 17 00:00:00 2001
From: AkiraFukushima
Date: Tue, 27 Mar 2018 18:09:13 +0900
Subject: [PATCH] refs #146 Add lazy loading to favourites
---
.../components/TimelineSpace/Favourites.vue | 27 +++++++++++++++-
.../store/TimelineSpace/Favourites.js | 31 ++++++++++++++++++-
2 files changed, 56 insertions(+), 2 deletions(-)
diff --git a/src/renderer/components/TimelineSpace/Favourites.vue b/src/renderer/components/TimelineSpace/Favourites.vue
index 03ca7e6c..8e49d689 100644
--- a/src/renderer/components/TimelineSpace/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Favourites.vue
@@ -3,6 +3,8 @@
+
+
@@ -16,7 +18,8 @@ export default {
computed: {
...mapState({
account: state => state.TimelineSpace.account,
- favourites: state => state.TimelineSpace.Favourites.favourites
+ favourites: state => state.TimelineSpace.Favourites.favourites,
+ lazyLoading: state => state.TimelineSpace.Favourites.lazyLoading
})
},
created () {
@@ -38,10 +41,32 @@ export default {
})
})
},
+ mounted () {
+ window.addEventListener('scroll', this.onScroll)
+ },
+ destroyed () {
+ window.removeEventListener('scroll', this.onScroll)
+ },
methods: {
updateToot (message) {
this.$store.commit('TimelineSpace/Favourites/updateToot', message)
+ },
+ onScroll (event) {
+ if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
+ this.$store.dispatch('TimelineSpace/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
+ }
}
}
}
+
+
diff --git a/src/renderer/store/TimelineSpace/Favourites.js b/src/renderer/store/TimelineSpace/Favourites.js
index efce75da..c107ba70 100644
--- a/src/renderer/store/TimelineSpace/Favourites.js
+++ b/src/renderer/store/TimelineSpace/Favourites.js
@@ -3,12 +3,16 @@ import Mastodon from 'mastodon-api'
const Favourites = {
namespaced: true,
state: {
- favourites: []
+ favourites: [],
+ lazyLoading: false
},
mutations: {
updateFavourites (state, favourites) {
state.favourites = favourites
},
+ insertFavourites (state, favourites) {
+ state.favourites = state.favourites.concat(favourites)
+ },
updateToot (state, message) {
state.favourites = state.favourites.map((toot) => {
if (toot.id === message.id) {
@@ -24,6 +28,9 @@ const Favourites = {
return toot
}
})
+ },
+ changeLazyLoading (state, value) {
+ state.lazyLoading = value
}
},
actions: {
@@ -41,6 +48,28 @@ const Favourites = {
resolve(res)
})
})
+ },
+ lazyFetchFavourites ({ state, commit, rootState }, last) {
+ return new Promise((resolve, reject) => {
+ if (state.lazyLoading) {
+ return resolve()
+ }
+ commit('changeLazyLoading', true)
+ const client = new Mastodon(
+ {
+ access_token: rootState.TimelineSpace.account.accessToken,
+ api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+ })
+ console.log(last.id)
+ // Note: Now this API's explanation and implementation are reversed.
+ // So if the bug has resolved, please use max_id instead of since_id.
+ // https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#favourites
+ client.get('/favourites', { since_id: last.id, limit: 40 }, (err, data, res) => {
+ if (err) return reject(err)
+ commit('insertFavourites', data)
+ commit('changeLazyLoading', false)
+ })
+ })
}
}
}