From 76c4e4cd8f261c0a96513a710b05f1a6ea9efafa Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sun, 3 Mar 2019 19:30:54 +0100
Subject: [PATCH 01/14] Show status of follows and shouts for currently logged
 in user

---
 components/Author.vue          | 1 +
 components/FollowButton.vue    | 5 +++--
 components/ShoutButton.vue     | 5 +++--
 graphql/UserProfileQuery.js    | 3 +++
 pages/index.vue                | 1 +
 pages/post/_slug/index.vue     | 4 ++++
 pages/post/_slug/more-info.vue | 1 +
 pages/profile/_slug.vue        | 1 +
 8 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index f1f57113b..5f1ac9980 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -107,6 +107,7 @@
           <ds-flex-item :width="{base: 3}">
             <hc-follow-button
               :follow-id="author.id"
+              :is-followed="author.followedByCurrentUser"
               @update="voted = true"
             />
           </ds-flex-item>
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 3540726d2..0e02f963f 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-button
-    :disabled="disabled || !followId"
+    :disabled="disabled || !followId || isFollowed"
     :loading="loading"
     icon="plus"
     primary
@@ -18,7 +18,8 @@ export default {
   name: 'HcFollowButton',
 
   props: {
-    followId: { type: String, default: null }
+    followId: { type: String, default: null },
+    isFollowed: { type: Boolean, default: false }
   },
   data() {
     return {
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 075006b2e..05dd99596 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -4,7 +4,7 @@
     style="text-align: center"
   >
     <ds-button
-      :disabled="disabled || loading"
+      :disabled="disabled || loading || isShouted"
       danger
       size="x-large"
       icon="bullhorn"
@@ -28,7 +28,8 @@ import gql from 'graphql-tag'
 export default {
   props: {
     count: { type: Number, default: 0 },
-    postId: { type: String, default: null }
+    postId: { type: String, default: null },
+    isShouted: { type: Boolean, default: false }
   },
   data() {
     return {
diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 4e0245b52..30431602b 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -29,6 +29,7 @@ export default app => {
           slug
           avatar
           followedByCount
+          followedByCurrentUser
           contributionsCount
           commentsCount
           badges {
@@ -41,12 +42,14 @@ export default app => {
           }
         }
         followedByCount
+        followedByCurrentUser
         followedBy(first: 7)  {
           id
           name
           slug
           avatar
           followedByCount
+          followedByCurrentUser
           contributionsCount
           commentsCount
           badges {
diff --git a/pages/index.vue b/pages/index.vue
index 7bc85b3a4..f4785b3ac 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -108,6 +108,7 @@ export default {
                 shoutedCount
                 commentsCount
                 followedByCount
+                followedByCurrentUser
                 location {
                   name: name${this.$i18n.locale().toUpperCase()}
                 }
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 68655a31f..32c9609ef 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -29,6 +29,7 @@
     <hc-shout-button
       v-if="post.author"
       :count="post.shoutedCount"
+      :is-shouted="post.shoutedByCurrentUser"
       :post-id="post.id"
     />
     <!-- Categories -->
@@ -188,6 +189,7 @@ export default {
                 contributionsCount
                 commentsCount
                 followedByCount
+                followedByCurrentUser
                 location {
                     name: name${this.$i18n.locale().toUpperCase()}
                   }
@@ -215,6 +217,7 @@ export default {
                   contributionsCount
                   commentsCount
                   followedByCount
+                  followedByCurrentUser
                   location {
                     name: name${this.$i18n.locale().toUpperCase()}
                   }
@@ -231,6 +234,7 @@ export default {
                 icon
               }
               shoutedCount
+              shoutedByCurrentUser
             }
           }
         `)
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 847975757..d4de5f6f3 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -109,6 +109,7 @@ export default {
                   avatar
                   contributionsCount
                   followedByCount
+                  followedByCurrentUser
                   commentsCount
                   location {
                     name: name${this.$i18n.locale().toUpperCase()}
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 98d3b9f48..e6d0f473b 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -86,6 +86,7 @@
             <hc-follow-button
               v-if="!myProfile"
               :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
               @update="voted = true && fetchUser()"
             />
           </ds-space>

From c40f6521d166aa594c7a0aeb5dba4951ca505e20 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 11:19:23 +0100
Subject: [PATCH 02/14] Use new shout mutation

---
 components/ShoutButton.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 05dd99596..36e3df64f 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -44,23 +44,21 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($myId: ID!, $postId: ID!) {
-              AddUserShouted(from: { id: $myId }, to: { id: $postId }) {
-                from {
-                  id
-                }
-              }
+            mutation($id: ID!) {
+              shout(id: $id, type: Post)
             }
           `,
           variables: {
-            myId: this.$store.getters['auth/user'].id,
-            postId: this.postId
+            id: this.postId
           }
         })
-        .then(() => {
+        .then(res => {
+          console.log(res)
           this.loading = false
           this.disabled = true
-          this.shoutedCount++
+          if (res && res.data && res.data.shout) {
+            this.shoutedCount++
+          }
           this.$emit('update')
         })
     }

From dc134672944377bcbf3d8785989f79ffe4bc4fc1 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 11:21:19 +0100
Subject: [PATCH 03/14] Use new follow mutation

---
 components/FollowButton.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 0e02f963f..21e51f407 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -33,17 +33,12 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($myId: ID!, $followId: ID!) {
-              AddUserFollowing(from: { id: $myId }, to: { id: $followId }) {
-                from {
-                  id
-                }
-              }
+            mutation($id: ID!) {
+              follow(id: $id)
             }
           `,
           variables: {
-            myId: this.$store.getters['auth/user'].id,
-            followId: this.followId
+            id: this.followId
           }
         })
         .then(() => {

From 30e7c57764d6115770b46bfdedd2422ad7697cb6 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 11:39:55 +0100
Subject: [PATCH 04/14] Fixed shout and follow behavior

---
 components/FollowButton.vue | 14 ++++++++++----
 components/ShoutButton.vue  | 12 ++++++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 21e51f407..75cac49b5 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -34,17 +34,23 @@ export default {
         .mutate({
           mutation: gql`
             mutation($id: ID!) {
-              follow(id: $id)
+              follow(id: $id, type: User)
             }
           `,
           variables: {
             id: this.followId
           }
         })
-        .then(() => {
+        .then(res => {
+          if (res && res.data && res.data.follow) {
+            this.$emit('update')
+            this.$nextTick(() => {
+              this.disabled = true
+            })
+          }
+        })
+        .finally(() => {
           this.loading = false
-          this.disabled = true
-          this.$emit('update')
         })
     }
   }
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 36e3df64f..280420823 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -4,6 +4,7 @@
     style="text-align: center"
   >
     <ds-button
+      :loading="loading"
       :disabled="disabled || loading || isShouted"
       danger
       size="x-large"
@@ -53,13 +54,16 @@ export default {
           }
         })
         .then(res => {
-          console.log(res)
-          this.loading = false
-          this.disabled = true
           if (res && res.data && res.data.shout) {
-            this.shoutedCount++
+            this.shoutedCount = this.count + 1
           }
           this.$emit('update')
+          this.$nextTick(() => {
+            this.disabled = true
+          })
+        })
+        .finally(() => {
+          this.loading = false
         })
     }
   }

From 975c0c80f990336ad9093536d5f5f01e38cf880c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 12:53:46 +0100
Subject: [PATCH 05/14] Added unshout functionality to shout button

---
 components/ShoutButton.vue | 34 ++++++++++++++++++++++------------
 pages/post/_slug/index.vue |  4 ++--
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 280420823..6f2b67e7a 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -5,11 +5,12 @@
   >
     <ds-button
       :loading="loading"
-      :disabled="disabled || loading || isShouted"
-      danger
+      :disabled="disabled"
+      :ghost="!shouted"
+      :primary="shouted"
       size="x-large"
       icon="bullhorn"
-      @click="shout"
+      @click="toggle"
     />
     <ds-space margin-bottom="xx-small" />
     <ds-text color="soft">
@@ -36,17 +37,30 @@ export default {
     return {
       loading: false,
       disabled: false,
-      shoutedCount: this.count
+      shoutedCount: this.count,
+      shouted: false
+    }
+  },
+  watch: {
+    isShouted: {
+      immediate: true,
+      handler: function(shouted) {
+        this.shouted = shouted
+      }
     }
   },
   methods: {
-    shout() {
+    toggle() {
+      const shout = !this.shouted
+      const mutation = shout ? 'shout' : 'unshout'
+      const count = shout ? this.shoutedCount + 1 : this.shoutedCount - 1
+
       this.loading = true
       this.$apollo
         .mutate({
           mutation: gql`
             mutation($id: ID!) {
-              shout(id: $id, type: Post)
+              ${mutation}(id: $id, type: Post)
             }
           `,
           variables: {
@@ -54,13 +68,9 @@ export default {
           }
         })
         .then(res => {
-          if (res && res.data && res.data.shout) {
-            this.shoutedCount = this.count + 1
-          }
+          this.shoutedCount = count
+          this.shouted = shout
           this.$emit('update')
-          this.$nextTick(() => {
-            this.disabled = true
-          })
         })
         .finally(() => {
           this.loading = false
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 32c9609ef..a8dca2622 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -191,8 +191,8 @@ export default {
                 followedByCount
                 followedByCurrentUser
                 location {
-                    name: name${this.$i18n.locale().toUpperCase()}
-                  }
+                  name: name${this.$i18n.locale().toUpperCase()}
+                }
                 badges {
                   id
                   key

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 06/14] 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",

From 33ef91ee080f763ced499226bcbeec830900c55b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 13:47:33 +0100
Subject: [PATCH 07/14] Fixed an issue with following state update

---
 components/Author.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Author.vue b/components/Author.vue
index 124963b86..6389e36ca 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="following => post.author.followedByCurrentUser = following"
+              @update="following => author.followedByCurrentUser = following"
             />
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">

From 1423101ca5acdb0906ba7065bf712f6d4db873dd Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 14:18:06 +0100
Subject: [PATCH 08/14] Disable shouting for own content

---
 components/ShoutButton.vue | 4 ++--
 pages/post/_slug/index.vue | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 6f2b67e7a..d1676f34f 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -31,12 +31,12 @@ export default {
   props: {
     count: { type: Number, default: 0 },
     postId: { type: String, default: null },
-    isShouted: { type: Boolean, default: false }
+    isShouted: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
   data() {
     return {
       loading: false,
-      disabled: false,
       shoutedCount: this.count,
       shouted: false
     }
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index a8dca2622..074db5d7b 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -28,6 +28,7 @@
     <ds-space margin="xx-large" />
     <hc-shout-button
       v-if="post.author"
+      :disabled="isAuthor(post.author.id)"
       :count="post.shoutedCount"
       :is-shouted="post.shoutedByCurrentUser"
       :post-id="post.id"

From 66edec0dc823a1827db0ac8fa038b38a23a1aa00 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 14:30:02 +0100
Subject: [PATCH 09/14] Translated shot button

---
 components/ShoutButton.vue | 13 +++++++++++--
 locales/de.json            |  3 +++
 locales/en.json            |  3 +++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index d1676f34f..9ca77bf5a 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -13,13 +13,16 @@
       @click="toggle"
     />
     <ds-space margin-bottom="xx-small" />
-    <ds-text color="soft">
+    <ds-text
+      color="soft"
+      class="shout-button-text"
+    >
       <ds-heading
         style="display: inline"
         tag="h3"
       >
         {{ shoutedCount }}x
-      </ds-heading> Empfohlen
+      </ds-heading> {{ $t('shoutButton.shouted') }}
     </ds-text>
   </ds-space>
 </template>
@@ -79,3 +82,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.shout-button-text {
+  user-select: none;
+}
+</style>
diff --git a/locales/de.json b/locales/de.json
index b6da57bd9..9821086e6 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -22,6 +22,9 @@
     "following": "Folgst",
     "unfollow": "Entfolgen"
   },
+  "shoutButton": {
+    "shouted": "empfohlen"
+  },
   "profile": {
     "name": "Mein Profil",
     "memberSince": "Mitglied seit",
diff --git a/locales/en.json b/locales/en.json
index aec3233b7..52baeb073 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -22,6 +22,9 @@
     "following": "Following",
     "unfollow": "Unfollow"
   },
+  "shoutButton": {
+    "shouted": "shouted"
+  },
   "profile": {
     "name": "My Profile",
     "memberSince": "Member since",

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 10/14] 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"

From d9b633c5aecac2b74b76408b2e27abb570a2b069 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 17:26:20 +0100
Subject: [PATCH 11/14] Make follow button update instant

---
 components/Author.vue       | 2 +-
 components/FollowButton.vue | 8 ++++++++
 components/ShoutButton.vue  | 2 +-
 pages/profile/_slug.vue     | 7 ++-----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 6389e36ca..f12e53d3e 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="following => author.followedByCurrentUser = following"
+              @optimistic="follow => author.followedByCurrentUser = follow"
             />
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 653ecd2e1..7cce2e65a 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -64,6 +64,9 @@ export default {
       const mutation = follow ? 'follow' : 'unfollow'
 
       this.hovered = false
+
+      this.$emit('optimistic', follow)
+
       this.$apollo
         .mutate({
           mutation: gql`
@@ -78,8 +81,13 @@ export default {
         .then(res => {
           if (res && res.data) {
             this.$emit('update', follow)
+          } else {
+            this.$emit('optimistic', this.isFollowed)
           }
         })
+        .catch(() => {
+          this.$emit('optimistic', this.isFollowed)
+        })
     }
   }
 }
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 95322be4e..02d7cb639 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -79,7 +79,7 @@ export default {
         })
         .then(res => {
           if (res && res.data) {
-            this.$emit('update')
+            this.$emit('update', shout)
           }
         })
         .catch(() => {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index e6d0f473b..5880921c0 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -87,7 +87,8 @@
               v-if="!myProfile"
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
-              @update="voted = true && fetchUser()"
+              @optimistic="follow => user.followedByCurrentUser = follow"
+              @update="follow => fetchUser()"
             />
           </ds-space>
           <template v-if="user.about">
@@ -336,10 +337,6 @@ export default {
     },
     followedByCount() {
       let count = Number(this.user.followedByCount) || 0
-      if (this.voted) {
-        // NOTE: this is used for presentation
-        count += 1
-      }
       return count
     },
     user() {

From 8792f02932e6e47819a52526e37de4c413a4fc1a Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 17:35:41 +0100
Subject: [PATCH 12/14] Improved follow button optimistic behavior

---
 components/Author.vue       | 1 +
 components/FollowButton.vue | 9 +++------
 pages/profile/_slug.vue     | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index f12e53d3e..773037fac 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -109,6 +109,7 @@
               :follow-id="author.id"
               :is-followed="author.followedByCurrentUser"
               @optimistic="follow => author.followedByCurrentUser = follow"
+              @update="follow => author.followedByCurrentUser = follow"
             />
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 7cce2e65a..676aa1a83 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -79,14 +79,11 @@ export default {
           }
         })
         .then(res => {
-          if (res && res.data) {
-            this.$emit('update', follow)
-          } else {
-            this.$emit('optimistic', this.isFollowed)
-          }
+          this.$emit('update', follow ? res.data.follow : follow)
+          this.$emit('optimistic', follow ? res.data.follow : follow)
         })
         .catch(() => {
-          this.$emit('optimistic', this.isFollowed)
+          this.$emit('optimistic', !follow)
         })
     }
   }
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 5880921c0..f83e25e1f 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -88,7 +88,7 @@
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
               @optimistic="follow => user.followedByCurrentUser = follow"
-              @update="follow => fetchUser()"
+              @update="follow => user.followedByCurrentUser = follow && fetchUser()"
             />
           </ds-space>
           <template v-if="user.about">

From 29dac5c5a359c58ee5bffb37e48cc15225bf26fb Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 5 Mar 2019 17:37:48 +0100
Subject: [PATCH 13/14] Removed unused voted var from author component

---
 components/Author.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/components/Author.vue b/components/Author.vue
index 773037fac..54770d33d 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -141,21 +141,12 @@ export default {
     trunc: { type: Number, default: null },
     showAuthorPopover: { type: Boolean, default: true }
   },
-  data() {
-    return {
-      voted: false
-    }
-  },
   computed: {
     itsMe() {
       return this.author.slug === this.$store.getters['auth/user'].slug
     },
     fanCount() {
       let count = Number(this.author.followedByCount) || 0
-      if (this.voted) {
-        // NOTE: this is used for presentation
-        count += 1
-      }
       return count
     },
     author() {

From 78c9b83282ec484307070be4ec8f8282cf95b8a8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 6 Mar 2019 13:08:26 +0100
Subject: [PATCH 14/14] Fixed follow stats

---
 components/FollowButton.vue | 4 ++--
 pages/profile/_slug.vue     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 676aa1a83..f5c705a8d 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -79,8 +79,8 @@ export default {
           }
         })
         .then(res => {
-          this.$emit('update', follow ? res.data.follow : follow)
-          this.$emit('optimistic', follow ? res.data.follow : follow)
+          // this.$emit('optimistic', follow ? res.data.follow : follow)
+          this.$emit('update', follow)
         })
         .catch(() => {
           this.$emit('optimistic', !follow)
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index f83e25e1f..614187004 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -61,7 +61,7 @@
           <ds-flex>
             <ds-flex-item>
               <no-ssr>
-                <ds-number :label="$t('profile.following')">
+                <ds-number :label="$t('profile.followers')">
                   <hc-count-to
                     slot="count"
                     :end-val="followedByCount"
@@ -71,7 +71,7 @@
             </ds-flex-item>
             <ds-flex-item>
               <no-ssr>
-                <ds-number :label="$t('profile.followers')">
+                <ds-number :label="$t('profile.following')">
                   <hc-count-to
                     slot="count"
                     :end-val="Number(user.followingCount) || 0"
@@ -88,7 +88,7 @@
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
               @optimistic="follow => user.followedByCurrentUser = follow"
-              @update="follow => user.followedByCurrentUser = follow && fetchUser()"
+              @update="follow => fetchUser()"
             />
           </ds-space>
           <template v-if="user.about">