Add last 5 conversations list

Links in conversations list DO NOT really open the related conversation.
It does only open a general window with all conversations, as before.

facebookMessengerService.js

 var fbUsers = {};
 var fbThreads = {};
 
-exports.getUserInfo = function(api, userID) {
+function getUserInfo(api, userID) {
   return new Promise(function (resolve, reject) {
     if (fbUsers[userID]) return resolve(fbUsers[userID])
     api.getUserInfo(userID, function(err, ret) {
       if(err) return console.error(err);
       // Browse the ret array
       for(var prop in ret) {
-        fbUsers[prop] = ret[prop].name;
+        fbUsers[prop] = {
+          id: userID,
+          name: ret[prop].name,
+          img: ret[prop].thumbSrc
+        };
         resolve(fbUsers[prop]);
       }
     });
   });
 }
 
+exports.getUserInfo = getUserInfo;
+
 exports.getThreadInfo = function(api, threadID) {
   return new Promise(function (resolve, reject) {
     if (fbThreads[threadID]) resolve(fbThreads[threadID])
@@ -25,3 +31,42 @@ exports.getThreadInfo = function(api, threadID) {
     });
   });
 }
+
+exports.getThreadList = function(currentUserID, api, nbThreads) {
+  return new Promise(function (resolve, reject) {
+    api.getThreadList('0', nbThreads, function(err, arr) {
+      if(err) return console.error(err);
+      var userInfoPromises = [];
+      // Populate threads with no name and no image
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i].isCanonicalUser || arr[i].name === '') {
+          for (var z = 0; z < arr[i].participants.length; z++) {
+            // Don't put current user in thread's names and images
+            if (arr[i].participants[z] !== currentUserID){
+              userInfoPromises.push(getUserInfo(api, arr[i].participants[z]));
+            }
+          }
+        }
+      }
+      // Get all user infos and then update the thread list
+      Promise.all(userInfoPromises).then(function (userInfoArr) {
+        for (var i = 0; i < arr.length; i++) {
+          if (arr[i].name === '') {
+            for (var y = 0; y < userInfoArr.length; y++) {
+              if (arr[i].participants.indexOf(userInfoArr[y].id) > -1){
+                arr[i].imageSrc = userInfoArr[y].img;
+                if (arr[i].name !== '') {
+                  arr[i].name += ', ' + userInfoArr[y].name;
+                }
+                else {
+                  arr[i].name = userInfoArr[y].name;
+                }
+              }
+            }
+          }
+        }
+        resolve(arr);
+      });
+    });
+  });
+}

index.js

@@ -96,7 +96,7 @@ function startFacebook(decoded, users, socket) {
 				facebookMessengerService.getUserInfo(currentUser.fbApi, currentUser.ID).then(
 				function(data) {
 					console.log(data);
-					socket.emit('chat message', 'Logged in as ' + data);
+					socket.emit('chat message', 'Logged in as ' + data.name);
 					resolve(data);
 				});
 			});
