2 files changed, 160 insertions, 0 deletions
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
new file mode 100644
index 00000000..51b9f469
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -0,0 +1,123 @@
+function showWhoToFollow (panel, reply, aHost, aUser) {
+  var users = reply.ids
+  var cn
+  var index = 0
+  var random = Math.floor(Math.random() * 10)
+  for (cn = random; cn < users.length; cn = cn + 10) {
+    var user
+    user = users[cn]
+    var img
+    if (user.icon) {
+      img = user.icon
+    } else {
+      img = '/images/avi.png'
+    }
+    var name = user.to_id
+    if (index === 0) {
+      panel.img1 = img
+      panel.name1 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id1 = externalUser.id
+          }
+        })
+    } else if (index === 1) {
+      panel.img2 = img
+      panel.name2 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id2 = externalUser.id
+          }
+        })
+    } else if (index === 2) {
+      panel.img3 = img
+      panel.name3 = name
+      panel.$store.state.api.backendInteractor.externalProfile(name)
+        .then((externalUser) => {
+          if (!externalUser.error) {
+            panel.$store.commit('addNewUsers', [externalUser])
+            panel.id3 = externalUser.id
+          }
+        })
+    }
+    index = index + 1
+    if (index > 2) {
+      break
+    }
+  }
+}
+
+function getWhoToFollow (panel) {
+  var user = panel.$store.state.users.currentUser.screen_name
+  if (user) {
+    panel.name1 = 'Loading...'
+    panel.name2 = 'Loading...'
+    panel.name3 = 'Loading...'
+    var host = window.location.hostname
+    var whoToFollowProvider = panel.$store.state.config.whoToFollowProvider
+    var url
+    url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
+    url = url.replace(/{{user}}/g, encodeURIComponent(user))
+    window.fetch(url, {mode: 'cors'}).then(function (response) {
+      if (response.ok) {
+        return response.json()
+      } else {
+        panel.name1 = ''
+        panel.name2 = ''
+        panel.name3 = ''
+      }
+    }).then(function (reply) {
+      showWhoToFollow(panel, reply, host, user)
+    })
+  }
+}
+
+const WhoToFollowPanel = {
+  data: () => ({
+    img1: '/images/avi.png',
+    name1: '',
+    id1: 0,
+    img2: '/images/avi.png',
+    name2: '',
+    id2: 0,
+    img3: '/images/avi.png',
+    name3: '',
+    id3: 0
+  }),
+  computed: {
+    user: function () {
+      return this.$store.state.users.currentUser.screen_name
+    },
+    moreUrl: function () {
+      var host = window.location.hostname
+      var user = this.user
+      var whoToFollowLink = this.$store.state.config.whoToFollowLink
+      var url
+      url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
+      url = url.replace(/{{user}}/g, encodeURIComponent(user))
+      return url
+    },
+    showWhoToFollowPanel () {
+      return this.$store.state.config.showWhoToFollowPanel
+    }
+  },
+  watch: {
+    user: function (user, oldUser) {
+      if (this.showWhoToFollowPanel) {
+        getWhoToFollow(this)
+      }
+    }
+  },
+  mounted:
+    function () {
+      if (this.showWhoToFollowPanel) {
+        getWhoToFollow(this)
+      }
+    }
+}
+
+export default WhoToFollowPanel
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
new file mode 100644
index 00000000..5af6d0d5
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="who-to-follow-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          Who to follow
+        </div>
+      </div>
+      <div class="panel-body who-to-follow">
+        <p>
+          <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
+          <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
+          <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
+          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./who_to_follow_panel.js" ></script>
+
+<style lang="scss">
+  .who-to-follow * {
+    vertical-align: middle;
+  }
+  .who-to-follow img {
+    width: 32px;
+    height: 32px;
+  }
+  .who-to-follow p {
+    line-height: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>