Merge branch 'async_follow' into 'develop'

Better "follow" button behavior

Closes #133

See merge request pleroma/pleroma-fe!396

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

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">
+            <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>

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!",

src/i18n/ru.json

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