fix mess in UserProfile component

This commit is contained in:
taehoon 2019-04-15 11:08:28 -04:00
parent 55410c91fa
commit 2e86a4eb4f
2 changed files with 35 additions and 58 deletions

View file

@ -33,16 +33,12 @@ const UserProfile = {
data () { data () {
return { return {
error: false, error: false,
fetchedUserId: null userId: null
} }
}, },
created () { created () {
if (!this.user.id) { const routeParams = this.$route.params
this.fetchUserId() this.load(routeParams.name || routeParams.id)
.then(() => this.startUp())
} else {
this.startUp()
}
}, },
destroyed () { destroyed () {
this.cleanUp() this.cleanUp()
@ -57,26 +53,12 @@ const UserProfile = {
media () { media () {
return this.$store.state.statuses.timelines.media return this.$store.state.statuses.timelines.media
}, },
userId () {
return this.$route.params.id || this.user.id || this.fetchedUserId
},
userName () {
return this.$route.params.name || this.user.screen_name
},
isUs () { isUs () {
return this.userId && this.$store.state.users.currentUser.id && return this.userId && this.$store.state.users.currentUser.id &&
this.userId === this.$store.state.users.currentUser.id this.userId === this.$store.state.users.currentUser.id
}, },
userInStore () {
const routeParams = this.$route.params
// This needs fetchedUserId so that computed will be refreshed when user is fetched
return this.$store.getters.findUser(this.fetchedUserId || routeParams.name || routeParams.id)
},
user () { user () {
if (this.userInStore) { return this.$store.getters.findUser(this.userId)
return this.userInStore
}
return {}
}, },
isExternal () { isExternal () {
return this.$route.name === 'external-user-profile' return this.$route.name === 'external-user-profile'
@ -89,22 +71,18 @@ const UserProfile = {
} }
}, },
methods: { methods: {
startFetchFavorites () { load (userNameOrId) {
if (this.isUs) { // Check if user data is already loaded in store
this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId: this.userId }) const user = this.$store.getters.findUser(userNameOrId)
} if (user) {
}, this.userId = user.id
fetchUserId () { this.fetchTimelines()
let fetchPromise
if (this.userId && !this.$route.params.name) {
fetchPromise = this.$store.dispatch('fetchUser', this.userId)
} else { } else {
fetchPromise = this.$store.dispatch('fetchUser', this.userName) this.$store.dispatch('fetchUser', userNameOrId)
.then(({ id }) => { .then(({ id }) => {
this.fetchedUserId = id this.userId = id
this.fetchTimelines()
}) })
}
return fetchPromise
.catch((reason) => { .catch((reason) => {
const errorMessage = get(reason, 'error.error') const errorMessage = get(reason, 'error.error')
if (errorMessage === 'No user with such user_id') { // Known error if (errorMessage === 'No user with such user_id') { // Known error
@ -115,13 +93,14 @@ const UserProfile = {
this.error = this.$t('user_profile.profile_loading_error') this.error = this.$t('user_profile.profile_loading_error')
} }
}) })
.then(() => this.startUp()) }
}, },
startUp () { fetchTimelines () {
if (this.userId) { const userId = this.userId
this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId: this.userId }) this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId })
this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId: this.userId }) this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId })
this.startFetchFavorites() if (this.isUs) {
this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
} }
}, },
cleanUp () { cleanUp () {
@ -134,18 +113,16 @@ const UserProfile = {
} }
}, },
watch: { watch: {
// userId can be undefined if we don't know it yet '$route.params.id': function (newVal) {
userId (newVal) {
if (newVal) { if (newVal) {
this.cleanUp() this.cleanUp()
this.startUp() this.load(newVal)
} }
}, },
userName () { '$route.params.name': function (newVal) {
if (this.$route.params.name) { if (newVal) {
this.fetchUserId()
this.cleanUp() this.cleanUp()
this.startUp() this.load(newVal)
} }
}, },
$route () { $route () {

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div v-if="user.id" class="user-profile panel panel-default"> <div v-if="user" class="user-profile panel panel-default">
<UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/> <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher"> <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
<Timeline <Timeline