Merge branch 'feature/flush-timeline-with-holes' into 'develop'

Clear timeline when there's holes between old and new

Closes #54

See merge request pleroma/pleroma-fe!171
This commit is contained in:
lambda 2017-11-24 07:30:17 +00:00
commit 2431d35277
5 changed files with 48 additions and 13 deletions

View file

@ -29,6 +29,13 @@ const Timeline = {
}, },
newStatusCount () { newStatusCount () {
return this.timeline.newStatusCount return this.timeline.newStatusCount
},
newStatusCountStr () {
if (this.timeline.flushMarker !== 0) {
return ''
} else {
return ` (${this.newStatusCount})`
}
} }
}, },
components: { components: {
@ -64,8 +71,14 @@ const Timeline = {
}, },
methods: { methods: {
showNewStatuses () { showNewStatuses () {
if (this.timeline.flushMarker !== 0) {
this.$store.commit('clearTimeline', { timeline: this.timelineName })
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
this.fetchOlderStatuses()
} else {
this.$store.commit('showNewStatuses', { timeline: this.timelineName }) this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false this.paused = false
}
}, },
fetchOlderStatuses () { fetchOlderStatuses () {
const store = this.$store const store = this.$store

View file

@ -5,7 +5,7 @@
{{title}} {{title}}
</div> </div>
<button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> <button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}} ({{timeline.newStatusCount}}) {{$t('timeline.show_new')}}{{newStatusCountStr}}
</button> </button>
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError"> <div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
{{$t('timeline.error_fetching')}} {{$t('timeline.error_fetching')}}

View file

@ -22,7 +22,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
}, },
public: { public: {
statuses: [], statuses: [],
@ -36,7 +37,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
}, },
user: { user: {
statuses: [], statuses: [],
@ -50,7 +52,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
}, },
publicAndExternal: { publicAndExternal: {
statuses: [], statuses: [],
@ -64,7 +67,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
}, },
friends: { friends: {
statuses: [], statuses: [],
@ -78,7 +82,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
}, },
tag: { tag: {
statuses: [], statuses: [],
@ -92,7 +97,8 @@ export const defaultState = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
} }
} }
} }
@ -381,7 +387,8 @@ export const mutations = {
loading: false, loading: false,
followers: [], followers: [],
friends: [], friends: [],
viewing: 'statuses' viewing: 'statuses',
flushMarker: 0
} }
state.timelines[timeline] = emptyTimeline state.timelines[timeline] = emptyTimeline
@ -422,6 +429,9 @@ export const mutations = {
each(notifications, (notification) => { each(notifications, (notification) => {
notification.seen = true notification.seen = true
}) })
},
queueFlush (state, { timeline, id }) {
state.timelines[timeline].flushMarker = id
} }
} }
@ -458,6 +468,9 @@ const statuses = {
// Optimistic retweeting... // Optimistic retweeting...
commit('setRetweeted', { status, value: true }) commit('setRetweeted', { status, value: true })
apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials }) apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
},
queueFlush ({ rootState, commit }, { timeline, id }) {
commit('queueFlush', { timeline, id })
} }
}, },
mutations mutations

View file

@ -281,6 +281,8 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
url += `/${tag}.json` url += `/${tag}.json`
} }
params.push(['count', 20])
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}` url += `?${queryString}`

View file

@ -29,12 +29,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
args['tag'] = tag args['tag'] = tag
return apiService.fetchTimeline(args) return apiService.fetchTimeline(args)
.then((statuses) => update({store, statuses, timeline, showImmediately}), .then((statuses) => {
() => store.dispatch('setError', { value: true })) if (!older && statuses.length >= 20) {
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
}
update({store, statuses, timeline, showImmediately})
}, () => store.dispatch('setError', { value: true }))
} }
const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => { const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
fetchAndUpdate({timeline, credentials, store, showImmediately: true, userId, tag}) const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
const showImmediately = timelineData.visibleStatuses.length === 0
fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag }) const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
return setInterval(boundFetchAndUpdate, 10000) return setInterval(boundFetchAndUpdate, 10000)
} }