From 6f2058a8fcd1a8c830a69c0132ad3fc4b9f60896 Mon Sep 17 00:00:00 2001 From: floatingghost Date: Wed, 31 Aug 2022 15:44:58 +0000 Subject: [PATCH] ensure timelines only start fetching on click (#150) no more parallel fetching Co-authored-by: FloatingGhost Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/150 --- src/components/user_profile/user_profile.js | 39 +++++++++++++------- src/components/user_profile/user_profile.vue | 3 +- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index ed30c02e..89cd95fd 100644 --- a/src/components/user_profile/user_profile.js +++ b/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: { diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 760f104c..d16483e2 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -121,7 +121,6 @@