From 10b9dbdb094b328e8efaee444a09b84a87e812b5 Mon Sep 17 00:00:00 2001
From: AkiraFukushima
Date: Fri, 11 May 2018 01:10:30 +0900
Subject: [PATCH] refs #282 Add lazyLoading in account profile timeline
---
.../TimelineSpace/Contents/SideBar.vue | 4 +-
.../SideBar/AccountProfile/Timeline.vue | 38 ++++++++++++++++++-
.../store/TimelineSpace/Contents/Home.js | 2 +-
.../SideBar/AccountProfile/Timeline.js | 31 ++++++++++++++-
4 files changed, 70 insertions(+), 5 deletions(-)
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
index 7492163e..b1d62a15 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -5,7 +5,7 @@
-
@@ -16,12 +18,22 @@ export default {
components: { Toot },
computed: {
...mapState({
- timeline: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.timeline
+ timeline: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.timeline,
+ lazyLoading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.lazyLoading,
+ backgroundColor: state => state.App.theme.background_color
})
},
created () {
this.load()
},
+ mounted () {
+ document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
+ },
+ destroyed () {
+ if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+ document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
+ }
+ },
watch: {
account: function (newAccount, oldAccount) {
this.load()
@@ -37,6 +49,23 @@ export default {
})
})
},
+ onScroll (event) {
+ // for lazyLoading
+ if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('account_profile').clientHeight - 10) && !this.lazyloading) {
+ this.$store.dispatch(
+ 'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/lazyFetchTimeline',
+ {
+ account: this.account,
+ last: this.timeline[this.timeline.length - 1]
+ })
+ .catch(() => {
+ this.$message({
+ message: 'Could not fetch account timeline',
+ type: 'error'
+ })
+ })
+ }
+ },
updateToot (message) {
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
},
@@ -48,4 +77,11 @@ export default {
diff --git a/src/renderer/store/TimelineSpace/Contents/Home.js b/src/renderer/store/TimelineSpace/Contents/Home.js
index a36f04b3..edf281ec 100644
--- a/src/renderer/store/TimelineSpace/Contents/Home.js
+++ b/src/renderer/store/TimelineSpace/Contents/Home.js
@@ -97,9 +97,9 @@ const Home = {
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
})
client.get('/timelines/home', { max_id: last.id, limit: 40 }, (err, data, res) => {
+ commit('changeLazyLoading', false)
if (err) return reject(err)
commit('insertTimeline', data)
- commit('changeLazyLoading', false)
})
})
}
diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.js b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.js
index 4b2bc95a..6a9c2576 100644
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.js
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.js
@@ -3,12 +3,19 @@ import Mastodon from 'mastodon-api'
const Timeline = {
namespaced: true,
state: {
- timeline: []
+ timeline: [],
+ lazyLoading: false
},
mutations: {
updateTimeline (state, timeline) {
state.timeline = timeline
},
+ insertTimeline (state, messages) {
+ state.timeline = state.timeline.concat(messages)
+ },
+ changeLazyLoading (state, value) {
+ state.lazyLoading = value
+ },
updateToot (state, message) {
// Replace target message in timeline
state.timeline = state.timeline.map((toot) => {
@@ -52,6 +59,28 @@ const Timeline = {
resolve(res)
})
})
+ },
+ lazyFetchTimeline ({ state, commit, rootState }, info) {
+ const last = info.last
+ if (last === undefined || last === null) {
+ return null
+ }
+ 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'
+ })
+ client.get(`/accounts/${info.account.id}/statuses`, { max_id: last.id, limit: 40 }, (err, data, res) => {
+ commit('changeLazyLoading', false)
+ if (err) return reject(err)
+ commit('insertTimeline', data)
+ })
+ })
}
}
}