From d30649164a475d4816671f6735c68c7f7a2fa27b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 17:19:35 +0100
Subject: [PATCH] Improved following and shout behavior

---
 components/FollowButton.vue | 21 ++++++++++++---------
 components/ShoutButton.vue  | 19 +++++++++++++++----
 locales/de.json             |  3 +--
 locales/en.json             |  3 +--
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index c4d0caf24..653ecd2e1 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -6,7 +6,7 @@
     :primary="isFollowed && !hovered"
     :danger="isFollowed && hovered"
     fullwidth
-    @mouseenter.native="hovered = !disabled"
+    @mouseenter.native="onHover"
     @mouseleave.native="hovered = false"
     @click.prevent="toggle"
   >
@@ -40,9 +40,7 @@ export default {
       }
     },
     label() {
-      if (this.isFollowed && this.hovered) {
-        return this.$t('followButton.unfollow')
-      } else if (this.isFollowed) {
+      if (this.isFollowed) {
         return this.$t('followButton.following')
       } else {
         return this.$t('followButton.follow')
@@ -52,14 +50,20 @@ export default {
   watch: {
     isFollowed() {
       this.loading = false
+      this.hovered = false
     }
   },
   methods: {
+    onHover() {
+      if (!this.disabled && !this.loading) {
+        this.hovered = true
+      }
+    },
     toggle() {
       const follow = !this.isFollowed
       const mutation = follow ? 'follow' : 'unfollow'
 
-      this.loading = true
+      this.hovered = false
       this.$apollo
         .mutate({
           mutation: gql`
@@ -72,10 +76,9 @@ export default {
           }
         })
         .then(res => {
-          this.$emit('update', !this.isFollowed)
-        })
-        .catch(() => {
-          this.loading = false
+          if (res && res.data) {
+            this.$emit('update', follow)
+          }
         })
     }
   }
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 9ca77bf5a..95322be4e 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -58,7 +58,14 @@ export default {
       const mutation = shout ? 'shout' : 'unshout'
       const count = shout ? this.shoutedCount + 1 : this.shoutedCount - 1
 
-      this.loading = true
+      const backup = {
+        shoutedCount: this.shoutedCount,
+        shouted: this.shouted
+      }
+
+      this.shoutedCount = count
+      this.shouted = shout
+
       this.$apollo
         .mutate({
           mutation: gql`
@@ -71,9 +78,13 @@ export default {
           }
         })
         .then(res => {
-          this.shoutedCount = count
-          this.shouted = shout
-          this.$emit('update')
+          if (res && res.data) {
+            this.$emit('update')
+          }
+        })
+        .catch(() => {
+          this.shoutedCount = backup.shoutedCount
+          this.shouted = backup.shouted
         })
         .finally(() => {
           this.loading = false
diff --git a/locales/de.json b/locales/de.json
index 9821086e6..7a06b767e 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -19,8 +19,7 @@
   },
   "followButton": {
     "follow": "Folgen",
-    "following": "Folgst",
-    "unfollow": "Entfolgen"
+    "following": "Folge Ich"
   },
   "shoutButton": {
     "shouted": "empfohlen"
diff --git a/locales/en.json b/locales/en.json
index 52baeb073..c49fd1318 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -19,8 +19,7 @@
   },
   "followButton": {
     "follow": "Follow",
-    "following": "Following",
-    "unfollow": "Unfollow"
+    "following": "Following"
   },
   "shoutButton": {
     "shouted": "shouted"