From 92241576b3daf8d91fa65b529012100c3acac010 Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Thu, 6 Jun 2019 19:34:28 +0200
Subject: [PATCH 01/12] Implement active Tabs

---
 webapp/pages/profile/_id/_slug.vue | 144 +++++++++++++++++------------
 1 file changed, 85 insertions(+), 59 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 9a7af82ac..6e75a585f 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -132,69 +132,50 @@
           </ds-card>
         </ds-space>
       </ds-flex-item>
+
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <ds-flex :width="{ base: '100%' }" gutter="small">
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
-              <ds-flex>
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.post', null, user.contributionsCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer ds-tab-nav-item-active"
-                  @click="tabActivity('posts', $event)"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-                    <no-ssr>
-                      <ds-number :label="$t('common.post', null, user.contributionsCount)">
-                        <hc-count-to slot="count" :end-val="user.contributionsCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.comment', null, user.commentsCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer"
-                  @click="tabActivity('commented', $event)"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-
-                    <no-ssr>
-                      <ds-number :label="$t('profile.commented')">
-                        <hc-count-to slot="count" :end-val="user.commentsCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-
-                <ds-flex-item
-                  v-tooltip="{
-                    content: $t('common.your.shouted', null, user.shoutedCount),
-                    placement: 'right',
-                    delay: { show: 500 },
-                  }"
-                  class="ds-tab-nav-item pointer"
-                >
-                  <ds-space margin="small">
-                    <!-- TODO: find better solution for rendering errors -->
-                    <no-ssr>
-                      <ds-number :label="$t('profile.shouted')">
-                        <hc-count-to slot="count" :end-val="user.shoutedCount" />
-                      </ds-number>
-                    </no-ssr>
-                  </ds-space>
-                </ds-flex-item>
-              </ds-flex>
+              <ul class="Tabs">
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
+                  <a @click="handleTab('post')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('common.post', null, user.contributionsCount)">
+                          <hc-count-to slot="count" :end-val="user.contributionsCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
+                  <a @click="handleTab('comment')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('profile.commented')">
+                          <hc-count-to slot="count" :end-val="user.commentsCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
+                  <a @click="handleTab('shout')">
+                    <ds-space margin="small">
+                      <no-ssr placeholder="Loading...">
+                        <ds-number :label="$t('profile.shouted')">
+                          <hc-count-to slot="count" :end-val="user.shoutedCount" />
+                        </ds-number>
+                      </no-ssr>
+                    </ds-space>
+                  </a>
+                </li>
+                <li class="Tabs__presentation-slider" role="presentation"></li>
+              </ul>
             </ds-card>
           </ds-flex-item>
+
           <ds-flex-item style="text-align: center">
             <ds-button
               v-if="myProfile"
@@ -266,6 +247,7 @@ export default {
       voted: false,
       page: 1,
       pageSize: 6,
+      tabActive: 'post',
     }
   },
   computed: {
@@ -317,6 +299,10 @@ export default {
     },
   },
   methods: {
+    handleTab(str) {
+      this.$toast.info('!load posts here! =>' + str)
+      this.tabActive = str
+    },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },
@@ -370,8 +356,48 @@ export default {
   cursor: pointer;
 }
 
-.ds-tab-nav .ds-card-content .ds-tab-nav-item:hover {
-  border-bottom: 3px solid #c9c6ce;
+.Tab {
+  border-collapse: collapse;
+  padding-bottom: 5px;
+}
+.Tab:hover {
+  border-bottom: 2px solid #c9c6ce;
+}
+
+.Tabs {
+  position: relative;
+  background-color: #fff;
+  &:after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  &__tab {
+    float: left;
+    width: 33.333%;
+    text-align: center;
+    &:first-child.active ~ .Tabs__presentation-slider {
+      left: 0;
+    }
+    &:nth-child(2).active ~ .Tabs__presentation-slider {
+      left: 33.333%;
+    }
+    &:nth-child(3).active ~ .Tabs__presentation-slider {
+      left: calc(33.333% * 2);
+    }
+  }
+  &__presentation-slider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 33.333%;
+    height: 2px;
+    background-color: #17b53f;
+    transition: left 0.25s;
+  }
 }
 
 .profile-avatar.ds-avatar {

From 4278c75d529ce90bdb85a8eb4bc95bd29bfc5622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 6 Jun 2019 18:20:30 +0200
Subject: [PATCH 02/12] Refactor profile page, separate requests

---
 webapp/graphql/UserProfile/Post.js            | 38 +++++++++++++++++++
 .../User.js}                                  | 33 +---------------
 webapp/pages/profile/_id/_slug.vue            | 38 ++++++++++++-------
 3 files changed, 64 insertions(+), 45 deletions(-)
 create mode 100644 webapp/graphql/UserProfile/Post.js
 rename webapp/graphql/{UserProfileQuery.js => UserProfile/User.js} (67%)

