Merge branch 'fix/better-timeline-min-max-id-behavior' into 'develop'

Fix/better timeline min max id behavior

See merge request pleroma/pleroma-fe!233

src/components/timeline/timeline.vue

@@ -7,7 +7,7 @@
       <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.show_new')}}{{newStatusCountStr}}
       </button>
-      <div @click.prevent class="loadmore-text" v-if="timelineError">
+      <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
       </div>
       <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
@@ -84,13 +84,26 @@
     right: 0.6em;
     font-size: 14px;
     min-width: 6em;
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
     font-family: sans-serif;
     text-align: center;
     padding: 0 0.5em 0 0.5em;
     opacity: 0.8;
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
+  }
+
+  .loadmore-error {
+    position: absolute;
+    right: 0.6em;
+    font-size: 14px;
+    min-width: 6em;
+    font-family: sans-serif;
+    text-align: center;
+    padding: 0 0.25em 0 0.25em;
+    margin: 0;
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
   }
 }
 

src/modules/statuses.js

@@ -1,7 +1,23 @@
-import { includes, remove, slice, sortBy, toInteger, each, find, flatten, maxBy, last, merge, max, isArray } from 'lodash'
+import { includes, remove, slice, sortBy, toInteger, each, find, flatten, maxBy, minBy, merge, max, min, isArray } from 'lodash'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
+const emptyTl = () => ({
+  statuses: [],
+  statusesObject: {},
+  faves: [],
+  visibleStatuses: [],
+  visibleStatusesObject: {},
+  newStatusCount: 0,
+  maxId: 0,
+  minVisibleId: 0,
+  loading: false,
+  followers: [],
+  friends: [],
+  viewing: 'statuses',
+  flushMarker: 0
+})
+
 export const defaultState = {
   allStatuses: [],
   allStatusesObject: {},
@@ -10,96 +26,12 @@ export const defaultState = {
   favorites: new Set(),
   error: false,
   timelines: {
-    mentions: {
+    mentions: emptyTl(),
-      statuses: [],
+    public: emptyTl(),
-      statusesObject: {},
+    user: emptyTl(),
-      faves: [],
+    publicAndExternal: emptyTl(),
-      visibleStatuses: [],
+    friends: emptyTl(),
-      visibleStatusesObject: {},
+    tag: emptyTl()
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    },
-    public: {
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    },
-    user: {
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    },
-    publicAndExternal: {
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    },
-    friends: {
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    },
-    tag: {
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    }
   }
 }
 
@@ -174,8 +106,6 @@ const mergeOrAdd = (arr, obj, item) => {
 const sortTimeline = (timeline) => {
   timeline.visibleStatuses = sortBy(timeline.visibleStatuses, ({id}) => -id)
   timeline.statuses = sortBy(timeline.statuses, ({id}) => -id)
-  timeline.minVisibleId = (last(timeline.visibleStatuses) || {}).id
-
   return timeline
 }
 
@@ -189,10 +119,9 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   const allStatusesObject = state.allStatusesObject
   const timelineObject = state.timelines[timeline]
 
-  // Set the maxId to the new id if it's larger.
+  if (timeline && !noIdUpdate) {
-  const updateMaxId = ({id}) => {
+    timelineObject.maxId = max([maxBy(statuses, 'id').id + 1, timelineObject.maxId])
-    if (!timeline || noIdUpdate) { return false }
+    timelineObject.minVisibleId = min([minBy(statuses, 'id').id - 1, timelineObject.minVisibleId])
-    timelineObject.maxId = max([id, timelineObject.maxId])
   }
 
   const addStatus = (status, showImmediately, addToTimeline = true) => {
@@ -200,8 +129,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     status = result.item
 
     if (result.new) {
-      updateMaxId(status)
-
       if (statusType(status) === 'retweet' && status.retweeted_status.user.id === user.id) {
         addNotification({ type: 'repeat', status: status.retweeted_status, action: status })
       }
@@ -317,7 +244,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
       // Only update if this is a new favorite.
       if (!state.favorites.has(favorite.id)) {
         state.favorites.add(favorite.id)
-        updateMaxId(favorite)
         favoriteStatus(favorite)
       }
     },
@@ -330,7 +256,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     },
     'deletion': (deletion) => {
       const uri = deletion.uri
-      updateMaxId(deletion)
 
       // Remove possible notification
       const status = find(allStatuses, {uri})
@@ -375,23 +300,7 @@ export const mutations = {
     each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
   },
   clearTimeline (state, { timeline }) {
-    const emptyTimeline = {
+    state.timelines[timeline] = emptyTl()
-      statuses: [],
-      statusesObject: {},
-      faves: [],
-      visibleStatuses: [],
-      visibleStatusesObject: {},
-      newStatusCount: 0,
-      maxId: 0,
-      minVisibleId: 0,
-      loading: false,
-      followers: [],
-      friends: [],
-      viewing: 'statuses',
-      flushMarker: 0
-    }
-
-    state.timelines[timeline] = emptyTimeline
   },
   setFavorited (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -30,7 +30,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
 
   return apiService.fetchTimeline(args)
     .then((statuses) => {
-      if (!older && statuses.length >= 20) {
+      if (!older && statuses.length >= 20 && !timelineData.loading) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
       update({store, statuses, timeline, showImmediately})