commit: e5fe4f420ca66f3916bc986ee9d65ce6a9bf75aa
parent: 9f6be4fe654a26d57c67cbe0f42cd3bbb1b37e92
Author: Shpuld Shpludson <shp@cock.li>
Date: Sat, 17 Aug 2019 08:12:21 +0000
Merge branch '564' into 'develop'
Restore scroll position for user profile when navigate back and forward
Closes #636 and #564
See merge request pleroma/pleroma-fe!914
Diffstat:
7 files changed, 89 insertions(+), 74 deletions(-)
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
@@ -13,8 +13,8 @@ const Interactions = {
}
},
methods: {
- onModeSwitch (index, dataset) {
- this.filterMode = tabModeDict[dataset.filter]
+ onModeSwitch (key) {
+ this.filterMode = tabModeDict[key]
}
},
components: {
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
@@ -10,18 +10,15 @@
:on-switch="onModeSwitch"
>
<span
- data-tab-dummy
- data-filter="mentions"
+ key="mentions"
:label="$t('nav.mentions')"
/>
<span
- data-tab-dummy
- data-filter="likes+repeats"
+ key="likes+repeats"
:label="$t('interactions.favs_repeats')"
/>
<span
- data-tab-dummy
- data-filter="follows"
+ key="follows"
:label="$t('interactions.follows')"
/>
</tab-switcher>
diff --git a/src/components/search/search.js b/src/components/search/search.js
@@ -75,8 +75,8 @@ const Search = {
const length = this[tabName].length
return length === 0 ? '' : ` (${length})`
},
- onResultTabSwitch (_index, dataset) {
- this.currenResultTab = dataset.filter
+ onResultTabSwitch (key) {
+ this.currenResultTab = key
},
getActiveTab () {
if (this.visibleStatuses.length > 0) {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
@@ -31,21 +31,18 @@
<tab-switcher
ref="tabSwitcher"
:on-switch="onResultTabSwitch"
- :custom-active="currenResultTab"
+ :active-tab="currenResultTab"
>
<span
- data-tab-dummy
- data-filter="statuses"
+ key="statuses"
:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
/>
<span
- data-tab-dummy
- data-filter="people"
+ key="people"
:label="$t('search.people') + resultCount('users')"
/>
<span
- data-tab-dummy
- data-filter="hashtags"
+ key="hashtags"
:label="$t('search.hashtags') + resultCount('hashtags')"
/>
</tab-switcher>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
@@ -4,12 +4,22 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', {
name: 'TabSwitcher',
- props: ['renderOnlyFocused', 'onSwitch', 'customActive'],
+ props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
data () {
return {
active: this.$slots.default.findIndex(_ => _.tag)
}
},
+ computed: {
+ activeIndex () {
+ // In case of controlled component
+ if (this.activeTab) {
+ return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+ } else {
+ return this.active
+ }
+ }
+ },
beforeUpdate () {
const currentSlot = this.$slots.default[this.active]
if (!currentSlot.tag) {
@@ -17,21 +27,13 @@ export default Vue.component('tab-switcher', {
}
},
methods: {
- activateTab (index, dataset) {
+ activateTab (index) {
return () => {
if (typeof this.onSwitch === 'function') {
- this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
+ this.onSwitch.call(null, this.$slots.default[index].key)
}
this.active = index
}
- },
- isActiveTab (index) {
- const customActiveIndex = this.$slots.default.findIndex(slot => {
- const dataFilter = slot.data && slot.data.attrs && slot.data.attrs['data-filter']
- return this.customActive && this.customActive === dataFilter
- })
-
- return customActiveIndex > -1 ? customActiveIndex === index : index === this.active
}
},
render (h) {
@@ -41,13 +43,13 @@ export default Vue.component('tab-switcher', {
const classesTab = ['tab']
const classesWrapper = ['tab-wrapper']
- if (this.isActiveTab(index)) {
+ if (this.activeIndex === index) {
classesTab.push('active')
classesWrapper.push('active')
}
if (slot.data.attrs.image) {
return (
- <div class={ classesWrapper.join(' ')}>
+ <div class={classesWrapper.join(' ')}>
<button
disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)}
@@ -59,7 +61,7 @@ export default Vue.component('tab-switcher', {
)
}
return (
- <div class={ classesWrapper.join(' ')}>
+ <div class={classesWrapper.join(' ')}>
<button
disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)}
@@ -71,7 +73,7 @@ export default Vue.component('tab-switcher', {
const contents = this.$slots.default.map((slot, index) => {
if (!slot.tag) return
- const active = index === this.active
+ const active = this.activeIndex === index
if (this.renderOnlyFocused) {
return active
? <div class="active">{slot}</div>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
@@ -22,21 +22,23 @@ const FriendList = withLoadMore({
additionalPropNames: ['userId']
})(List)
+const defaultTabKey = 'statuses'
+
const UserProfile = {
data () {
return {
error: false,
- userId: null
+ userId: null,
+ tab: defaultTabKey
}
},
created () {
- // Make sure that timelines used in this page are empty
- this.cleanUp()
const routeParams = this.$route.params
this.load(routeParams.name || routeParams.id)
+ this.tab = get(this.$route, 'query.tab', defaultTabKey)
},
destroyed () {
- this.cleanUp()
+ this.stopFetching()
},
computed: {
timeline () {
@@ -67,17 +69,36 @@ const UserProfile = {
},
methods: {
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 })
+ }
+
+ const loadById = (userId) => {
+ this.userId = userId
+ startFetchingTimeline('user', userId)
+ startFetchingTimeline('media', userId)
+ if (this.isUs) {
+ startFetchingTimeline('favorites', userId)
+ }
+ // Fetch all pinned statuses immediately
+ this.$store.dispatch('fetchPinnedStatuses', userId)
+ }
+
+ // Reset view
+ this.userId = null
+ this.error = false
+
// Check if user data is already loaded in store
const user = this.$store.getters.findUser(userNameOrId)
if (user) {
- this.userId = user.id
- this.fetchTimelines()
+ loadById(user.id)
} else {
this.$store.dispatch('fetchUser', userNameOrId)
- .then(({ id }) => {
- this.userId = id
- this.fetchTimelines()
- })
+ .then(({ id }) => loadById(id))
.catch((reason) => {
const errorMessage = get(reason, 'error.error')
if (errorMessage === 'No user with such user_id') { // Known error
@@ -90,40 +111,33 @@ const UserProfile = {
})
}
},
- fetchTimelines () {
- const userId = this.userId
- this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId })
- this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId })
- if (this.isUs) {
- this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
- }
- // Fetch all pinned statuses immediately
- this.$store.dispatch('fetchPinnedStatuses', userId)
- },
- cleanUp () {
+ stopFetching () {
this.$store.dispatch('stopFetching', 'user')
this.$store.dispatch('stopFetching', 'favorites')
this.$store.dispatch('stopFetching', 'media')
- this.$store.commit('clearTimeline', { timeline: 'user' })
- this.$store.commit('clearTimeline', { timeline: 'favorites' })
- this.$store.commit('clearTimeline', { timeline: 'media' })
+ },
+ switchUser (userNameOrId) {
+ this.stopFetching()
+ this.load(userNameOrId)
+ },
+ onTabSwitch (tab) {
+ this.tab = tab
+ this.$router.replace({ query: { tab } })
}
},
watch: {
'$route.params.id': function (newVal) {
if (newVal) {
- this.cleanUp()
- this.load(newVal)
+ this.switchUser(newVal)
}
},
'$route.params.name': function (newVal) {
if (newVal) {
- this.cleanUp()
- this.load(newVal)
+ this.switchUser(newVal)
}
},
- $route () {
- this.$refs.tabSwitcher.activateTab(0)()
+ '$route.query': function (newVal) {
+ this.tab = newVal.tab || defaultTabKey
}
},
components: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
@@ -12,22 +12,24 @@
rounded="top"
/>
<tab-switcher
- ref="tabSwitcher"
+ :active-tab="tab"
:render-only-focused="true"
+ :on-switch="onTabSwitch"
>
- <div :label="$t('user_card.statuses')">
- <Timeline
- :count="user.statuses_count"
- :embedded="true"
- :title="$t('user_profile.timeline_title')"
- :timeline="timeline"
- timeline-name="user"
- :user-id="userId"
- :pinned-status-ids="user.pinnedStatusIds"
- />
- </div>
+ <Timeline
+ key="statuses"
+ :label="$t('user_card.statuses')"
+ :count="user.statuses_count"
+ :embedded="true"
+ :title="$t('user_profile.timeline_title')"
+ :timeline="timeline"
+ timeline-name="user"
+ :user-id="userId"
+ :pinned-status-ids="user.pinnedStatusIds"
+ />
<div
v-if="followsTabVisible"
+ key="followees"
:label="$t('user_card.followees')"
:disabled="!user.friends_count"
>
@@ -42,6 +44,7 @@
</div>
<div
v-if="followersTabVisible"
+ key="followers"
:label="$t('user_card.followers')"
:disabled="!user.followers_count"
>
@@ -58,6 +61,7 @@
</FollowerList>
</div>
<Timeline
+ key="media"
:label="$t('user_card.media')"
:disabled="!media.visibleStatuses.length"
:embedded="true"
@@ -68,6 +72,7 @@
/>
<Timeline
v-if="isUs"
+ key="favorites"
:label="$t('user_card.favorites')"
:disabled="!favorites.visibleStatuses.length"
:embedded="true"
