move pinned statuses from user TL storage to separate pins

src/components/timeline/timeline.js

@@ -3,19 +3,6 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
 import Conversation from '../conversation/conversation.vue'
 import { throttle, keyBy } from 'lodash'
 
-export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
-  const ids = []
-  if (pinnedStatusIds && pinnedStatusIds.length > 0) {
-    for (let status of statuses) {
-      if (!pinnedStatusIds.includes(status.id)) {
-        break
-      }
-      ids.push(status.id)
-    }
-  }
-  return ids
-}
-
 const Timeline = {
   props: [
     'timeline',
@@ -60,14 +47,11 @@ const Timeline = {
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
     },
-    // id map of statuses which need to be hidden in the main list due to pinning logic
-    excludedStatusIdsObject () {
-      const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds)
-      // Convert id array to object
-      return keyBy(ids)
-    },
     pinnedStatusIdsObject () {
       return keyBy(this.pinnedStatusIds)
+    },
+    pinnedStatuses () {
+      return this.$store.state.statuses.timelines.pins.visibleStatuses.filter(status => status.user.id === this.userId)
     }
   },
   components: {

src/components/timeline/timeline.vue

@@ -35,12 +35,11 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <template v-for="statusId in pinnedStatusIds">
+        <template v-for="status in pinnedStatuses">
           <conversation
-            v-if="timeline.statusesObject[statusId]"
+            :key="status.id + '-pinned'"
-            :key="statusId + '-pinned'"
             class="status-fadein"
-            :status-id="statusId"
+            :status-id="status.id"
             :collapsable="true"
             :pinned-status-ids-object="pinnedStatusIdsObject"
             :in-profile="inProfile"
@@ -49,7 +48,6 @@
         </template>
         <template v-for="status in timeline.visibleStatuses">
           <conversation
-            v-if="!excludedStatusIdsObject[status.id]"
             :key="status.id"
             class="status-fadein"
             :status-id="status.id"

src/modules/statuses.js

@@ -61,7 +61,8 @@ export const defaultState = () => ({
     publicAndExternal: emptyTl(),
     friends: emptyTl(),
     tag: emptyTl(),
-    dms: emptyTl()
+    dms: emptyTl(),
+    pins: emptyTl()
   }
 })
 
@@ -630,7 +631,7 @@ const statuses = {
     },
     fetchPinnedStatuses ({ rootState, dispatch }, userId) {
       rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
-        .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
+        .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'pins', userId, showImmediately: true, noIdUpdate: true }))
     },
     pinStatus ({ rootState, dispatch }, statusId) {
       return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })