commit: 4b30ce64c9f7e90a8d8fb374b91e33916da179f5
parent: 10a0296aacfd46eee9b400e0964e8aca540b3eae
Author: Shpuld Shpludson <shp@cock.li>
Date: Fri, 14 Dec 2018 17:33:11 +0000
Merge branch 'async_follow' into 'develop'
Better "follow" button behavior
Closes #133
See merge request pleroma/pleroma-fe!396
Diffstat:
4 files changed, 82 insertions(+), 4 deletions(-)
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
@@ -5,6 +5,8 @@ export default {
props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
data () {
return {
+ followRequestInProgress: false,
+ followRequestSent: false,
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
? this.$store.state.instance.hideUserStats
: this.$store.state.config.hideUserStats,
@@ -84,13 +86,68 @@ 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(() => {
+ // 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 () {
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
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
@@ -44,13 +44,26 @@
<div class="follow" v-if="loggedIn">
<span v-if="user.following">
<!--Following them!-->
- <button @click="unfollowUser" class="pressed">
- {{ $t('user_card.following') }}
+ <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">
- {{ $t('user_card.follow') }}
+ <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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -320,6 +320,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!",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -280,6 +280,10 @@
"block": "Заблокировать",
"blocked": "Заблокирован",
"follow": "Читать",
+ "follow_sent": "Запрос отправлен!",
+ "follow_progress": "Запрашиваем…",
+ "follow_again": "Запросить еще заново?",
+ "follow_unfollow": "Перестать читать",
"followees": "Читаемые",
"followers": "Читатели",
"following": "Читаю",
