Fix display when receiving new message

- Fix notification display
- Fix animated images display

index.js

@@ -121,6 +121,8 @@ function startFacebook(decoded, users, socket) {
 						msgToSend = {
               body: message.body,
               conversationID: message.threadID,
+              timestampDatetime: tsToTsDatetime(data.timestamp),
+              attachments: data.attachments
             }
 						socket.emit('chat message', msgToSend);
 						if (Array.isArray(chatHistory[currentUser.ID])) {
@@ -188,6 +190,21 @@ function getFBThreadHistory(decoded, users, socket, threadID) {
 	}
 }
 
+// Util function to convert timestamp to timestampDatetime
+function tsToTsDatetime (timestamp) {
+  var date = new Date(timestamp);
+  function toDoubleDigit(time) {
+    if (time < 10) {
+      return '0' + time;
+    }
+    else {
+      return time;
+    }
+  }
+  return toDoubleDigit(date.getHours()) + toDoubleDigit(date.getMinutes());
+}
+
+
 io.on('connection', function(socket){
   socket.on('login', function(credentials){
     loginFacebookCredentials(credentials.email, credentials.password).then(
@@ -261,10 +278,13 @@ io.on('connection', function(socket){
 				var currentUser = users[decoded.email];
 
 				if (currentUser) {
-          currentUser.fbApi.sendMessage(msg, threadID, function(messageInfo){
+          currentUser.fbApi.sendMessage(msg, threadID, function(err, messageInfo){
+            if (err) return console.error(err);
+
 						msgToSend = {
               body: msg,
-              conversationID: threadID
+              conversationID: threadID,
+              timestampDatetime: tsToTsDatetime(messageInfo.timestamp)
             }
             socket.emit('chat message', msgToSend);
           });

src/components/Conversation.vue

@@ -10,7 +10,7 @@
           <template v-if="attachment.type === 'sticker'">
             <img v-bind:src="attachment.url"  v-bind:width="attachment.width"/>
           </template>
-          <template v-if="attachment.type === 'photo'">
+          <template v-if="attachment.type === 'photo' || attachment.type === 'animated_image'">
             <a v-bind:href="attachment.previewUrl">
               <img v-bind:src="attachment.thumbnailUrl" v-bind:alt="attachment.name"/>
             </a>
@@ -102,7 +102,7 @@ export default {
 
 			// Send notification only if user available
 			if (this.availability === 'Available') {
-				this.notifyMe(msg);
+				this.notifyMe(msg.body);
 			}
 		},
     'need auth': function () {

src/components/ConversationsList.vue

@@ -14,7 +14,7 @@
           {{ conversation.snippet }}
           <!-- Display images in snippet if there are some -->
           <template v-for="attachment in conversation.snippetAttachments">
-            <template v-if="attachment.attach_type === 'photo'">
+            <template v-if="attachment.attach_type === 'photo' || attachment.attach_type === 'animated_image'">
               <img v-bind:src="attachment.thumbnail_url"/>
             </template>
             <template v-else>
@@ -77,6 +77,13 @@ export default {
       console.log('received thread list: ', threadList);
       this.conversations = threadList;
 		},
+		'chat message': function (msg) {
+      // Reload thread list when new message
+      const payload = {
+        token: localStorage.getItem('qowala-token'),
+      };
+      this.$socket.emit('get/conversations', payload);
+		},
     'need auth': function () {
       console.log('redirecting to login');
       this.$router.push('/login');