Add fetching of older statuses.

This commit is contained in:
Roger Braun 2016-11-06 17:44:05 +01:00
parent 1a94217222
commit e1103f04a4
4 changed files with 36 additions and 7 deletions

View File

@ -1,4 +1,5 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
const Timeline = { const Timeline = {
props: [ props: [
@ -11,6 +12,18 @@ const Timeline = {
methods: { methods: {
showNewStatuses () { showNewStatuses () {
this.$store.commit('showNewStatuses', { timeline: this.timelineName }) 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 }))
} }
} }
} }

View File

@ -8,6 +8,13 @@
</div> </div>
</a> </a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status> <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="new-status-notification">
<p class="text-center" >
Load older statuses.
</p>
</div>
</a>
</div> </div>
</template> </template>
<script src="./timeline.js"></script> <script src="./timeline.js"></script>

View File

@ -12,7 +12,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 0, maxId: 0,
minVisibleId: 0 minVisibleId: 0,
loading: false
}, },
publicAndExternal: { publicAndExternal: {
statuses: [], statuses: [],
@ -20,7 +21,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 0, maxId: 0,
minVisibleId: 0 minVisibleId: 0,
loading: false
}, },
friends: { friends: {
statuses: [], statuses: [],
@ -28,7 +30,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 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' 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 statusesAndFaves = groupBy(addedStatuses, statusType)
const addedFaves = statusesAndFaves['fave'] || [] const addedFaves = statusesAndFaves['fave'] || []
const unseenFaves = differenceBy(addedFaves, faves, 'id') const unseenFaves = differenceBy(addedFaves, faves, 'id')
@ -92,7 +95,8 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
newStatusCount: newNewStatusCount, newStatusCount: newNewStatusCount,
maxId: newStatuses[0].id, maxId: newStatuses[0].id,
minVisibleId: (last(newVisibleStatuses) || { id: undefined }).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) const newStatus = find(state.allStatuses, status)
newStatus.favorited = value newStatus.favorited = value
}, },
setLoading (state, { timeline, value }) {
state.timelines[timeline].loading = value
},
setNsfw (state, { id, nsfw }) { setNsfw (state, { id, nsfw }) {
// For now, walk through all the statuses because the stuff might be in the replied_to_status // For now, walk through all the statuses because the stuff might be in the replied_to_status
// TODO: Save the replied_tos as references. // TODO: Save the replied_tos as references.

View File

@ -16,7 +16,8 @@ const update = ({store, statuses, timeline, showImmediately}) => {
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => { const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
const args = { timeline, credentials } 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) { if (older) {
args['until'] = timelineData.minVisibleId args['until'] = timelineData.minVisibleId
@ -24,7 +25,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
args['since'] = timelineData.maxId args['since'] = timelineData.maxId
} }
apiService.fetchTimeline(args) return apiService.fetchTimeline(args)
.then((statuses) => update({store, statuses, timeline, showImmediately})) .then((statuses) => update({store, statuses, timeline, showImmediately}))
} }
@ -35,6 +36,7 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
setInterval(boundFetchAndUpdate, 10000) setInterval(boundFetchAndUpdate, 10000)
} }
const timelineFetcher = { const timelineFetcher = {
fetchAndUpdate,
startFetching startFetching
} }