2 files changed, 26 insertions, 38 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 51b9f469..ce60308f 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,18 +1,21 @@
-function showWhoToFollow (panel, reply, aHost, aUser) {
-  var users = reply.ids
+import apiService from '../../services/api/api.service.js'
+
+function showWhoToFollow (panel, reply) {
+  var users = reply
   var cn
-  var index = 0
-  var random = Math.floor(Math.random() * 10)
-  for (cn = random; cn < users.length; cn = cn + 10) {
+  var index
+  var step = 7
+  cn = Math.floor(Math.random() * step)
+  for (index = 0; index < 3; index++) {
     var user
     user = users[cn]
     var img
-    if (user.icon) {
-      img = user.icon
+    if (user.avatar) {
+      img = user.avatar
     } else {
       img = '/images/avi.png'
     }
-    var name = user.to_id
+    var name = user.acct
     if (index === 0) {
       panel.img1 = img
       panel.name1 = name
@@ -44,35 +47,20 @@ function showWhoToFollow (panel, reply, aHost, aUser) {
           }
         })
     }
-    index = index + 1
-    if (index > 2) {
-      break
-    }
   }
+  cn = (cn + step) % users.length
 }
 
 function getWhoToFollow (panel) {
-  var user = panel.$store.state.users.currentUser.screen_name
-  if (user) {
+  var credentials = panel.$store.state.users.currentUser.credentials
+  if (credentials) {
     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)
-    })
+    apiService.suggestions({credentials: credentials})
+      .then((reply) => {
+        showWhoToFollow(panel, reply)
+      })
   }
 }
 
@@ -95,26 +83,26 @@ const WhoToFollowPanel = {
     moreUrl: function () {
       var host = window.location.hostname
       var user = this.user
-      var whoToFollowLink = this.$store.state.config.whoToFollowLink
+      var suggestionsWeb = this.$store.state.config.suggestionsWeb
       var url
-      url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
+      url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
       url = url.replace(/{{user}}/g, encodeURIComponent(user))
       return url
     },
-    showWhoToFollowPanel () {
-      return this.$store.state.config.showWhoToFollowPanel
+    suggestionsEnabled () {
+      return this.$store.state.config.suggestionsEnabled
     }
   },
   watch: {
     user: function (user, oldUser) {
-      if (this.showWhoToFollowPanel) {
+      if (this.suggestionsEnabled) {
         getWhoToFollow(this)
       }
     }
   },
   mounted:
     function () {
-      if (this.showWhoToFollowPanel) {
+      if (this.suggestionsEnabled) {
         getWhoToFollow(this)
       }
     }
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 5af6d0d5..8b3abe70 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
@@ -3,7 +3,7 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          Who to follow
+          {{$t('who_to_follow.who_to_follow')}}
         </div>
       </div>
       <div class="panel-body who-to-follow">
@@ -11,7 +11,7 @@
           <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>
+          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>
     </div>