From 76a769f91bd2b5a5816f868e739b338087d6553b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 23 Oct 2018 12:49:59 +0200
Subject: [PATCH] using badges

---
 components/Badges.vue          |  81 ++++++++++++++++++++
 components/PostCard.vue        |  11 ++-
 pages/index.vue                |   5 ++
 pages/post/_slug/index.vue     |  10 +++
 pages/post/_slug/more-info.vue |   5 ++
 pages/profile/_slug.vue        | 133 +++++++++++++++++++++++----------
 6 files changed, 201 insertions(+), 44 deletions(-)
 create mode 100644 components/Badges.vue

diff --git a/components/Badges.vue b/components/Badges.vue
new file mode 100644
index 000000000..203569230
--- /dev/null
+++ b/components/Badges.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="[
+      `hc-bades-size-${size}`,
+      (badges.length > 1 )? `hc-bades-multiple` : ''
+    ]"
+    class="hc-badges">
+    <img
+      v-for="badge in badges"
+      :key="badge.key"
+      :src="badge.icon"
+      class="hc-badge" >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    badges: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator: value => {
+        return value.match(/(small|large)/)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.hc-badges {
+  text-align: center;
+
+  .hc-badge {
+    display: inline-block;
+  }
+
+  &.hc-bades-size-small {
+    $size: 28px;
+    $offset: $size * -0.2;
+    padding-bottom: $size / 2;
+
+    &.hc-bades-multiple {
+      margin-top: -$size / 2;
+    }
+    .hc-badge {
+      height: $size;
+      &:nth-child(2),
+      &:nth-child(4),
+      &:nth-child(6) {
+        margin-top: $size;
+        margin-left: $offset;
+        margin-right: $offset;
+      }
+    }
+  }
+  &.hc-bades-size-large {
+    $size: 36px;
+    $offset: $size * -0.2;
+    padding-bottom: $size / 2;
+
+    &.hc-bades-multiple {
+      margin-top: -$size / 2;
+    }
+    .hc-badge {
+      height: $size;
+      &:nth-child(2),
+      &:nth-child(4),
+      &:nth-child(6) {
+        margin-top: $size;
+        margin-left: $offset;
+        margin-right: $offset;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 84ff4d0c2..723ab402f 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -12,10 +12,13 @@
       <ds-space
         margin="small"
         style="position: absolute; bottom: 44px;">
-        <hc-author
-          :post="post"
-          :trunc="35"
-          :show-author-popover="showAuthorPopover" />
+        <!-- TODO: find better solution for rendering errors -->
+        <no-ssr>
+          <hc-author
+            :post="post"
+            :trunc="35"
+            :show-author-popover="showAuthorPopover" />
+        </no-ssr>
       </ds-space>
       <template slot="footer">
         <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
diff --git a/pages/index.vue b/pages/index.vue
index 4103b8553..f6fdc4d7a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -58,6 +58,11 @@ export default {
                 shoutedCount
                 commentsCount
                 followedByCount
+                badges {
+                  id
+                  key
+                  icon
+                }
               }
             }
             commentsCount
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 617e40d62..9ffc04bb1 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -122,6 +122,11 @@ export default {
                 contributionsCount
                 commentsCount
                 followedByCount
+                badges {
+                  id
+                  key
+                  icon
+                }
               }
             }
             tags {
@@ -142,6 +147,11 @@ export default {
                   contributionsCount
                   commentsCount
                   followedByCount
+                  badges {
+                    id
+                    key
+                    icon
+                  }
                 }
               }
             }
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index 8582845d0..6c704a245 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -87,6 +87,11 @@ export default {
                   contributionsCount
                   followedByCount
                   commentsCount
+                  badges {
+                    id
+                    key
+                    icon
+                  }
                 }
               }
             }
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 54eccbc7a..bc9880087 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -16,19 +16,28 @@
             class="profile-avatar"
             size="120px" />
           <h3 style="text-align: center;">{{ user.name }}</h3>
-          <ds-space/>
+          <hc-badges
+            v-if="user.badges && user.badges.length"
+            :badges="user.badges"
+            style="margin-top: -5px" />
           <ds-flex>
-            <ds-flex-item style="text-align: center;">
-              <ds-text
-                size="x-large"
-                style="margin-bottom: 0;">{{ fanCount }}</ds-text>
-              <ds-text size="small">Fans</ds-text>
+            <ds-flex-item>
+              <no-ssr>
+                <ds-number label="Fans">
+                  <hc-count-to
+                    slot="count"
+                    :end-val="fanCount" />
+                </ds-number>
+              </no-ssr>
             </ds-flex-item>
-            <ds-flex-item style="text-align: center;">
-              <ds-text
-                size="x-large"
-                style="margin-bottom: 0;">{{ user.friendsCount }}</ds-text>
-              <ds-text size="small">Freunde</ds-text>
+            <ds-flex-item>
+              <no-ssr>
+                <ds-number label="Freunde">
+                  <hc-count-to
+                    slot="count"
+                    :end-val="user.friendsCount" />
+                </ds-number>
+              </no-ssr>
             </ds-flex-item>
           </ds-flex>
           <ds-space
@@ -40,7 +49,12 @@
           </ds-space>
         </ds-card>
         <ds-space/>
-        <h2 style="text-align: center; margin-bottom: 10px;">Netzwerk</h2>
+        <ds-heading
+          tag="h3"
+          soft
+          style="text-align: center; margin-bottom: 10px;">
+          Netzwerk
+        </ds-heading>
         <ds-card style="position: relative; height: auto;">
           <ds-space
             v-if="user.following && user.following.length"
@@ -56,9 +70,19 @@
               v-for="follow in user.following"
               :key="follow.id"
               margin="x-small">
-              <hc-related-user
-                :post="follow"
-                :trunc="15" />
+              <!-- TODO: find better solution for rendering errors -->
+              <no-ssr>
+                <hc-related-user
+                  :post="follow"
+                  :trunc="15" />
+              </no-ssr>
+            </ds-space>
+            <ds-space
+              v-if="user.followingCount - user.following.length"
+              margin="small">
+              <ds-text
+                size="small"
+                color="softer">und {{ user.followingCount - user.following.length }} weitere</ds-text>
             </ds-space>
           </template>
           <template v-else>
@@ -81,9 +105,19 @@
               v-for="follow in user.followedBy"
               :key="follow.id"
               margin="x-small">
-              <hc-related-user
-                :post="follow"
-                :trunc="15" />
+              <!-- TODO: find better solution for rendering errors -->
+              <no-ssr>
+                <hc-related-user
+                  :post="follow"
+                  :trunc="15" />
+              </no-ssr>
+            </ds-space>
+            <ds-space
+              v-if="user.followedByCount - user.followedBy.length"
+              margin="small">
+              <ds-text
+                size="small"
+                color="softer">und {{ user.followedByCount - user.followedBy.length }} weitere</ds-text>
             </ds-space>
           </template>
           <template v-else>
@@ -100,46 +134,61 @@
               <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>
+                    <!-- TODO: find better solution for rendering errors -->
+                    <no-ssr>
+                      <ds-number label="Beiträge">
+                        <hc-count-to
+                          slot="count"
+                          :end-val="user.contributionsCount" />
+                      </ds-number>
+                    </no-ssr>
                   </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>
+                    <!-- TODO: find better solution for rendering errors -->
+                    <no-ssr>
+                      <ds-number label="Kommentiert">
+                        <hc-count-to
+                          slot="count"
+                          :end-val="user.commentsCount" />
+                      </ds-number>
+                    </no-ssr>
                   </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>
+                    <!-- TODO: find better solution for rendering errors -->
+                    <no-ssr>
+                      <ds-number label="Empfohlen">
+                        <hc-count-to
+                          slot="count"
+                          :end-val="user.shoutedCount" />
+                      </ds-number>
+                    </no-ssr>
                   </ds-space>
                 </ds-flex-item>
               </ds-flex>
             </ds-card>
           </ds-flex-item>
           <ds-flex-item
-            v-for="{ Post } in user.contributions"
+            v-for="post in user.contributions"
             :width="{ base: '100%', md: '100%', xl: '50%' }"
-            :key="Post.id">
+            :key="post.id">
             <hc-post-card
-              :post="Post"
+              :post="post"
               :show-author-popover="false" />
           </ds-flex-item>
         </ds-flex>
+        <ds-space
+          margin-top="large"
+          style="text-align: center">
+          <ds-button
+            icon="arrow-down"
+            ghost>
+            mehr laden
+          </ds-button>
+        </ds-space>
       </ds-flex-item>
     </ds-flex>
   </div>
@@ -149,12 +198,16 @@
 import HcRelatedUser from '~/components/RelatedUser.vue'
 import HcPostCard from '~/components/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
+import HcCountTo from '~/components/CountTo.vue'
+import HcBadges from '~/components/Badges.vue'
 
 export default {
   components: {
     HcRelatedUser,
     HcPostCard,
-    HcFollowButton
+    HcFollowButton,
+    HcCountTo,
+    HcBadges
   },
   transition: {
     name: 'slide-up',