From d9b633c5aecac2b74b76408b2e27abb570a2b069 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 17:26:20 +0100
Subject: [PATCH] Make follow button update instant

---
 components/Author.vue       | 2 +-
 components/FollowButton.vue | 8 ++++++++
 components/ShoutButton.vue  | 2 +-
 pages/profile/_slug.vue     | 7 ++-----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 6389e36ca..f12e53d3e 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -108,7 +108,7 @@
             <hc-follow-button
               :follow-id="author.id"
               :is-followed="author.followedByCurrentUser"
-              @update="following => author.followedByCurrentUser = following"
+              @optimistic="follow => author.followedByCurrentUser = follow"
             />
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 653ecd2e1..7cce2e65a 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -64,6 +64,9 @@ export default {
       const mutation = follow ? 'follow' : 'unfollow'
 
       this.hovered = false
+
+      this.$emit('optimistic', follow)
+
       this.$apollo
         .mutate({
           mutation: gql`
@@ -78,8 +81,13 @@ export default {
         .then(res => {
           if (res && res.data) {
             this.$emit('update', follow)
+          } else {
+            this.$emit('optimistic', this.isFollowed)
           }
         })
+        .catch(() => {
+          this.$emit('optimistic', this.isFollowed)
+        })
     }
   }
 }
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 95322be4e..02d7cb639 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -79,7 +79,7 @@ export default {
         })
         .then(res => {
           if (res && res.data) {
-            this.$emit('update')
+            this.$emit('update', shout)
           }
         })
         .catch(() => {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index e6d0f473b..5880921c0 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -87,7 +87,8 @@
               v-if="!myProfile"
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
-              @update="voted = true && fetchUser()"
+              @optimistic="follow => user.followedByCurrentUser = follow"
+              @update="follow => fetchUser()"
             />
           </ds-space>
           <template v-if="user.about">
@@ -336,10 +337,6 @@ export default {
     },
     followedByCount() {
       let count = Number(this.user.followedByCount) || 0
-      if (this.voted) {
-        // NOTE: this is used for presentation
-        count += 1
-      }
       return count
     },
     user() {