Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix follow button not updating bug in follow-card

Browse source
This commit is contained in:
taehoon 2019-04-11 16:34:46 -04:00
parent f2f3fa81d8
commit 445b54c553
3 changed files with 41 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/follow_card/follow_card.js
View file

@ -10,8 +10,7 @@ const FollowCard = {
data () { data () {
return { return {
inProgress: false, inProgress: false,
requestSent: false, requestSent: false
updated: false
} }
}, },
components: { components: {
@ -19,10 +18,8 @@ const FollowCard = {
RemoteFollow RemoteFollow
}, },
computed: { computed: {
isMe () { return this.$store.state.users.currentUser.id === this.user.id }, isMe () {
following () { return this.updated ? this.updated.following : this.user.following }, return this.$store.state.users.currentUser.id === this.user.id
showFollow () {
return !this.following || this.updated && !this.updated.following
}, },
loggedIn () { loggedIn () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
@ -31,17 +28,15 @@ const FollowCard = {
methods: { methods: {
followUser () { followUser () {
this.inProgress = true this.inProgress = true
requestFollow(this.user, this.$store).then(({ sent, updated }) => { requestFollow(this.user, this.$store).then(({ sent }) => {
this.inProgress = false this.inProgress = false
this.requestSent = sent this.requestSent = sent
this.updated = updated
}) })
}, },
unfollowUser () { unfollowUser () {
this.inProgress = true this.inProgress = true
requestUnfollow(this.user, this.$store).then(({ updated }) => { requestUnfollow(this.user, this.$store).then(() => {
this.inProgress = false this.inProgress = false
this.updated = updated
}) })
} }
} }

60
src/components/follow_card/follow_card.vue
View file

@ -4,34 +4,38 @@
<span class="faint" v-if="!noFollowsYou && user.follows_you"> <span class="faint" v-if="!noFollowsYou && user.follows_you">
{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span> </span>
<div class="follow-card-follow-button" v-if="showFollow && !loggedIn"> <template v-if="!loggedIn">
<RemoteFollow :user="user" /> <div class="follow-card-follow-button" v-if="!user.following">
</div> <RemoteFollow :user="user" />
<button </div>
v-if="showFollow && loggedIn" </template>
class="btn btn-default follow-card-follow-button" <template v-else>
@click="followUser" <button
:disabled="inProgress" v-if="!user.following"
:title="requestSent ? $t('user_card.follow_again') : ''" class="btn btn-default follow-card-follow-button"
> @click="followUser"
<template v-if="inProgress"> :disabled="inProgress"
{{ $t('user_card.follow_progress') }} :title="requestSent ? $t('user_card.follow_again') : ''"
</template> >
<template v-else-if="requestSent"> <template v-if="inProgress">
{{ $t('user_card.follow_sent') }} {{ $t('user_card.follow_progress') }}
</template> </template>
<template v-else> <template v-else-if="requestSent">
{{ $t('user_card.follow') }} {{ $t('user_card.follow_sent') }}
</template> </template>
</button> <template v-else>
<button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress"> {{ $t('user_card.follow') }}
<template v-if="inProgress"> </template>
{{ $t('user_card.follow_progress') }} </button>
</template> <button v-else class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
<template v-else> <template v-if="inProgress">
{{ $t('user_card.follow_unfollow') }} {{ $t('user_card.follow_progress') }}
</template> </template>
</button> <template v-else>
{{ $t('user_card.follow_unfollow') }}
</template>
</button>
</template>
</div> </div>
</basic-user-card> </basic-user-card>
</template> </template>

20
src/services/follow_manipulate/follow_manipulate.js
View file

@ -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 // For locked users we just mark it that we sent the follow request
if (updated.locked) { if (updated.locked) {
resolve({ resolve({ sent: true })
sent: true,
updated
})
} }
if (updated.following) { if (updated.following) {
// If we get result immediately, just stop. // If we get result immediately, just stop.
resolve({ resolve({ sent: false })
sent: false,
updated
})
} }
// But usually we don't get result immediately, so we ask server // 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) => { .then((following) => {
if (following) { if (following) {
// We confirmed and everything's good. // We confirmed and everything's good.
resolve({ resolve({ sent: false })
sent: false,
updated
})
} else { } else {
// If after all the tries, just treat it as if user is locked // If after all the tries, just treat it as if user is locked
resolve({ resolve({ sent: false })
sent: false,
updated
})
} }
}) })
}) })