refactor showing favs and repeats logic

src/components/conversation/conversation.js

@@ -41,8 +41,7 @@ const conversation = {
   props: [
     'statusoid',
     'collapsable',
-    'isPage',
+    'isPage'
-    'timelineName'
   ],
   created () {
     if (this.isPage) {
@@ -121,8 +120,6 @@ const conversation = {
       if (this.status) {
         this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
           .then(({ancestors, descendants}) => {
-            this.$store.dispatch('fetchFavoritedByUsers', { id: this.statusId, retweetedStatusId: this.status.id, timelineName: this.timelineName })
-            this.$store.dispatch('fetchRebloggedByUsers', { id: this.statusId, retweetedStatusId: this.status.id, timelineName: this.timelineName })
             this.$store.dispatch('addNewStatuses', { statuses: ancestors })
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
           })
@@ -142,6 +139,7 @@ const conversation = {
     },
     setHighlight (id) {
       this.highlight = id
+      this.$store.dispatch('fetchFavsAndRepeats', id)
     },
     getHighlight () {
       return this.isExpanded ? this.highlight : null

src/components/status/status.js

@@ -98,6 +98,10 @@ const Status = {
         return this.statusoid
       }
     },
+    statusFromGlobalRepository () {
+      // NOTE: Consider to replace status with statusFromGlobalRepository
+      return this.$store.state.statuses.allStatusesObject[this.status.id]
+    },
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
@@ -260,7 +264,8 @@ const Status = {
       return this.status.summary_html + '<br />' + this.status.statusnet_html
     },
     combinedFavsAndRepeatsAvatars () {
-      const combinedAvatars = [].concat(this.statusoid.favoritedBy, this.statusoid.rebloggedBy).filter(_ => _)
+      // Use the status from the global status repository since favs and repeats are saved in it
+      const combinedAvatars = [].concat(this.statusFromGlobalRepository.favoritedBy, this.statusFromGlobalRepository.rebloggedBy).filter(_ => _)
       return uniqBy(combinedAvatars, 'id')
     }
   },

src/components/status/status.vue

@@ -136,13 +136,13 @@
           <transition name="fade">
             <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0 && isFocused">
               <ul class="stats">
-                <li class="stat-count" v-if="statusoid.rebloggedBy && statusoid.rebloggedBy.length > 0">
+                <li class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0">
                   <a class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</a>
-                  <div class="stat-number">{{ statusoid.rebloggedBy.length }}</div>
+                  <div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div>
                 </li>
-                <li class="stat-count" v-if="statusoid.favoritedBy && statusoid.favoritedBy.length > 0">
+                <li class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0">
                   <a class="stat-title">{{ $t('user_card.favorites') }}</a>
-                  <div class="stat-number">{{ statusoid.favoritedBy.length }}</div>
+                  <div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div>
                 </li>
                 <li class="avatar-row">
                   <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList>

src/components/timeline/timeline.vue

@@ -16,13 +16,12 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <conversation 
+        <conversation
           v-for="status in timeline.visibleStatuses"
           class="status-fadein"
           :key="status.id"
           :statusoid="status"
           :collapsable="true"
-          :timelineName="timelineName"
         />
       </div>
     </div>

src/modules/statuses.js

@@ -460,32 +460,11 @@ export const mutations = {
   queueFlush (state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
-  addFavoritedByUsers (state, { favoritedByUsers, id, timelineName }) {
+  addFavsAndRepeats (state, { id, favoritedByUsers, rebloggedByUsers }) {
-    if (timelineName) {
+    state.allStatusesObject[id] = {
-      state.timelines[timelineName].visibleStatusesObject[id] = {
+      ...state.allStatusesObject[id],
-        ...state.timelines[timelineName].visibleStatusesObject[id],
+      favoritedBy: favoritedByUsers,
-        favoritedBy: favoritedByUsers
+      rebloggedBy: rebloggedByUsers
-      }
-      state.timelines[timelineName].visibleStatuses = state.timelines[timelineName].visibleStatuses.map(visibleStatus => visibleStatus.id === id ? { ...visibleStatus, favoritedBy: favoritedByUsers } : visibleStatus)
-    } else {
-      state.allStatusesObject[id] = {
-        ...state.allStatusesObject[id],
-        favoritedBy: favoritedByUsers
-      }
-    }
-  },
-  addRebloggedByUsers (state, { rebloggedByUsers, id, timelineName }) {
-    if (timelineName) {
-      state.timelines[timelineName].visibleStatusesObject[id] = {
-        ...state.timelines[timelineName].visibleStatusesObject[id],
-        rebloggedBy: rebloggedByUsers
-      }
-      state.timelines[timelineName].visibleStatuses = state.timelines[timelineName].visibleStatuses.map(visibleStatus => visibleStatus.id === id ? { ...visibleStatus, rebloggedBy: rebloggedByUsers } : visibleStatus)
-    } else {
-      state.allStatusesObject[id] = {
-        ...state.allStatusesObject[id],
-        rebloggedBy: rebloggedByUsers
-      }
     }
   }
 }
@@ -553,11 +532,9 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
-    fetchFavoritedByUsers ({ rootState, commit }, { id, retweetedStatusId, timelineName }) {
+    fetchFavsAndRepeats ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchFavoritedByUsers({id}).then((favoritedByUsers) => commit('addFavoritedByUsers', { favoritedByUsers, id: retweetedStatusId, timelineName }))
+      Promise.all([rootState.api.backendInteractor.fetchFavoritedByUsers(id), rootState.api.backendInteractor.fetchRebloggedByUsers(id)])
-    },
+        .then(([favoritedByUsers, rebloggedByUsers]) => commit('addFavsAndRepeats', { id, favoritedByUsers, rebloggedByUsers }))
-    fetchRebloggedByUsers ({ rootState, commit }, { id, retweetedStatusId, timelineName }) {
-      rootState.api.backendInteractor.fetchRebloggedByUsers({id}).then((rebloggedByUsers) => commit('addRebloggedByUsers', { rebloggedByUsers, id: retweetedStatusId, timelineName }))
     }
   },
   mutations

src/services/backend_interactor_service/backend_interactor_service.js

@@ -112,8 +112,8 @@ const backendInteractorService = (credentials) => {
   const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
   const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation})
 
-  const fetchFavoritedByUsers = ({id}) => apiService.fetchFavoritedByUsers({id})
+  const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({id})
-  const fetchRebloggedByUsers = ({id}) => apiService.fetchRebloggedByUsers({id})
+  const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({id})
 
   const backendInteractorServiceInstance = {
     fetchStatus,