fix follow button not updating bug in follow-card
This commit is contained in:
parent
f2f3fa81d8
commit
445b54c553
|
@ -10,8 +10,7 @@ const FollowCard = {
|
|||
data () {
|
||||
return {
|
||||
inProgress: false,
|
||||
requestSent: false,
|
||||
updated: false
|
||||
requestSent: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -19,10 +18,8 @@ const FollowCard = {
|
|||
RemoteFollow
|
||||
},
|
||||
computed: {
|
||||
isMe () { return this.$store.state.users.currentUser.id === this.user.id },
|
||||
following () { return this.updated ? this.updated.following : this.user.following },
|
||||
showFollow () {
|
||||
return !this.following || this.updated && !this.updated.following
|
||||
isMe () {
|
||||
return this.$store.state.users.currentUser.id === this.user.id
|
||||
},
|
||||
loggedIn () {
|
||||
return this.$store.state.users.currentUser
|
||||
|
@ -31,17 +28,15 @@ const FollowCard = {
|
|||
methods: {
|
||||
followUser () {
|
||||
this.inProgress = true
|
||||
requestFollow(this.user, this.$store).then(({ sent, updated }) => {
|
||||
requestFollow(this.user, this.$store).then(({ sent }) => {
|
||||
this.inProgress = false
|
||||
this.requestSent = sent
|
||||
this.updated = updated
|
||||
})
|
||||
},
|
||||
unfollowUser () {
|
||||
this.inProgress = true
|
||||
requestUnfollow(this.user, this.$store).then(({ updated }) => {
|
||||
requestUnfollow(this.user, this.$store).then(() => {
|
||||
this.inProgress = false
|
||||
this.updated = updated
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,34 +4,38 @@
|
|||
<span class="faint" v-if="!noFollowsYou && user.follows_you">
|
||||
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
|
||||
</span>
|
||||
<div class="follow-card-follow-button" v-if="showFollow && !loggedIn">
|
||||
<RemoteFollow :user="user" />
|
||||
</div>
|
||||
<button
|
||||
v-if="showFollow && loggedIn"
|
||||
class="btn btn-default follow-card-follow-button"
|
||||
@click="followUser"
|
||||
:disabled="inProgress"
|
||||
:title="requestSent ? $t('user_card.follow_again') : ''"
|
||||
>
|
||||
<template v-if="inProgress">
|
||||
{{ $t('user_card.follow_progress') }}
|
||||
</template>
|
||||
<template v-else-if="requestSent">
|
||||
{{ $t('user_card.follow_sent') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('user_card.follow') }}
|
||||
</template>
|
||||
</button>
|
||||
<button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
|
||||
<template v-if="inProgress">
|
||||
{{ $t('user_card.follow_progress') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('user_card.follow_unfollow') }}
|
||||
</template>
|
||||
</button>
|
||||
<template v-if="!loggedIn">
|
||||
<div class="follow-card-follow-button" v-if="!user.following">
|
||||
<RemoteFollow :user="user" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-if="!user.following"
|
||||
class="btn btn-default follow-card-follow-button"
|
||||
@click="followUser"
|
||||
:disabled="inProgress"
|
||||
:title="requestSent ? $t('user_card.follow_again') : ''"
|
||||
>
|
||||
<template v-if="inProgress">
|
||||
{{ $t('user_card.follow_progress') }}
|
||||
</template>
|
||||
<template v-else-if="requestSent">
|
||||
{{ $t('user_card.follow_sent') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('user_card.follow') }}
|
||||
</template>
|
||||
</button>
|
||||
<button v-else class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
|
||||
<template v-if="inProgress">
|
||||
{{ $t('user_card.follow_progress') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('user_card.follow_unfollow') }}
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</basic-user-card>
|
||||
</template>
|
||||
|
|
|
@ -23,18 +23,12 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
|
|||
|
||||
// For locked users we just mark it that we sent the follow request
|
||||
if (updated.locked) {
|
||||
resolve({
|
||||
sent: true,
|
||||
updated
|
||||
})
|
||||
resolve({ sent: true })
|
||||
}
|
||||
|
||||
if (updated.following) {
|
||||
// If we get result immediately, just stop.
|
||||
resolve({
|
||||
sent: false,
|
||||
updated
|
||||
})
|
||||
resolve({ sent: false })
|
||||
}
|
||||
|
||||
// But usually we don't get result immediately, so we ask server
|
||||
|
@ -48,16 +42,10 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
|
|||
.then((following) => {
|
||||
if (following) {
|
||||
// We confirmed and everything's good.
|
||||
resolve({
|
||||
sent: false,
|
||||
updated
|
||||
})
|
||||
resolve({ sent: false })
|
||||
} else {
|
||||
// If after all the tries, just treat it as if user is locked
|
||||
resolve({
|
||||
sent: false,
|
||||
updated
|
||||
})
|
||||
resolve({ sent: false })
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue