From ac3fbcda2f5780004ed3f878ce83bb6232225df9 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 16 Oct 2018 09:44:35 +0200
Subject: [PATCH] use new author component on more pages

---
 components/RelatedUser.vue | 23 +++++++++++
 pages/post/_slug/index.vue | 34 ++++++++--------
 pages/profile/_slug.vue    | 79 ++++++++++++++++++++++++++++++++------
 3 files changed, 108 insertions(+), 28 deletions(-)
 create mode 100644 components/RelatedUser.vue

diff --git a/components/RelatedUser.vue b/components/RelatedUser.vue
new file mode 100644
index 000000000..84a1a7832
--- /dev/null
+++ b/components/RelatedUser.vue
@@ -0,0 +1,23 @@
+<script>
+import HcAuthor from '~/components/Author.vue'
+
+let mouseEnterTimer = null
+let mouseLeaveTimer = null
+
+export default {
+  name: 'HcRelatedUser',
+  extends: HcAuthor,
+  computed: {
+    author() {
+      return this.hasAuthor
+        ? this.post
+        : {
+            name: 'Anonymus'
+          }
+    },
+    hasAuthor() {
+      return Boolean(this.post)
+    }
+  }
+}
+</script>
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index f684930ee..805dbd1fc 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -4,13 +4,7 @@
     :image="post.image"
     :header="post.title"
     class="post-card">
-    <a
-      v-router-link
-      :href="$router.resolve({ name: 'profile-slug', params: { slug: post.author.User.slug } }).href">
-      <ds-avatar
-        :image="post.author.User.avatar"
-        size="32px" /> <b class="username">{{ post.author.User.name }}</b>
-    </a>
+    <hc-author :post="post" />
     <ds-space margin-bottom="small" />
     <div
       class="content"
@@ -53,17 +47,11 @@
           :key="comment.id"
           class="comment">
           <ds-space margin-bottom="x-small">
-            <a
-              v-router-link
-              :href="$router.resolve({ name: 'profile-slug', params: { slug: comment.author.User.slug } }).href">
-              <ds-avatar
-                :image="comment.author.User.avatar"
-                size="24px" /> <b class="username">{{ comment.author.User.name }}</b>
-            </a>
+            <hc-author :post="comment" />
           </ds-space>
           <div
             style="padding-left: 32px;"
-            v-html="comment.content" />
+            v-html="comment.contentExcerpt" />
         </div>
         <ds-space margin-bottom="small" />
       </div>
@@ -76,12 +64,16 @@
 
 <script>
 import gql from 'graphql-tag'
+import HcAuthor from '~/components/Author.vue'
 
 export default {
   transition: {
     name: 'slide-up',
     mode: 'out-in'
   },
+  components: {
+    HcAuthor
+  },
 
   data() {
     return {
@@ -105,9 +97,14 @@ export default {
             image
             author {
               User {
+                id
                 slug
                 name
                 avatar
+                shoutedCount
+                contributionsCount
+                commentsCount
+                followedByCount
               }
             }
             tags {
@@ -116,12 +113,17 @@ export default {
             commentsCount
             comments(orderBy: _id_desc) {
               id
-              content
+              contentExcerpt
               author {
                 User {
+                  id
                   slug
                   name
                   avatar
+                  shoutedCount
+                  contributionsCount
+                  commentsCount
+                  followedByCount
                 }
               }
             }
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 4ddd7d649..1c2832321 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -13,6 +13,7 @@
           <ds-card style="position: relative; height: auto;">
             <ds-avatar
               :image="user.avatar"
+              :name="user.name || 'Anonymus'"
               class="profile-avatar"
               size="120px" />
             <h3 style="text-align: center;">{{ user.name }}</h3>
@@ -41,22 +42,16 @@
           <ds-space/>
           <h2 style="text-align: center; margin-bottom: 10px;">Netzwerk</h2>
           <ds-card style="position: relative; height: auto;">
-            <template v-if="user.friends.length">
+            <template v-if="user.following.length">
               <ds-space
-                v-for="friend in user.friends"
-                :key="friend.id"
+                v-for="follow in user.following"
+                :key="follow.id"
                 margin="x-small">
-                <a
-                  v-router-link
-                  :href="$router.resolve({ name: 'profile-slug', params: { slug: friend.slug } }).href">
-                  <ds-avatar
-                    :image="friend.avatar"
-                    size="32px" /> <b class="username">{{ friend.name }}</b>
-                </a>
+                <hc-related-user :post="follow" />
               </ds-space>
             </template>
             <template v-else>
-              <p style="text-align: center; opacity: .5;">NO FRIENDS</p>
+              <p style="text-align: center; opacity: .5;">folgt niemandem</p>
             </template>
           </ds-card>
         </ds-flex-item>
@@ -64,11 +59,49 @@
           <ds-flex
             :width="{ base: '100%' }"
             gutter="small">
+            <ds-flex-item>
+              <ds-card class="ds-tab-nav">
+                <ds-flex>
+                  <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
+                    <ds-space margin="small">
+                      <ds-text
+                        size="x-large"
+                        style="margin-bottom: 0; text-align: center">{{ user.contributionsCount }}</ds-text>
+                      <ds-text
+                        size="small"
+                        style="text-align: center">Beiträge</ds-text>
+                    </ds-space>
+                  </ds-flex-item>
+                  <ds-flex-item class="ds-tab-nav-item">
+                    <ds-space margin="small">
+                      <ds-text
+                        size="x-large"
+                        style="margin-bottom: 0; text-align: center">{{ user.commentsCount }}</ds-text>
+                      <ds-text
+                        size="small"
+                        style="text-align: center">Kommentiert</ds-text>
+                    </ds-space>
+                  </ds-flex-item>
+                  <ds-flex-item class="ds-tab-nav-item">
+                    <ds-space margin="small">
+                      <ds-text
+                        size="x-large"
+                        style="margin-bottom: 0; text-align: center">{{ user.shoutedCount }}</ds-text>
+                      <ds-text
+                        size="small"
+                        style="text-align: center">Empfohlen</ds-text>
+                    </ds-space>
+                  </ds-flex-item>
+                </ds-flex>
+              </ds-card>
+            </ds-flex-item>
             <ds-flex-item
               v-for="{ Post } in user.contributions"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
               :key="Post.id">
-              <hc-post-card :post="Post" />
+              <hc-post-card
+                :post="Post"
+                :show-author-popover="false" />
             </ds-flex-item>
           </ds-flex>
         </ds-flex-item>
@@ -79,11 +112,13 @@
 </template>
 
 <script>
+import HcRelatedUser from '~/components/RelatedUser.vue'
 import HcPostCard from '~/components/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 
 export default {
   components: {
+    HcRelatedUser,
     HcPostCard,
     HcFollowButton
   },
@@ -122,10 +157,30 @@ export default {
 </script>
 
 <style lang="scss">
+@import 'vue-cion-design-system/src/system/tokens/generated/tokens.scss';
+
 .profile-avatar {
   display: block;
   margin: auto;
   margin-top: -60px;
   border: #fff 5px solid;
 }
+
+.ds-tab-nav {
+  .ds-card-content {
+    padding: 0 !important;
+
+    .ds-tab-nav-item {
+      &.ds-tab-nav-item-active {
+        border-bottom: 3px solid #17b53f;
+        &:first-child {
+          border-bottom-left-radius: $border-radius-large;
+        }
+        &:last-child {
+          border-bottom-right-radius: $border-radius-large;
+        }
+      }
+    }
+  }
+}
 </style>