ensure timelines only start fetching on click (#150)

no more parallel fetching

Co-authored-by: FloatingGhost <hannah@coffee-and-dreams.uk>
Reviewed-on: AkkomaGang/pleroma-fe#150

src/components/user_profile/user_profile.js

@@ -48,8 +48,9 @@ const UserProfile = {
   },
   created () {
     const routeParams = this.$route.params
+    const hash = get(this.$route, 'hash', defaultTabKey).replace(/^#/, '')
+    if (hash !== '') this.tab = hash
     this.load(routeParams.name || routeParams.id)
-    this.tab = get(this.$route, 'query.hash', defaultTabKey).replace(/^#/, '')
   },
   unmounted () {
     this.stopFetching()
@@ -91,23 +92,31 @@ const UserProfile = {
     setFooterRef (el) {
       this.footerRef = el
     },
-    load (userNameOrId) {
-      const startFetchingTimeline = (timeline, userId) => {
-        // Clear timeline only if load another user's profile
-        if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
-          this.$store.commit('clearTimeline', { timeline })
-        }
-        this.$store.dispatch('startFetchingTimeline', { timeline, userId })
+    onRouteChange (previousTab, nextTab) {
+      const timelineTabMap = {
+        statuses: 'user',
+        replies: 'replies',
+        media: 'media'
       }
+      // only we can see our own favourites
+      if (this.isUs) timelineTabMap['favorites'] = 'favorites'
 
+      const timeline = timelineTabMap[nextTab]
+      const lastTimeline = timelineTabMap[previousTab]
+      if (timeline) {
+        this.stopFetching()
+        if (lastTimeline) this.$store.commit('clearTimeline', { timeline: lastTimeline })
+        this.$store.dispatch('startFetchingTimeline', { timeline: timeline, userId: this.userId })
+      }
+    },
+    load (userNameOrId) {
       const loadById = (userId) => {
         this.userId = userId
-        startFetchingTimeline('user', userId)
-        startFetchingTimeline('replies', userId)
-        startFetchingTimeline('media', userId)
-        if (this.isUs) {
-          startFetchingTimeline('favorites', userId)
-        }
+        const timelines = ['user', 'favorites', 'replies', 'media']
+        timelines.forEach((timeline) => {
+          this.$store.commit('clearTimeline', { timeline: timeline })
+        })
+        this.onRouteChange(null, this.tab)
         // Fetch all pinned statuses immediately
         this.$store.dispatch('fetchPinnedStatuses', userId)
       }
@@ -182,7 +191,9 @@ const UserProfile = {
       }
     },
     '$route.hash': function (newVal) {
+      const oldTab = this.tab
       this.tab = newVal.replace(/^#/, '') || defaultTabKey
+      this.onRouteChange(oldTab, this.tab)
     }
   },
   components: {

src/components/user_profile/user_profile.vue

@@ -121,7 +121,6 @@
         <Timeline
           key="media"
           :label="$t('user_card.media')"
-          :disabled="!media.visibleStatuses.length"
           :embedded="true"
           :title="$t('user_card.media')"
           timeline-name="media"
@@ -134,7 +133,7 @@
           v-if="isUs"
           key="favorites"
           :label="$t('user_card.favorites')"
-          :disabled="!favorites.visibleStatuses.length"
+          :disabled="!isUs"
           :embedded="true"
           :title="$t('user_card.favorites')"
           timeline-name="favorites"