From b32573138b7607b8d9070100fb792f0241a4ba80 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <example@example.com>
Date: Sun, 11 Feb 2018 23:12:05 +0900
Subject: [PATCH 1/5] Add who-to-follow-panel

---
 src/App.js                                    |   7 +-
 src/App.vue                                   |   1 +
 .../who_to_follow_panel.js                    | 179 ++++++++++++++++++
 .../who_to_follow_panel.vue                   |  37 ++++
 src/main.js                                   |   3 +-
 static/config.json                            |   1 +
 6 files changed, 225 insertions(+), 3 deletions(-)
 create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.js
 create mode 100644 src/components/who_to_follow_panel/who_to_follow_panel.vue

diff --git a/src/App.js b/src/App.js
index e9248967..a052e058 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 
@@ -12,8 +13,9 @@ export default {
     NavPanel,
     Notifications,
     UserFinder,
-    ChatPanel,
-    InstanceSpecificPanel
+    WhoToFollowPanel,
+    InstanceSpecificPanel,
+    ChatPanel
   },
   data: () => ({
     mobileActivePanel: 'timeline'
@@ -27,6 +29,7 @@ export default {
     style () { return { 'background-image': `url(${this.background})` } },
     sitename () { return this.$store.state.config.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
+    showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel },
     showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
   },
   methods: {
diff --git a/src/App.vue b/src/App.vue
index 2a910bc0..1d8dd6c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@
               <user-panel></user-panel>
               <nav-panel></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <who-to-follow-panel v-if="currentUser && showWhoToFollowPanel"></who-to-follow-panel>
               <chat-panel v-if="currentUser && chat"></chat-panel>
               <notifications v-if="currentUser"></notifications>
             </div>
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..49653c81
--- /dev/null
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -0,0 +1,179 @@
+const WhoToFollowPanel = {
+  data: () => ({
+    img1: '/images/avi.png',
+    link1: null,
+    name1: '',
+    img2: '/images/avi.png',
+    link2: null,
+    name2: '',
+    img3: '/images/avi.png',
+    link3: null,
+    name3: ''
+  }),
+  computed: {
+    user: function () {
+      return this.$store.state.users.currentUser.screen_name
+    },
+    moreUrl: function () {
+      var host = window.location.hostname
+      var user = this.user
+      var url = 'https://vinayaka.distsn.org/?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+      return url
+    },
+    showWhoToFollowPanel () {
+      return this.$store.state.config.showWhoToFollowPanel
+    }
+  },
+  watch: {
+    user: function (user, oldUser) {
+      function showUsers (panel, users, aHost, aUser) {
+        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 host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (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 url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + 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 (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(this)
+      }
+    }
+  },
+  mounted:
+    function () {
+      function showUsers (panel, users, aHost, aUser) {
+        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 host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (panel) {
+        var user = panel.user
+        if (user) {
+          panel.name1 = 'Loading...'
+          panel.name2 = 'Loading...'
+          panel.name3 = 'Loading...'
+          var host = window.location.hostname
+          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + 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 (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(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..fff966ab
--- /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"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
+          <img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
+          <img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><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>
diff --git a/src/main.js b/src/main.js
index 6f8c00f0..5c74da3a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,10 +88,11 @@ window.fetch('/api/statusnet/config.json')
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {theme, background, logo, showInstanceSpecificPanel} = data
+    const {theme, background, logo, showWhoToFollowPanel, showInstanceSpecificPanel} = data
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
+    store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
     store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')
diff --git a/static/config.json b/static/config.json
index 6c9c27da..23fdf8a8 100644
--- a/static/config.json
+++ b/static/config.json
@@ -4,5 +4,6 @@
   "logo": "/static/logo.png",
   "defaultPath": "/main/all",
   "chatDisabled": false,
+  "showWhoToFollowPanel": false,
   "showInstanceSpecificPanel": false
 }

From 96426425b8a20a1ff270e2b1f289528aa8e4dc8f Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 15:57:11 +0900
Subject: [PATCH 2/5] refactoring

---
 .../who_to_follow_panel.js                    | 210 ++++++------------
 1 file changed, 72 insertions(+), 138 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
index 49653c81..e3f06ab6 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,3 +1,73 @@
+function showWhoToFollow (panel, users, aHost, aUser) {
+  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 host
+    host = user.host
+    var username
+    if (user.username) {
+      username = user.username
+    } else {
+      username = user.user
+    }
+    var img
+    if (user.avatar) {
+      img = user.avatar
+    } else {
+      img = '/images/avi.png'
+    }
+    var link = 'https://' + host + '/users/' + username
+    var name = username + '@' + host
+    if ((!user.following) &&
+      (!user.blacklisted) &&
+      (!(host === aHost && username === aUser))) {
+      if (index === 0) {
+        panel.img1 = img
+        panel.link1 = link
+        panel.name1 = name
+      } else if (index === 1) {
+        panel.img2 = img
+        panel.link2 = link
+        panel.name2 = name
+      } else if (index === 2) {
+        panel.img3 = img
+        panel.link3 = link
+        panel.name3 = name
+      }
+      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 url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+      encodeURIComponent(host) + '+' + 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 (users) {
+      showWhoToFollow(panel, users, host, user)
+    })
+  }
+}
+
 const WhoToFollowPanel = {
   data: () => ({
     img1: '/images/avi.png',
@@ -27,151 +97,15 @@ const WhoToFollowPanel = {
   },
   watch: {
     user: function (user, oldUser) {
-      function showUsers (panel, users, aHost, aUser) {
-        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 host
-          host = user.host
-          var username
-          if (user.username) {
-            username = user.username
-          } else {
-            username = user.user
-          }
-          var img
-          if (user.avatar) {
-            img = user.avatar
-          } else {
-            img = '/images/avi.png'
-          }
-          var link = 'https://' + host + '/users/' + username
-          var name = username + '@' + host
-          if ((!user.following) &&
-            (!user.blacklisted) &&
-            (!(host === aHost && username === aUser))) {
-            if (index === 0) {
-              panel.img1 = img
-              panel.link1 = link
-              panel.name1 = name
-            } else if (index === 1) {
-              panel.img2 = img
-              panel.link2 = link
-              panel.name2 = name
-            } else if (index === 2) {
-              panel.img3 = img
-              panel.link3 = link
-              panel.name3 = name
-            }
-            index = index + 1
-            if (index > 2) {
-              break
-            }
-          }
-        }
-      }
-      function getUsers (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 url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
-            encodeURIComponent(host) + '+' + 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 (users) {
-            showUsers(panel, users, host, user)
-          })
-        }
-      }
       if (this.showWhoToFollowPanel) {
-        getUsers(this)
+        getWhoToFollow(this)
       }
     }
   },
   mounted:
     function () {
-      function showUsers (panel, users, aHost, aUser) {
-        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 host
-          host = user.host
-          var username
-          if (user.username) {
-            username = user.username
-          } else {
-            username = user.user
-          }
-          var img
-          if (user.avatar) {
-            img = user.avatar
-          } else {
-            img = '/images/avi.png'
-          }
-          var link = 'https://' + host + '/users/' + username
-          var name = username + '@' + host
-          if ((!user.following) &&
-            (!user.blacklisted) &&
-            (!(host === aHost && username === aUser))) {
-            if (index === 0) {
-              panel.img1 = img
-              panel.link1 = link
-              panel.name1 = name
-            } else if (index === 1) {
-              panel.img2 = img
-              panel.link2 = link
-              panel.name2 = name
-            } else if (index === 2) {
-              panel.img3 = img
-              panel.link3 = link
-              panel.name3 = name
-            }
-            index = index + 1
-            if (index > 2) {
-              break
-            }
-          }
-        }
-      }
-      function getUsers (panel) {
-        var user = panel.user
-        if (user) {
-          panel.name1 = 'Loading...'
-          panel.name2 = 'Loading...'
-          panel.name3 = 'Loading...'
-          var host = window.location.hostname
-          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
-            encodeURIComponent(host) + '+' + 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 (users) {
-            showUsers(panel, users, host, user)
-          })
-        }
-      }
       if (this.showWhoToFollowPanel) {
-        getUsers(this)
+        getWhoToFollow(this)
       }
     }
 }

From caad81800963730f9d3ef1325bf5f55dd29fde9a Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 16:56:47 +0900
Subject: [PATCH 3/5] using internal link to users

---
 .../who_to_follow_panel.js                    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

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
index e3f06ab6..2d376ef9 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -28,14 +28,35 @@ function showWhoToFollow (panel, users, aHost, aUser) {
         panel.img1 = img
         panel.link1 = link
         panel.name1 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link1 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       } else if (index === 1) {
         panel.img2 = img
         panel.link2 = link
         panel.name2 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link2 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       } else if (index === 2) {
         panel.img3 = img
         panel.link3 = link
         panel.name3 = name
+        this.$store.state.api.backendInteractor.externalProfile(name)
+          .then((externalUser) => {
+            if (!externalUser.error) {
+              this.$store.commit('addNewUsers', [externalUser])
+              panel.link3 = 'https://' + host + '/users/' + externalUser.id
+             }
+           })
       }
       index = index + 1
       if (index > 2) {

From 5a97cfb9599fb33b15f878869b940444234e3534 Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 17:45:35 +0900
Subject: [PATCH 4/5] who-to-follow-panel using internal user link

---
 .../who_to_follow_panel.js                    | 34 ++++++++-----------
 .../who_to_follow_panel.vue                   |  6 ++--
 2 files changed, 18 insertions(+), 22 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
index 2d376ef9..43cd3e2d 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -19,44 +19,40 @@ function showWhoToFollow (panel, users, aHost, aUser) {
     } else {
       img = '/images/avi.png'
     }
-    var link = 'https://' + host + '/users/' + username
     var name = username + '@' + host
     if ((!user.following) &&
       (!user.blacklisted) &&
       (!(host === aHost && username === aUser))) {
       if (index === 0) {
         panel.img1 = img
-        panel.link1 = link
         panel.name1 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link1 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link1 = '/users/' + externalUser.id
+            }
+          })
       } else if (index === 1) {
         panel.img2 = img
-        panel.link2 = link
         panel.name2 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link2 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link2 = '/users/' + externalUser.id
+            }
+          })
       } else if (index === 2) {
         panel.img3 = img
-        panel.link3 = link
         panel.name3 = name
-        this.$store.state.api.backendInteractor.externalProfile(name)
+        panel.$store.state.api.backendInteractor.externalProfile(name)
           .then((externalUser) => {
             if (!externalUser.error) {
-              this.$store.commit('addNewUsers', [externalUser])
-              panel.link3 = 'https://' + host + '/users/' + externalUser.id
-             }
-           })
+              panel.$store.commit('addNewUsers', [externalUser])
+              panel.link3 = '/users/' + externalUser.id
+            }
+          })
       }
       index = index + 1
       if (index > 2) {
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
index fff966ab..56adbf41 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
-          <img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
-          <img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><br>
+          <img v-bind:src="img1"/> <a v-bind:href="link1">{{ name1 }}</a><br>
+          <img v-bind:src="img2"/> <a v-bind:href="link2">{{ name2 }}</a><br>
+          <img v-bind:src="img3"/> <a v-bind:href="link3">{{ name3 }}</a><br>
           <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
         </p>
       </div>

From ef67bd693e9ee0cb42b4ebd0b10f68e63ba04750 Mon Sep 17 00:00:00 2001
From: hakabahitoyo <hakabahitoyo@example.com>
Date: Wed, 28 Mar 2018 18:18:36 +0900
Subject: [PATCH 5/5] using router-link in who-to-follow-panel

---
 .../who_to_follow_panel/who_to_follow_panel.js     | 14 +++++++-------
 .../who_to_follow_panel/who_to_follow_panel.vue    |  6 +++---
 2 files changed, 10 insertions(+), 10 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
index 43cd3e2d..47952d21 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -30,7 +30,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link1 = '/users/' + externalUser.id
+              panel.id1 = externalUser.id
             }
           })
       } else if (index === 1) {
@@ -40,7 +40,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link2 = '/users/' + externalUser.id
+              panel.id2 = externalUser.id
             }
           })
       } else if (index === 2) {
@@ -50,7 +50,7 @@ function showWhoToFollow (panel, users, aHost, aUser) {
           .then((externalUser) => {
             if (!externalUser.error) {
               panel.$store.commit('addNewUsers', [externalUser])
-              panel.link3 = '/users/' + externalUser.id
+              panel.id3 = externalUser.id
             }
           })
       }
@@ -88,14 +88,14 @@ function getWhoToFollow (panel) {
 const WhoToFollowPanel = {
   data: () => ({
     img1: '/images/avi.png',
-    link1: null,
     name1: '',
+    id1: 0,
     img2: '/images/avi.png',
-    link2: null,
     name2: '',
+    id2: 0,
     img3: '/images/avi.png',
-    link3: null,
-    name3: ''
+    name3: '',
+    id3: 0
   }),
   computed: {
     user: function () {
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
index 56adbf41..021b9557 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -8,9 +8,9 @@
       </div>
       <div class="panel-body who-to-follow">
         <p>
-          <img v-bind:src="img1"/> <a v-bind:href="link1">{{ name1 }}</a><br>
-          <img v-bind:src="img2"/> <a v-bind:href="link2">{{ name2 }}</a><br>
-          <img v-bind:src="img3"/> <a v-bind:href="link3">{{ name3 }}</a><br>
+          <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>