Merge branch 'fix-user-profile-glitches' into 'develop'

User timeline improvements

Closes #186 and #120

See merge request pleroma/pleroma-fe!390

src/components/user_profile/user_profile.js

@@ -27,6 +27,7 @@ const UserProfile = {
   },
   watch: {
     userId () {
+      this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.dispatch('startFetching', ['user', this.userId])
     }

src/modules/statuses.js

@@ -16,6 +16,7 @@ const emptyTl = () => ({
   followers: [],
   friends: [],
   viewing: 'statuses',
+  userId: 0,
   flushMarker: 0
 })
 
@@ -132,7 +133,7 @@ const sortTimeline = (timeline) => {
   return timeline
 }
 
-const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false }) => {
+const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId }) => {
   // Sanity check
   if (!isArray(statuses)) {
     return false
@@ -149,6 +150,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     timelineObject.maxId = maxNew
   }
 
+  // This makes sure that user timeline won't get data meant for other
+  // user. I.e. opening different user profiles makes request which could
+  // return data late after user already viewing different user profile
+  if (timeline === 'user' && timelineObject.userId !== userId) {
+    return
+  }
+
   const addStatus = (status, showImmediately, addToTimeline = true) => {
     const result = mergeOrAdd(allStatuses, allStatusesObject, status)
     status = result.item
@@ -418,8 +426,8 @@ export const mutations = {
 const statuses = {
   state: defaultState,
   actions: {
-    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
+    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
-      commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
+      commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
     },
     addNewNotifications ({ rootState, commit, dispatch }, { notifications, older }) {
       commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older })

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -2,13 +2,14 @@ import { camelCase } from 'lodash'
 
 import apiService from '../api/api.service.js'
 
-const update = ({store, statuses, timeline, showImmediately}) => {
+const update = ({store, statuses, timeline, showImmediately, userId}) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('setError', { value: false })
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
+    userId,
     statuses,
     showImmediately
   })
@@ -33,7 +34,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
       if (!older && statuses.length >= 20 && !timelineData.loading) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
-      update({store, statuses, timeline, showImmediately})
+      update({store, statuses, timeline, showImmediately, userId})
     }, () => store.dispatch('setError', { value: true }))
 }
 
@@ -41,6 +42,7 @@ const startFetching = ({timeline = 'friends', credentials, store, userId = false
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
+  timelineData.userId = userId
   fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
   const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
   return setInterval(boundFetchAndUpdate, 10000)