Added support for async following including delayed confirmation if we followed

user or not
This commit is contained in:
Henry Jameson 2018-12-04 12:50:29 +03:00
parent 480f617c09
commit ca19025187
4 changed files with 71 additions and 4 deletions

View file

@ -5,6 +5,8 @@ export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ],
data () {
return {
followRequestInProgress: false,
followRequestSent: false,
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
? this.$store.state.instance.hideUserStats
: this.$store.state.config.hideUserStats
@ -70,13 +72,57 @@ export default {
methods: {
followUser () {
const store = this.$store
this.followRequestInProgress = true
store.state.api.backendInteractor.followUser(this.user.id)
.then((followedUser) => store.commit('addNewUsers', [followedUser]))
.then(() => {
if (this.user.following) {
this.followRequestInProgress = false
return
}
if (!this.user.locked) {
let attemptsLeft = 3
const fetchUser = () => new Promise((resolve, reject) => {
setTimeout(() => {
store.state.api.backendInteractor.fetchUser({ id: this.user.id })
.then((user) => store.commit('addNewUsers', [user]))
.then(() => resolve(this.user.following))
.catch((e) => reject(e))
}, 500)
}).then((confirmed) => {
if (!confirmed && attemptsLeft > 0) {
attemptsLeft--
return fetchUser()
} else if (confirmed) {
return true
} else {
return false
}
})
return fetchUser()
.then((successfulConfirmation) => {
if (successfulConfirmation) {
this.followRequestInProgress = false
} else {
this.followRequestInProgress = false
this.followRequestSent = true
}
})
} else {
this.followRequestInProgress = false
this.followRequestSent = true
}
})
},
unfollowUser () {
const store = this.$store
this.followRequestInProgress = true
store.state.api.backendInteractor.unfollowUser(this.user.id)
.then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
.then(() => {
this.followRequestInProgress = false
})
},
blockUser () {
const store = this.$store

View file

@ -44,13 +44,26 @@
<div class="follow" v-if="loggedIn">
<span v-if="user.following">
<!--Following them!-->
<button @click="unfollowUser" class="pressed">
<button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else>
{{ $t('user_card.following') }}
</template>
</button>
</span>
<span v-if="!user.following">
<button @click="followUser">
<button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else-if="followRequestSent">
{{ $t('user_card.follow_sent') }}
</template>
<template v-else>
{{ $t('user_card.follow') }}
</template>
</button>
</span>
</div>

View file

@ -193,6 +193,10 @@
"blocked": "Blocked!",
"deny": "Deny",
"follow": "Follow",
"follow_sent": "Request sent!",
"follow_progress": "Requesting…",
"follow_again": "Send request again?",
"follow_unfollow": "Stop following",
"followees": "Following",
"followers": "Followers",
"following": "Following!",

View file

@ -156,6 +156,10 @@
"block": "Заблокировать",
"blocked": "Заблокирован",
"follow": "Читать",
"follow_sent": "Запрос отправлен!",
"follow_progress": "Запрашиваем…",
"follow_again": "Запросить еще заново?",
"follow_unfollow": "Перестать читать",
"followees": "Читаемые",
"followers": "Читатели",
"following": "Читаю",