@@ -121,7 +121,7 @@ function startFacebook(decoded, users, socket) {
 					allInfos.push(facebookMessengerService.getThreadInfo(currentUser.fbApi, message.threadID));
 					Promise.all(allInfos).then(function(data) {
 						console.log(data);
-						messageToSend = '[thread: ' + data[1] + '] ' + data[0] + ': ' +  message.body;
+						messageToSend = '[thread: ' + data[1] + '] ' + data[0].name + ': ' +  message.body;
 						socket.emit('chat message', messageToSend);
 						if (Array.isArray(chatHistory[currentUser.ID])) {
 							chatHistory[currentUser.ID].push(messageToSend);
@@ -143,6 +143,29 @@ function startFacebook(decoded, users, socket) {
 	}
 }
 
+function getFBThreadList(decoded, users, socket) {
+	var currentUser = users[decoded.email];
+
+	if (currentUser) {
+		(function() {
+			return new Promise(function (resolve, reject) {
+				currentUser.ID = currentUser.fbApi.getCurrentUserID();
+				facebookMessengerService.getThreadList(currentUser.ID, currentUser.fbApi, 5).then(
+				function(data) {
+					socket.emit('return/threadlist', data);
+					resolve(data);
+				});
+			});
+		})().catch(function(err) {
+			console.log('An error occured: ', err);
+			socket.emit('err', err);
+		});
+	}
+	else {
+		socket.emit('need auth');
+	}
+}
+
 io.on('connection', function(socket){
   socket.on('login', function(credentials){
     loginFacebookCredentials(credentials.email, credentials.password).then(
@@ -178,6 +201,19 @@ io.on('connection', function(socket){
 		});
   });
 
+  socket.on('get/conversations', function(payload){
+		jwt.verify(payload.token, app.get('superSecret'), function(err, decoded) {
+			if (err) {
+        const message = 'Failed to authenticate token.';
+        socket.emit('auth failed', message);
+        console.log('auth failed', message);
+			} else {
+        console.log('Getting last conversations..');
+				getFBThreadList(decoded, users, socket);
+			}
+		});
+  });
+
   socket.on('chat message', function(payload){
 		const token = payload.token;
 		const msg = payload.msg;

src/components/ConversationsList.vue

+<template>
+  <div>
+    <ul id="conversations">
+      <li v-for="conversation in conversations">
+        <router-link to="/conversation">
+          {{ conversation.name }}
+          <img v-bind:src="conversation.imageSrc" width="30px"/>
+          {{ conversation.snippet }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'conversations-list',
+  data() {
+    return {
+      conversations: [],
+    };
+  },
+  beforeMount: function() {
+    const payload = {
+      token: localStorage.getItem('qowala-token'),
+    };
+    this.$socket.emit('get/conversations', payload);
+  },
+  methods: {
+    sendMsg: function sendMsg() {
+			const payload = {
+				token: localStorage.getItem('qowala-token'),
+				msg: this.messageInput
+			};
+      this.$socket.emit('chat message', payload);
+      this.messageInput = '';
+    },
+    notifyMe: function notifyMe(msg) {
+      const notifMsg = 'Qowala: ' + msg;
+      // Let's check whether notification permissions have already been granted
+      if (Notification.permission === "granted") {
+        // If it's okay let's create a notification
+        var notification = new Notification(notifMsg);
+      }
+
+      // Otherwise, we need to ask the user for permission
+      else if (Notification.permission !== 'denied') {
+        Notification.requestPermission(function requestPermission (permission) {
+          // If the user accepts, let's create a notification
+          if (permission === "granted") {
+            var notification = new Notification(notifMsg);
+          }
+        });
+      }
+
+      // At last, if the user has denied notifications, and you
+      // want to be respectful there is no need to bother them any more.
+    }
+  },
+	sockets: {
+		'return/threadlist': function (threadList) {
+      console.log('received thread list: ', threadList);
+      this.conversations = threadList;
+		},
+    'need auth': function () {
+      console.log('redirecting to login');
+      this.$router.push('/login');
+    },
+	},
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
+form input { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
+form select { width: 9%; margin-right: .5%; }
+form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
+#messages { list-style-type: none; margin: 0; padding: 0; }
+#messages li { padding: 5px 10px; }
+#messages li:nth-child(odd) { background: #eee; }
+</style>

src/components/Login.vue

@@ -38,8 +38,8 @@ export default {
     'login ok': function (token) {
       this.loading = false;
 			localStorage.setItem('qowala-token', token);
-      console.log('redirecting to conversation');
-      this.$router.push('/conversation');
+      console.log('redirecting to conversations list');
+      this.$router.push('/');
     },
     'login failed': function () {
       this.loading = false;

src/main.js

@@ -7,6 +7,7 @@ import VueRouter from 'vue-router'
 
 import Login from './components/Login';
 import Conversation from './components/Conversation';
+import ConversationsList from './components/ConversationsList';
 
 Vue.use(VueRouter)
 
@@ -14,8 +15,9 @@ Vue.use(VueSocketio, '//:3000'); // Automatically socket connect from url string
 
 const routes = [
   {
-    path: '/',
-    redirect: '/conversation'
+    path: '',
+    component: ConversationsList,
+    meta: { requiresAuth: true }
   },
   {
     path: '/login',