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 () {
return {
error: false,
fetchedUserId: null
userId: null
}
},
created () {
if (!this.user.id) {
this.fetchUserId()
.then(() => this.startUp())
} else {
this.startUp()
}
const routeParams = this.$route.params
this.load(routeParams.name || routeParams.id)
},
destroyed () {
this.cleanUp()
@ -57,26 +53,12 @@ const UserProfile = {
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 () {
return 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 () {
if (this.userInStore) {
return this.userInStore
}
return {}
return this.$store.getters.findUser(this.userId)
},
isExternal () {
return this.$route.name === 'external-user-profile'
@ -89,22 +71,18 @@ const UserProfile = {
}
},
methods: {
startFetchFavorites () {
if (this.isUs) {
this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId: this.userId })
}
},
fetchUserId () {
let fetchPromise
if (this.userId && !this.$route.params.name) {
fetchPromise = this.$store.dispatch('fetchUser', this.userId)
load (userNameOrId) {
// Check if user data is already loaded in store
const user = this.$store.getters.findUser(userNameOrId)
if (user) {
this.userId = user.id
this.fetchTimelines()
} else {
fetchPromise = this.$store.dispatch('fetchUser', this.userName)
this.$store.dispatch('fetchUser', userNameOrId)
.then(({ id }) => {
this.fetchedUserId = id
this.userId = id
this.fetchTimelines()
})
}
return fetchPromise
.catch((reason) => {
const errorMessage = get(reason, 'error.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')
}
})
.then(() => this.startUp())
}
},
startUp () {
if (this.userId) {
this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId: this.userId })
this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId: this.userId })
this.startFetchFavorites()
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 })
}
},
cleanUp () {
@ -134,18 +113,16 @@ const UserProfile = {
}
},
watch: {
// userId can be undefined if we don't know it yet
userId (newVal) {
'$route.params.id': function (newVal) {
if (newVal) {
this.cleanUp()
this.startUp()
this.load(newVal)
}
},
userName () {
if (this.$route.params.name) {
this.fetchUserId()
'$route.params.name': function (newVal) {
if (newVal) {
this.cleanUp()
this.startUp()
this.load(newVal)
}
},
$route () {

View file

@ -1,6 +1,6 @@
<template>
<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"/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
<Timeline