From efafc0045af8319cb5085399dd6aac9deee9e451 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 16 Oct 2018 14:41:54 +0200
Subject: [PATCH] showing who is following

---
 graphql/UserProfileQuery.js |  9 +++++++++
 pages/profile/_slug.vue     | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index a490fe2de..a3d14a377 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -27,6 +27,15 @@ export default gql(`
         commentsCount
       }
       followedByCount
+      followedBy {
+        id
+        name
+        slug
+        avatar
+        followedByCount
+        contributionsCount
+        commentsCount
+      }
       contributionsCount
       contributions {
         Post {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 07182ec86..f51869396 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -42,7 +42,13 @@
           <ds-space/>
           <h2 style="text-align: center; margin-bottom: 10px;">Netzwerk</h2>
           <ds-card style="position: relative; height: auto;">
-            <p>Folgt:</p>
+            <ds-space margin="x-small">
+              <ds-text
+                tag="h5"
+                color="soft">
+                Wem folgt {{ user.name | truncate(15) }}?
+              </ds-text>
+            </ds-space>
             <template v-if="user.following.length">
               <ds-space
                 v-for="follow in user.following"
@@ -54,7 +60,30 @@
               </ds-space>
             </template>
             <template v-else>
-              <p style="text-align: center; opacity: .5;">folgt niemandem</p>
+              <p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
+            </template>
+          </ds-card>
+          <ds-space/>
+          <ds-card style="position: relative; height: auto;">
+            <ds-space margin="x-small">
+              <ds-text
+                tag="h5"
+                color="soft">
+                Wer folgt {{ user.name | truncate(15) }}?
+              </ds-text>
+            </ds-space>
+            <template v-if="user.followedBy.length">
+              <ds-space
+                v-for="follow in user.followedBy"
+                :key="follow.id"
+                margin="x-small">
+                <hc-related-user
+                  :post="follow"
+                  :trunc="15" />
+              </ds-space>
+            </template>
+            <template v-else>
+              <p style="text-align: center; opacity: .5;">niemandem folgt {{ user.name }}</p>
             </template>
           </ds-card>
         </ds-flex-item>