Merge pull request #1533 from Human-Connection/293-fix-follower-counter

[WIP] 🍰 Update follower count on follow/unfollow

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)
+      }
     },
   },
 }

webapp/components/User/User.vue

@@ -71,8 +71,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 }">
@@ -131,6 +131,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>