Merge branch 'async_follow' into 'develop'

Better "follow" button behavior

Closes #133

See merge request pleroma/pleroma-fe!396
This commit is contained in:
Shpuld Shpludson 2018-12-14 17:33:11 +00:00
commit 4b30ce64c9
4 changed files with 82 additions and 4 deletions

View file

@ -5,6 +5,8 @@ export default {
props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ], props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
data () { data () {
return { return {
followRequestInProgress: false,
followRequestSent: false,
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
? this.$store.state.instance.hideUserStats ? this.$store.state.instance.hideUserStats
: this.$store.state.config.hideUserStats, : this.$store.state.config.hideUserStats,
@ -84,13 +86,68 @@ export default {
methods: { methods: {
followUser () { followUser () {
const store = this.$store const store = this.$store
this.followRequestInProgress = true
store.state.api.backendInteractor.followUser(this.user.id) store.state.api.backendInteractor.followUser(this.user.id)
.then((followedUser) => store.commit('addNewUsers', [followedUser])) .then((followedUser) => store.commit('addNewUsers', [followedUser]))
.then(() => {
// For locked users we just mark it that we sent the follow request
if (this.user.locked) {
this.followRequestInProgress = false
this.followRequestSent = true
return
}
if (this.user.following) {
// If we get result immediately, just stop.
this.followRequestInProgress = false
return
}
// But usually we don't get result immediately, so we ask server
// for updated user profile to confirm if we are following them
// Sometimes it takes several tries. Sometimes we end up not following
// user anyway, probably because they locked themselves and we
// don't know that yet.
// Recursive Promise, it will call itself up to 3 times.
const fetchUser = (attempt) => 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, attempt]))
.catch((e) => reject(e))
}, 500)
}).then(([following, attempt]) => {
if (!following && attempt <= 3) {
// If we BE reports that we still not following that user - retry,
// increment attempts by one
return fetchUser(++attempt)
} else {
// If we run out of attempts, just return whatever status is.
return following
}
})
return fetchUser(1)
.then((following) => {
if (following) {
// We confirmed and everything its good.
this.followRequestInProgress = false
} else {
// If after all the tries, just treat it as if user is locked
this.followRequestInProgress = false
this.followRequestSent = true
}
})
})
}, },
unfollowUser () { unfollowUser () {
const store = this.$store const store = this.$store
this.followRequestInProgress = true
store.state.api.backendInteractor.unfollowUser(this.user.id) store.state.api.backendInteractor.unfollowUser(this.user.id)
.then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
.then(() => {
this.followRequestInProgress = false
})
}, },
blockUser () { blockUser () {
const store = this.$store const store = this.$store

View file

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

View file

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

View file

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