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/boot/after_store.js

@@ -377,8 +377,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
     routes: routes(store),
     scrollBehavior: (to, _from, savedPosition) => {
       if (to.matched.some(m => m.meta.dontScroll)) {
-        return false
+        return {}
       }
+
       return savedPosition || { left: 0, top: 0 }
     }
   })

src/boot/routes.js

@@ -58,7 +58,7 @@ export default (store) => {
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
     },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'external-user-profile', path: '/users/:id', component: UserProfile, meta: { dontScroll: true } },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
     { name: 'registration', path: '/registration', component: Registration },
@@ -75,7 +75,7 @@ export default (store) => {
     { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
     { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit },
     { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile, meta: { dontScroll: true } }
   ]
 
   return routes

src/components/timeline/timeline.js

@@ -145,7 +145,6 @@ const Timeline = {
         this.$store.commit('showNewStatuses', { timeline: this.timelineName })
         this.paused = false
       }
-      window.scrollTo({ top: 0 })
     },
     fetchOlderStatuses: throttle(function () {
       const store = this.$store

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.tab', defaultTabKey)
   },
   unmounted () {
     this.stopFetching()
@@ -58,6 +59,9 @@ const UserProfile = {
     timeline () {
       return this.$store.state.statuses.timelines.user
     },
+    replies () {
+      return this.$store.state.statuses.timelines.replies
+    },
     favorites () {
       return this.$store.state.statuses.timelines.favorites
     },
@@ -89,22 +93,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('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)
       }
@@ -138,6 +151,7 @@ const UserProfile = {
     },
     stopFetching () {
       this.$store.dispatch('stopFetchingTimeline', 'user')
+      this.$store.dispatch('stopFetchingTimeline', 'replies')
       this.$store.dispatch('stopFetchingTimeline', 'favorites')
       this.$store.dispatch('stopFetchingTimeline', 'media')
     },
@@ -147,7 +161,7 @@ const UserProfile = {
     },
     onTabSwitch (tab) {
       this.tab = tab
-      this.$router.replace({ query: { tab } })
+      this.$router.replace({ hash: `#${tab}` })
     },
     linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
@@ -177,8 +191,10 @@ const UserProfile = {
         this.switchUser(newVal)
       }
     },
-    '$route.query': function (newVal) {
-      this.tab = newVal.tab || defaultTabKey
+    '$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

@@ -79,6 +79,18 @@
           :in-profile="true"
           :footer-slipgate="footerRef"
         />
+        <Timeline
+          key="replies"
+          :label="$t('user_card.replies')"
+          :count="user.statuses_count"
+          :embedded="true"
+          :title="$t('user_card.replies')"
+          :timeline="replies"
+          timeline-name="replies"
+          :user-id="userId"
+          :in-profile="true"
+          :footer-slipgate="footerRef"
+        />
         <div
           v-if="followsTabVisible"
           key="followees"
@@ -109,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"
@@ -122,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"

src/i18n/en.json

@@ -910,6 +910,7 @@
         "muted": "Muted",
         "per_day": "per day",
         "remote_follow": "Remote follow",
+        "replies": "With Replies",
         "report": "Report",
         "statuses": "Statuses",
         "subscribe": "Subscribe",

src/modules/statuses.js

@@ -64,7 +64,8 @@ export const defaultState = () => ({
     dms: emptyTl(),
     bookmarks: emptyTl(),
     list: emptyTl(),
-    bubble: emptyTl()
+    bubble: emptyTl(),
+    replies: emptyTl()
   }
 })
 
@@ -183,7 +184,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   // 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' || timeline === 'media') && timelineObject.userId !== userId) {
+  if ((timeline === 'user' || timeline === 'media' || timeline === 'replies') && timelineObject.userId !== userId) {
     return
   }
 

src/services/api/api.service.js

@@ -616,6 +616,7 @@ const fetchTimeline = ({
     notifications: MASTODON_USER_NOTIFICATIONS_URL,
     'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
     user: MASTODON_USER_TIMELINE_URL,
+    replies: MASTODON_USER_TIMELINE_URL,
     media: MASTODON_USER_TIMELINE_URL,
     list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
@@ -627,7 +628,7 @@ const fetchTimeline = ({
 
   let url = timelineUrls[timeline]
 
-  if (timeline === 'user' || timeline === 'media') {
+  if (timeline === 'user' || timeline === 'media' || timeline === 'replies') {
     url = url(userId)
   }
 
@@ -659,6 +660,9 @@ const fetchTimeline = ({
   if (replyVisibility !== 'all') {
     params.push(['reply_visibility', replyVisibility])
   }
+  if (timeline === 'user') {
+    params.push(['exclude_replies', 1])
+  }
 
   params.push(['limit', 20])