diff --git a/webapp/graphql/UserProfile/Post.js b/webapp/graphql/UserProfile/Post.js
new file mode 100644
index 000000000..aa5ae77fd
--- /dev/null
+++ b/webapp/graphql/UserProfile/Post.js
@@ -0,0 +1,38 @@
+import gql from 'graphql-tag'
+
+export default app => {
+  const lang = app.$i18n.locale().toUpperCase()
+  return gql(`
+    query Post($filter: _PostFilter, $first: Int, $offset: Int) {
+      Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
+        id
+        slug
+        title
+        contentExcerpt
+        shoutedCount
+        commentsCount
+        deleted
+        image
+        createdAt
+        disabled
+        deleted
+        categories {
+          id
+          name
+          icon
+        }
+        author {
+          id
+          slug
+          avatar
+          name
+          disabled
+          deleted
+          location {
+            name: name${lang}
+          }
+        }
+      }
+    }
+  `)
+}
diff --git a/webapp/graphql/UserProfileQuery.js b/webapp/graphql/UserProfile/User.js
similarity index 67%
rename from webapp/graphql/UserProfileQuery.js
rename to webapp/graphql/UserProfile/User.js
index 16e7e1440..b30c5e617 100644
--- a/webapp/graphql/UserProfileQuery.js
+++ b/webapp/graphql/UserProfile/User.js
@@ -3,8 +3,8 @@ import gql from 'graphql-tag'
 export default app => {
   const lang = app.$i18n.locale().toUpperCase()
   return gql(`
-    query User($slug: String!, $first: Int, $offset: Int) {
-      User(slug: $slug) {
+    query User($id: ID!) {
+      User(id: $id) {
         id
         slug
         name
@@ -69,35 +69,6 @@ export default app => {
           }
         }
         contributionsCount
-        contributions(first: $first, offset: $offset, orderBy: createdAt_desc) {
-          id
-          slug
-          title
-          contentExcerpt
-          shoutedCount
-          commentsCount
-          deleted
-          image
-          createdAt
-          disabled
-          deleted
-          categories {
-            id
-            name
-            icon
-          }
-          author {
-            id
-            slug
-            avatar
-            name
-            disabled
-            deleted
-            location {
-              name: name${lang}
-            }
-          }
-        }
         socialMedia {
           id
           url
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 6e75a585f..ef5d492f6 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -193,7 +193,7 @@
               :key="post.id"
               :post="post"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
-              @deletePost="user.contributions.splice(index, 1)"
+              @deletePost="Post.splice(index, 1)"
             />
           </template>
           <template v-else>
@@ -244,6 +244,7 @@ export default {
   data() {
     return {
       User: [],
+      Post: [],
       voted: false,
       page: 1,
       pageSize: 6,
@@ -252,7 +253,7 @@ export default {
   },
   computed: {
     myProfile() {
-      return this.$route.params.slug === this.$store.getters['auth/user'].slug
+      return this.$route.params.id === this.$store.getters['auth/user'].id
     },
     followedByCount() {
       let count = Number(this.user.followedByCount) || 0
@@ -266,14 +267,14 @@ export default {
     },
     hasMore() {
       return (
-        this.user.contributions && this.user.contributions.length < this.user.contributionsCount
+        this.Post && this.Post.length < this.user.contributionsCount
       )
     },
     activePosts() {
-      if (!this.user.contributions) {
+      if (!this.Post) {
         return []
       }
-      return this.uniq(this.user.contributions.filter(post => !post.deleted))
+      return this.uniq(this.Post.filter(post => !post.deleted))
     },
     socialMediaLinks() {
       const { socialMedia = [] } = this.user
@@ -314,18 +315,18 @@ export default {
       // this.page++
       // Fetch more data and transform the original result
       this.page++
-      this.$apollo.queries.User.fetchMore({
+      this.$apollo.queries.Post.fetchMore({
         variables: {
-          slug: this.$route.params.slug,
+          filter: { author: { id: this.$route.params.id } },
           first: this.pageSize,
           offset: this.offset,
         },
         // Transform the previous result with new data
         updateQuery: (previousResult, { fetchMoreResult }) => {
-          let output = { User: this.User }
-          output.User[0].contributions = [
-            ...previousResult.User[0].contributions,
-            ...fetchMoreResult.User[0].contributions,
+          let output = { Post: this.Post}
+          output.Post = [
+            ...previousResult.Post,
+            ...fetchMoreResult.Post,
           ]
           return output
         },
@@ -334,19 +335,28 @@ export default {
     },
   },
   apollo: {
-    User: {
+    Post: {
       query() {
-        return require('~/graphql/UserProfileQuery.js').default(this)
+        return require('~/graphql/UserProfile/Post.js').default(this)
       },
       variables() {
         return {
-          slug: this.$route.params.slug,
+          filter: { author: { id: this.$route.params.id } },
           first: this.pageSize,
           offset: 0,
         }
       },
       fetchPolicy: 'cache-and-network',
     },
+    User: {
+      query() {
+        return require('~/graphql/UserProfile/User.js').default(this)
+      },
+      variables() {
+        return { id: this.$route.params.id }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>

From c9ef1bc5ce67d205d04606786df279359d6dccff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 6 Jun 2019 18:34:22 +0200
Subject: [PATCH 03/12] Implement switching of tabs and updating list

---
 webapp/graphql/UserProfile/Post.js |  4 ++--
 webapp/graphql/UserProfile/User.js |  4 ++--
 webapp/pages/profile/_id/_slug.vue | 35 ++++++++++++++++++++----------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/webapp/graphql/UserProfile/Post.js b/webapp/graphql/UserProfile/Post.js
index aa5ae77fd..e6123d0ef 100644
--- a/webapp/graphql/UserProfile/Post.js
+++ b/webapp/graphql/UserProfile/Post.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
-export default app => {
-  const lang = app.$i18n.locale().toUpperCase()
+export default (i18n) => {
+  const lang = i18n.locale().toUpperCase()
   return gql(`
     query Post($filter: _PostFilter, $first: Int, $offset: Int) {
       Post(filter: $filter, first: $first, offset: $offset, orderBy: createdAt_desc) {
diff --git a/webapp/graphql/UserProfile/User.js b/webapp/graphql/UserProfile/User.js
index b30c5e617..d87fc37ec 100644
--- a/webapp/graphql/UserProfile/User.js
+++ b/webapp/graphql/UserProfile/User.js
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
-export default app => {
-  const lang = app.$i18n.locale().toUpperCase()
+export default (i18n) => {
+  const lang = i18n.locale().toUpperCase()
   return gql(`
     query User($id: ID!) {
       User(id: $id) {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index ef5d492f6..65c63e21f 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -223,6 +223,17 @@ import HcUpload from '~/components/Upload'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import PostMutationHelpers from '~/mixins/PostMutationHelpers'
 
+import PostQuery from '~/graphql/UserProfile/Post.js'
+import UserQuery from '~/graphql/UserProfile/User.js'
+
+const tabToFilterMapping = ({ tab, id }) => {
+  return {
+    post: { author: { id } },
+    comment: { comments_some: { author: { id } } },
+    shout: { shoutedBy_some: { id } },
+  }[tab]
+}
+
 export default {
   components: {
     User,
@@ -242,6 +253,7 @@ export default {
     mode: 'out-in',
   },
   data() {
+    const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
     return {
       User: [],
       Post: [],
@@ -249,6 +261,7 @@ export default {
       page: 1,
       pageSize: 6,
       tabActive: 'post',
+      filter
     }
   },
   computed: {
@@ -300,9 +313,10 @@ export default {
     },
   },
   methods: {
-    handleTab(str) {
-      this.$toast.info('!load posts here! =>' + str)
-      this.tabActive = str
+    handleTab(tab) {
+      this.tabActive = tab
+      this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+      this.showMoreContributions()
     },
     uniq(items, field = 'id') {
       return uniqBy(items, field)
@@ -317,17 +331,14 @@ export default {
       this.page++
       this.$apollo.queries.Post.fetchMore({
         variables: {
-          filter: { author: { id: this.$route.params.id } },
+          filter: this.filter,
           first: this.pageSize,
           offset: this.offset,
         },
         // Transform the previous result with new data
         updateQuery: (previousResult, { fetchMoreResult }) => {
-          let output = { Post: this.Post}
-          output.Post = [
-            ...previousResult.Post,
-            ...fetchMoreResult.Post,
-          ]
+          let output = { Post: this.Post }
+          output.Post = [...previousResult.Post, ...fetchMoreResult.Post]
           return output
         },
         fetchPolicy: 'cache-and-network',
@@ -337,11 +348,11 @@ export default {
   apollo: {
     Post: {
       query() {
-        return require('~/graphql/UserProfile/Post.js').default(this)
+        return PostQuery(this.$i18n)
       },
       variables() {
         return {
-          filter: { author: { id: this.$route.params.id } },
+          filter: this.filter,
           first: this.pageSize,
           offset: 0,
         }
@@ -350,7 +361,7 @@ export default {
     },
     User: {
       query() {
-        return require('~/graphql/UserProfile/User.js').default(this)
+        return UserQuery(this.$i18n)
       },
       variables() {
         return { id: this.$route.params.id }

From 08778f37984da11fff3d6a59c2ae3c09b8d9f4dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 6 Jun 2019 23:24:40 +0200
Subject: [PATCH 04/12] Remove unnecessary refetching

First of all this removes a bug, but it also shows that apollo triggers
the rerendering of dependent components.

FYI @mattwr18
---
 webapp/pages/profile/_id/_slug.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 65c63e21f..b77405688 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -316,7 +316,6 @@ export default {
     handleTab(tab) {
       this.tabActive = tab
       this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
-      this.showMoreContributions()
     },
     uniq(items, field = 'id') {
       return uniqBy(items, field)

From de0bcd949ad370f4de84386efabcdd90dce084ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Thu, 6 Jun 2019 23:43:15 +0200
Subject: [PATCH 05/12] Fix test

---
 webapp/graphql/UserProfile/Post.js     | 2 +-
 webapp/graphql/UserProfile/User.js     | 2 +-
 webapp/pages/profile/_id/_slug.spec.js | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/webapp/graphql/UserProfile/Post.js b/webapp/graphql/UserProfile/Post.js
index e6123d0ef..c33572a9e 100644
--- a/webapp/graphql/UserProfile/Post.js
+++ b/webapp/graphql/UserProfile/Post.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-export default (i18n) => {
+export default i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql(`
     query Post($filter: _PostFilter, $first: Int, $offset: Int) {
diff --git a/webapp/graphql/UserProfile/User.js b/webapp/graphql/UserProfile/User.js
index d87fc37ec..ad5a4b402 100644
--- a/webapp/graphql/UserProfile/User.js
+++ b/webapp/graphql/UserProfile/User.js
@@ -1,6 +1,6 @@
 import gql from 'graphql-tag'
 
-export default (i18n) => {
+export default i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql(`
     query User($id: ID!) {
diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index d79f9b885..43f0d4ed0 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -20,7 +20,13 @@ describe('ProfileSlug', () => {
         name: 'It is a post',
       },
       $t: jest.fn(),
-      // If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      // If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+      $route: {
+        params: {
+          id: '4711',
+          slug: 'john-doe',
+        },
+      },
       $router: {
         history: {
           push: jest.fn(),

From d3a70321b81e1a53bab01ae0cd3aa5c1a2629a62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 7 Jun 2019 00:30:40 +0200
Subject: [PATCH 06/12] Show a loading spinner for better UX

---
 webapp/pages/profile/_id/_slug.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b77405688..84d507564 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -187,6 +187,7 @@
               primary
             />
           </ds-flex-item>
+
           <template v-if="activePosts.length">
             <hc-post-card
               v-for="(post, index) in activePosts"
@@ -196,13 +197,24 @@
               @deletePost="Post.splice(index, 1)"
             />
           </template>
+          <template v-else-if="$apollo.loading">
+            <ds-flex-item>
+              <ds-section centered>
+                <ds-spinner size="base"></ds-spinner>
+              </ds-section>
+            </ds-flex-item>
+          </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
               <hc-empty margin="xx-large" icon="file" />
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
+        <hc-load-more
+          v-if="Post && hasMore"
+          :loading="$apollo.loading"
+          @click="showMoreContributions"
+        />
       </ds-flex-item>
     </ds-flex>
   </div>
@@ -315,6 +327,7 @@ export default {
   methods: {
     handleTab(tab) {
       this.tabActive = tab
+      this.Post = null
       this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
     },
     uniq(items, field = 'id') {

From 574b42a2a7d8599ee0f370b5a65a3dd3edc67426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 7 Jun 2019 01:28:55 +0200
Subject: [PATCH 07/12] "commentedCount" is different from "commentsCount"

One is how many comments you wrote, one is how many **posts** are there
with at least one comment of you.

E.g. you can comment twice on the same post. You will have a
`commentedCount` increase of 1 but a `commentsCount` of 2.

FYI @ogerly @Tirokk
---
 backend/src/schema/types/type/User.gql |  1 +
 webapp/graphql/UserProfile/User.js     |  2 +-
 webapp/pages/profile/_id/_slug.vue     | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index 1287aa45f..6bfb9b986 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -64,6 +64,7 @@ type User {
 
   comments: [Comment]! @relation(name: "WROTE", direction: "OUT")
   commentsCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(r)")
+  commentedCount: Int! @cypher(statement: "MATCH (this)-[:WROTE]->(r:Comment)-[:COMMENTS]->(p:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true AND NOT p.deleted = true AND NOT p.disabled = true RETURN COUNT(DISTINCT(p))")
 
   shouted: [Post]! @relation(name: "SHOUTED", direction: "OUT")
   shoutedCount: Int! @cypher(statement: "MATCH (this)-[:SHOUTED]->(r:Post) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)")
diff --git a/webapp/graphql/UserProfile/User.js b/webapp/graphql/UserProfile/User.js
index ad5a4b402..5bfe0510f 100644
--- a/webapp/graphql/UserProfile/User.js
+++ b/webapp/graphql/UserProfile/User.js
@@ -24,7 +24,7 @@ export default i18n => {
         }
         badgesCount
         shoutedCount
-        commentsCount
+        commentedCount
         followingCount
         following(first: 7) {
           id
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 84d507564..90071d322 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -154,7 +154,7 @@
                     <ds-space margin="small">
                       <no-ssr placeholder="Loading...">
                         <ds-number :label="$t('profile.commented')">
-                          <hc-count-to slot="count" :end-val="user.commentsCount" />
+                          <hc-count-to slot="count" :end-val="user.commentedCount" />
                         </ds-number>
                       </no-ssr>
                     </ds-space>
@@ -273,10 +273,18 @@ export default {
       page: 1,
       pageSize: 6,
       tabActive: 'post',
-      filter
+      filter,
     }
   },
   computed: {
+    hasMore() {
+      const total = {
+        post: this.user.contributionsCount,
+        shout: this.user.shoutedCount,
+        comment: this.user.commentedCount,
+      }[this.tabActive]
+      return this.Post && this.Post.length < total
+    },
     myProfile() {
       return this.$route.params.id === this.$store.getters['auth/user'].id
     },
@@ -290,11 +298,6 @@ export default {
     offset() {
       return (this.page - 1) * this.pageSize
     },
-    hasMore() {
-      return (
-        this.Post && this.Post.length < this.user.contributionsCount
-      )
-    },
     activePosts() {
       if (!this.Post) {
         return []

From a978591843f4d66aa48560b479f2fd5caccd17c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 7 Jun 2019 01:32:54 +0200
Subject: [PATCH 08/12] Fix bug introduced in 6f0447515

@ulfgebhardt For the `deleted` and `disabled` flags I would be glad if we could
take only one value, that is `true`, in case the post is considered disabled or
deleted respectively.

There might be more bugs like this now. Please keep in mind that these
counts are also used as total limits for pagination and you break the
pagination if you change the cypher statement.
---
 backend/src/schema/types/type/User.gql | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/backend/src/schema/types/type/User.gql b/backend/src/schema/types/type/User.gql
index 6bfb9b986..6836f16fe 100644
--- a/backend/src/schema/types/type/User.gql
+++ b/backend/src/schema/types/type/User.gql
@@ -56,8 +56,7 @@ type User {
   contributionsCount: Int! @cypher(
     statement: """
       MATCH (this)-[:WROTE]->(r:Post)
-      WHERE (NOT exists(r.deleted) OR r.deleted = false)
-      AND (NOT exists(r.disabled) OR r.disabled = false)
+      WHERE NOT r.deleted = true AND NOT r.disabled = true
       RETURN COUNT(r)
     """
   )
@@ -78,4 +77,4 @@ type User {
 
   badges: [Badge]! @relation(name: "REWARDED", direction: "IN")
   badgesCount: Int! @cypher(statement: "MATCH (this)<-[:REWARDED]-(r:Badge) RETURN COUNT(r)")
-}
\ No newline at end of file
+}

From 9384f85ebfca97c43c27c8f6a2b00246433cf2a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 7 Jun 2019 16:53:30 +0200
Subject: [PATCH 09/12] Use jest's expectation matchers if possible

@Tirokk jest has a lot of assertion matchers that will give you better
error messages than the default ones:
https://jestjs.io/docs/en/expect.html#tohavelengthnumber
---
 webapp/pages/profile/_id/_slug.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index 43f0d4ed0..a1a0cb949 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -66,7 +66,7 @@ describe('ProfileSlug', () => {
           beforeEach(jest.runAllTimers)
 
           it('emits "deletePost"', () => {
-            expect(wrapper.emitted().deletePost.length).toBe(1)
+            expect(wrapper.emitted().deletePost).toHaveLength(1)
           })
 
           it('does not go to index (main) page', () => {

From 15b7043d00f83564cac7869d2db09908eda10b97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Sat, 8 Jun 2019 01:50:08 +0200
Subject: [PATCH 10/12] Write a test for "load more" button

The crucial test is still missing: Write a test to check that no more
than one loading spinner is visible all the time.

@Tirokk FYI I wrote a page component test and made sure that the test
will also fail if the implementation is broken.
---
 webapp/components/LoadMore.vue         |  2 +-
 webapp/pages/profile/_id/_slug.spec.js | 93 +++++++++++++++++++++++++-
 2 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/webapp/components/LoadMore.vue b/webapp/components/LoadMore.vue
index 3d583ef50..ff8d4e6c4 100644
--- a/webapp/components/LoadMore.vue
+++ b/webapp/components/LoadMore.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space margin-top="large" style="text-align: center">
+  <ds-space class="load-more" margin-top="large" style="text-align: center">
     <ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
       {{ $t('actions.loadMore') }}
     </ds-button>
diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index a1a0cb949..ecf0d77e5 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { config, mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import ProfileSlug from './_slug.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
@@ -7,6 +7,11 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.filter('date', d => d)
+
+config.stubs['no-ssr'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('ProfileSlug', () => {
   let wrapper
@@ -19,7 +24,7 @@ describe('ProfileSlug', () => {
         id: 'p23',
         name: 'It is a post',
       },
-      $t: jest.fn(),
+      $t: jest.fn(t => t),
       // If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
       $route: {
         params: {
@@ -84,4 +89,88 @@ describe('ProfileSlug', () => {
       })
     })
   })
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(ProfileSlug, {
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given an authenticated user', () => {
+      beforeEach(() => {
+        mocks.$filters = {
+          removeLinks: c => c,
+        }
+        mocks.$store = {
+          getters: {
+            'auth/user': {
+              id: 'u23',
+            },
+          },
+        }
+      })
+
+      describe('given a user for the profile', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.setData({
+            User: [
+              {
+                id: 'u3',
+                name: 'Bob the builder',
+                contributionsCount: 6,
+                shoutedCount: 7,
+                commentedCount: 8,
+              },
+            ],
+          })
+        })
+
+        it('displays name of the user', () => {
+          expect(wrapper.text()).toContain('Bob the builder')
+        })
+
+        describe('load more button', () => {
+          const aPost = {
+            title: 'I am a post',
+            content: 'This is my content',
+            contentExcerpt: 'This is my content',
+          }
+
+          describe('pagination returned less posts than available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays a "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(true)
+            })
+          })
+
+          describe('pagination returned as many posts as available', () => {
+            beforeEach(() => {
+              const posts = [1, 2, 3, 4, 5, 6].map(id => {
+                return { ...aPost, id }
+              })
+
+              wrapper.setData({
+                Post: posts,
+              })
+            })
+
+            it('displays no "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(false)
+            })
+          })
+        })
+      })
+    })
+  })
 })

From 5eaac8b0779f9d008ac4384dd49fb3fd81c80495 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 11 Jun 2019 18:41:32 +0200
Subject: [PATCH 11/12]  Document loading spinner implementation with test

 Because it's slightly odd how I avoid a duplicate loading spinner, I
 thought this is a good target for a test.
---
 webapp/pages/profile/_id/_slug.spec.js | 41 ++++++++++++++++++++++++++
 webapp/pages/profile/_id/_slug.vue     |  8 ++---
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js
index ecf0d77e5..1bb0eea2e 100644
--- a/webapp/pages/profile/_id/_slug.spec.js
+++ b/webapp/pages/profile/_id/_slug.spec.js
@@ -42,6 +42,7 @@ describe('ProfileSlug', () => {
         error: jest.fn(),
       },
       $apollo: {
+        loading: false,
         mutate: jest.fn().mockResolvedValue(),
       },
     }
@@ -138,6 +139,32 @@ describe('ProfileSlug', () => {
             contentExcerpt: 'This is my content',
           }
 
+          describe('currently no posts available (e.g. after tab switching)', () => {
+            beforeEach(() => {
+              wrapper.setData({
+                Post: null,
+              })
+            })
+
+            it('displays no "load more" button', () => {
+              expect(wrapper.find('.load-more').exists()).toBe(false)
+            })
+
+            describe('apollo client in `loading` state', () => {
+              beforeEach(() => {
+                wrapper.vm.$apollo.loading = true
+              })
+
+              it('never displays more than one loading spinner', () => {
+                expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
+              })
+
+              it('displays a loading spinner below the posts list', () => {
+                expect(wrapper.find('.user-profile-posts-list .ds-spinner').exists()).toBe(true)
+              })
+            })
+          })
+
           describe('pagination returned less posts than available', () => {
             beforeEach(() => {
               const posts = [1, 2, 3, 4, 5].map(id => {
@@ -152,6 +179,20 @@ describe('ProfileSlug', () => {
             it('displays a "load more" button', () => {
               expect(wrapper.find('.load-more').exists()).toBe(true)
             })
+
+            describe('apollo client in `loading` state', () => {
+              beforeEach(() => {
+                wrapper.vm.$apollo.loading = true
+              })
+
+              it('never displays more than one loading spinner', () => {
+                expect(wrapper.findAll('.ds-spinner')).toHaveLength(1)
+              })
+
+              it('displays a loading spinner below the posts list', () => {
+                expect(wrapper.find('.load-more .ds-spinner').exists()).toBe(true)
+              })
+            })
           })
 
           describe('pagination returned as many posts as available', () => {
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 84423f1cf..60f539ac7 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -144,7 +144,7 @@
       </ds-flex-item>
 
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <ds-flex :width="{ base: '100%' }" gutter="small">
+        <ds-flex class="user-profile-posts-list" :width="{ base: '100%' }" gutter="small">
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ul class="Tabs">
@@ -220,11 +220,7 @@
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more
-          v-if="Post && hasMore"
-          :loading="$apollo.loading"
-          @click="showMoreContributions"
-        />
+        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
       </ds-flex-item>
     </ds-flex>
   </div>

From 8beba9c8b291c77c6ed94ec40173d30d0769a511 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 11 Jun 2019 22:57:53 +0200
Subject: [PATCH 12/12] Remove obsolete translations

@ogerly I saw that you added tooltips to the menu bars. However, it is
not "Your posts" that you see there, it's the posts of the user whose
profile you are looking at.

As a fix, I removed the tooltips in an earlier merge commit, because I think
they don't improve user experience here.
---
 webapp/locales/de.json | 5 -----
 webapp/locales/en.json | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index f2d1e7415..6f7bb3299 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -172,11 +172,6 @@
     }
   },
   "common": {
-    "your": {
-      "post": "Dein Beitrag ::: Deine Beiträge",
-      "comment": "Dein Kommentar ::: Deine Kommentare",
-      "shout": "Deine Empfehlung ::: Deine Empfehlungen"
-    },
     "post": "Beitrag ::: Beiträge",
     "comment": "Kommentar ::: Kommentare",
     "letsTalk": "Miteinander reden",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 093393045..8544498b7 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -172,11 +172,6 @@
     }
   },
   "common": {
-    "your": {
-      "post": "Your Post ::: Your Posts",
-      "comment": "Your Comment ::: Your Comments",
-      "shout": "Your Shout ::: Your Shouts"
-    },
     "post": "Post ::: Posts",
     "comment": "Comment ::: Comments",
     "letsTalk": "Let`s Talk",