From e20d3fb2147b5a603b0e0a9f7946d2fc2988826b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 13:43:09 +0100
Subject: [PATCH] Improved following button and translated it

---
 components/Author.vue       |  2 +-
 components/FollowButton.vue | 55 +++++++++++++++++++++++++++----------
 locales/de.json             |  5 ++++
 locales/en.json             |  5 ++++
 4 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 5f1ac9980..124963b86 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="voted = true"
+              @update="following => post.author.followedByCurrentUser = following"
             />
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 75cac49b5..c4d0caf24 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -1,13 +1,16 @@
 <template>
   <ds-button
-    :disabled="disabled || !followId || isFollowed"
+    :disabled="disabled || !followId"
     :loading="loading"
-    icon="plus"
-    primary
+    :icon="icon"
+    :primary="isFollowed && !hovered"
+    :danger="isFollowed && hovered"
     fullwidth
-    @click.prevent="follow"
+    @mouseenter.native="hovered = !disabled"
+    @mouseleave.native="hovered = false"
+    @click.prevent="toggle"
   >
-    Folgen
+    {{ label }}
   </ds-button>
 </template>
 
@@ -24,17 +27,44 @@ export default {
   data() {
     return {
       disabled: false,
-      loading: false
+      loading: false,
+      hovered: false
+    }
+  },
+  computed: {
+    icon() {
+      if (this.isFollowed && this.hovered) {
+        return 'close'
+      } else {
+        return this.isFollowed ? 'check' : 'plus'
+      }
+    },
+    label() {
+      if (this.isFollowed && this.hovered) {
+        return this.$t('followButton.unfollow')
+      } else if (this.isFollowed) {
+        return this.$t('followButton.following')
+      } else {
+        return this.$t('followButton.follow')
+      }
+    }
+  },
+  watch: {
+    isFollowed() {
+      this.loading = false
     }
   },
   methods: {
-    follow() {
+    toggle() {
+      const follow = !this.isFollowed
+      const mutation = follow ? 'follow' : 'unfollow'
+
       this.loading = true
       this.$apollo
         .mutate({
           mutation: gql`
             mutation($id: ID!) {
-              follow(id: $id, type: User)
+              ${mutation}(id: $id, type: User)
             }
           `,
           variables: {
@@ -42,14 +72,9 @@ export default {
           }
         })
         .then(res => {
-          if (res && res.data && res.data.follow) {
-            this.$emit('update')
-            this.$nextTick(() => {
-              this.disabled = true
-            })
-          }
+          this.$emit('update', !this.isFollowed)
         })
-        .finally(() => {
+        .catch(() => {
           this.loading = false
         })
     }
diff --git a/locales/de.json b/locales/de.json
index b3e6289ac..b6da57bd9 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -17,6 +17,11 @@
     "moreInfo": "Was ist Human Connection?",
     "hello": "Hallo"
   },
+  "followButton": {
+    "follow": "Folgen",
+    "following": "Folgst",
+    "unfollow": "Entfolgen"
+  },
   "profile": {
     "name": "Mein Profil",
     "memberSince": "Mitglied seit",
diff --git a/locales/en.json b/locales/en.json
index cfe634675..aec3233b7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -17,6 +17,11 @@
     "moreInfo": "What is Human Connection?",
     "hello": "Hello"
   },
+  "followButton": {
+    "follow": "Follow",
+    "following": "Following",
+    "unfollow": "Unfollow"
+  },
   "profile": {
     "name": "My Profile",
     "memberSince": "Member since",