diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 433bca11..113455f4 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,4 +1,5 @@ import Status from '../status/status.vue' +import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' const Timeline = { props: [ @@ -11,6 +12,18 @@ const Timeline = { methods: { showNewStatuses () { this.$store.commit('showNewStatuses', { timeline: this.timelineName }) + }, + fetchOlderStatuses () { + const store = this.$store + const credentials = store.state.users.currentUser.credentials + store.commit('setLoading', { timeline: this.timelineName, value: true }); + timelineFetcher.fetchAndUpdate({ + store, + credentials, + timeline: this.timelineName, + older: true, + showImmediately: true + }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) } } } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 1e779638..2f1b8c28 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -8,6 +8,13 @@ + +
+

+ Load older statuses. +

+
+
diff --git a/src/modules/statuses.js b/src/modules/statuses.js index c3692ae7..5fb57a4f 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -12,7 +12,8 @@ const defaultState = { visibleStatuses: [], newStatusCount: 0, maxId: 0, - minVisibleId: 0 + minVisibleId: 0, + loading: false }, publicAndExternal: { statuses: [], @@ -20,7 +21,8 @@ const defaultState = { visibleStatuses: [], newStatusCount: 0, maxId: 0, - minVisibleId: 0 + minVisibleId: 0, + loading: false }, friends: { statuses: [], @@ -28,7 +30,8 @@ const defaultState = { visibleStatuses: [], newStatusCount: 0, maxId: 0, - minVisibleId: 0 + minVisibleId: 0, + loading: false } } } @@ -37,7 +40,7 @@ const statusType = (status) => { return !status.is_post_verb && status.uri.match(/fave/) ? 'fave' : 'status' } -const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves }) => { +const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves, loading }) => { const statusesAndFaves = groupBy(addedStatuses, statusType) const addedFaves = statusesAndFaves['fave'] || [] const unseenFaves = differenceBy(addedFaves, faves, 'id') @@ -92,7 +95,8 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib newStatusCount: newNewStatusCount, maxId: newStatuses[0].id, minVisibleId: (last(newVisibleStatuses) || { id: undefined }).id, - faves: unionBy(faves, addedFaves, 'id') + faves: unionBy(faves, addedFaves, 'id'), + loading } } @@ -138,6 +142,9 @@ const statuses = { const newStatus = find(state.allStatuses, status) newStatus.favorited = value }, + setLoading (state, { timeline, value }) { + state.timelines[timeline].loading = value + }, setNsfw (state, { id, nsfw }) { // For now, walk through all the statuses because the stuff might be in the replied_to_status // TODO: Save the replied_tos as references. diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index a3d9b9d1..8a39eeb5 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -16,7 +16,8 @@ const update = ({store, statuses, timeline, showImmediately}) => { const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => { const args = { timeline, credentials } - const timelineData = store.rootState.statuses.timelines[camelCase(timeline)] + const rootState = store.rootState || store.state + const timelineData = rootState.statuses.timelines[camelCase(timeline)] if (older) { args['until'] = timelineData.minVisibleId @@ -24,7 +25,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false args['since'] = timelineData.maxId } - apiService.fetchTimeline(args) + return apiService.fetchTimeline(args) .then((statuses) => update({store, statuses, timeline, showImmediately})) } @@ -35,6 +36,7 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => { setInterval(boundFetchAndUpdate, 10000) } const timelineFetcher = { + fetchAndUpdate, startFetching }