sync profile tab state with location query

This commit is contained in:
taehoon 2019-08-10 14:49:37 -04:00
parent e8c22fbfa3
commit 7dfcabb543
2 changed files with 28 additions and 15 deletions

View file

@ -22,16 +22,20 @@ const FriendList = withLoadMore({
additionalPropNames: ['userId']
})(List)
const defaultTabKey = 'statuses'
const UserProfile = {
data () {
return {
error: false,
userId: null
userId: null,
tab: defaultTabKey
}
},
created () {
const routeParams = this.$route.params
this.load(routeParams.name || routeParams.id)
this.tab = get(this.$route, 'query.tab', defaultTabKey)
},
destroyed () {
this.stopFetching()
@ -115,6 +119,10 @@ const UserProfile = {
switchUser (userNameOrId) {
this.stopFetching()
this.load(userNameOrId)
},
onTabSwitch (tab) {
this.tab = tab
this.$router.replace({ query: { tab } })
}
},
watch: {
@ -128,8 +136,8 @@ const UserProfile = {
this.switchUser(newVal)
}
},
$route () {
this.$refs.tabSwitcher.activateTab(0)()
'$route.query': function (newVal) {
this.tab = newVal.tab || defaultTabKey
}
},
components: {

View file

@ -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"