Improved following and shout behavior

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

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

locales/de.json

@@ -19,8 +19,7 @@
   },
   "followButton": {
     "follow": "Folgen",
-    "following": "Folgst",
-    "unfollow": "Entfolgen"
+    "following": "Folge Ich"
   },
   "shoutButton": {
     "shouted": "empfohlen"

locales/en.json

@@ -19,8 +19,7 @@
   },
   "followButton": {
     "follow": "Follow",
-    "following": "Following",
-    "unfollow": "Unfollow"
+    "following": "Following"
   },
   "shoutButton": {
     "shouted": "shouted"