From 6f2058a8fcd1a8c830a69c0132ad3fc4b9f60896 Mon Sep 17 00:00:00 2001
From: floatingghost <hannah@coffee-and-dreams.uk>
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 <hannah@coffee-and-dreams.uk>
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 @@
<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"