From beb78249f6ef97691302a42708669bda78285cb9 Mon Sep 17 00:00:00 2001
From: Vasily Belolapotkov <belolapotkov.v@gmail.com>
Date: Mon, 9 Sep 2019 10:01:46 +0300
Subject: [PATCH] update follower count on follow/unfollow

---
 webapp/components/FollowButton.vue | 19 ++++++++-----------
 webapp/components/User/index.vue   | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/webapp/components/FollowButton.vue b/webapp/components/FollowButton.vue
index 7372b8a78..cc4662c85 100644
--- a/webapp/components/FollowButton.vue
+++ b/webapp/components/FollowButton.vue
@@ -59,16 +59,15 @@ export default {
         this.hovered = true
       }
     },
-    toggle() {
+    async toggle() {
       const follow = !this.isFollowed
       const mutation = follow ? 'follow' : 'unfollow'
 
       this.hovered = false
-
       this.$emit('optimistic', follow)
 
-      this.$apollo
-        .mutate({
+      try {
+        await this.$apollo.mutate({
           mutation: gql`
             mutation($id: ID!) {
               ${mutation}(id: $id, type: User)
@@ -78,13 +77,11 @@ export default {
             id: this.followId,
           },
         })
-        .then(res => {
-          // this.$emit('optimistic', follow ? res.data.follow : follow)
-          this.$emit('update', follow)
-        })
-        .catch(() => {
-          this.$emit('optimistic', !follow)
-        })
+
+        this.$emit('update', follow)
+      } catch {
+        this.$emit('optimistic', !follow)
+      }
     },
   },
 }
diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 684220f38..9808f2dc5 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -79,8 +79,8 @@
             <hc-follow-button
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
-              @optimistic="follow => (user.followedByCurrentUser = follow)"
-              @update="follow => (user.followedByCurrentUser = follow)"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
             />
           </ds-flex-item>
           <ds-flex-item :width="{ base: 1 }">
@@ -135,6 +135,16 @@ export default {
       return name || this.$t('profile.userAnonym')
     },
   },
+  methods: {
+    optimisticFollow(follow) {
+      const inc = follow ? 1 : -1
+      this.user.followedByCurrentUser = follow
+      this.user.followedByCount += inc
+    },
+    updateFollow(follow) {
+      this.user.followedByCurrentUser = follow
+    },
+  },
 }
 </script>