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

src/components/timeline/timeline.js

@@ -29,6 +29,13 @@ const Timeline = {
     },
     newStatusCount () {
       return this.timeline.newStatusCount
+    },
+    newStatusCountStr () {
+      if (this.timeline.flushMarker !== 0) {
+        return ''
+      } else {
+        return ` (${this.newStatusCount})`
+      }
     }
   },
   components: {
@@ -64,8 +71,14 @@ const Timeline = {
   },
   methods: {
     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.paused = false
+      }
     },
     fetchOlderStatuses () {
       const store = this.$store

src/components/timeline/timeline.vue

@@ -5,7 +5,7 @@
         {{title}}
       </div>
       <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>
       <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
         {{$t('timeline.error_fetching')}}

src/modules/statuses.js

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

src/services/api/api.service.js

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

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -29,12 +29,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
   args['tag'] = tag
 
   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}) => {
-  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 })
   return setInterval(boundFetchAndUpdate, 10000)
 }