Fix issue where message would be delayed posting when waiting for open graph data

Author: C-Garza

server/sockets/peerSocket.js

@@ -1,7 +1,14 @@
 const socketio = require("socket.io");
 const {addUser, setUserHost, changeUserName, changeWebcamStatus, removeUser, getUsersInRoom} = require("../utils/users");
 const {addRoom, updateRoom, getRoom, removeRoom} = require("../utils/rooms");
-const {addMessageRoom, addMessage, getRoomMessages, removeMessageRoom} = require("../utils/messages");
+const {
+  addMessageRoom, 
+  addMessage, 
+  updateMessageOG,
+  messageHasLink,
+  getRoomMessages, 
+  removeMessageRoom
+} = require("../utils/messages");
 
 const peerSocketConnection = (server) => {
   const io = socketio(server, {
@@ -86,8 +93,13 @@ const peerSocketConnection = (server) => {
       });
 
       socket.on("send-message", async (message) => {
-        const newMessage = await addMessage(roomID, message);
+        const newMessage = addMessage(roomID, message);
         io.to(roomID).emit("message-received", newMessage);
+        const linksArray = messageHasLink(roomID, newMessage);
+        if(linksArray) {
+          const updatedMessage = await updateMessageOG(roomID, newMessage, linksArray);
+          io.to(roomID).emit("updated-message", updatedMessage);
+        }
       });
 
       socket.on("get-older-messages", offset => {

server/utils/messages.js

@@ -15,30 +15,31 @@ const addMessageRoom = (id) => {
 };
 
 const addMessage = (id, message) => {
-  let messageArr = message.message.replace(/\n/g, " ").split(" ");
-  let linksArray = messageArr.filter(msg => isURL(msg, {require_protocol: true}));
-
-  if(!linksArray.length) {
-    message.id = uuidV4() + message.createdAt;
-    messages[id].messages.push(message);
-    return message;
-  }
+  message.id = uuidV4() + message.createdAt;
+  messages[id].messages.push(message);
+  return message;
+};
 
+const updateMessageOG = (id, message, linksArray) => {
   const options = {url: linksArray[0]};
+
   return ogs(options).then(data => {
     const {error, result} = data;
-    message.id = uuidV4() + message.createdAt;
-    messages[id].messages.push(message);
     message.ogMeta = {...result};
     return message;
   }).catch(err => {
     console.log(err);
-    message.id = uuidV4() + message.createdAt;
-    messages[id].messages.push(message);
     return message;
   });
 };
 
+const messageHasLink = (id, message) => {
+  let messageArr = message.message.replace(/\n/g, " ").split(" ");
+  let linksArray = messageArr.filter(msg => isURL(msg, {require_protocol: true}));
+  if(!linksArray.length) return false;
+  return linksArray;
+};
+
 const getRoomMessages = (id) => {
   if(!messages[id]) return [];
   return messages[id].messages;
@@ -53,6 +54,8 @@ const removeMessageRoom = (id) => {
 module.exports = {
   addMessageRoom,
   addMessage,
+  updateMessageOG,
+  messageHasLink,
   getRoomMessages,
   removeMessageRoom
 };

streams-react/src/components/ChatHeader/ChatHeader.module.css

@@ -4,6 +4,8 @@
   justify-content: center;
   align-items: center;
   border-bottom: 2px solid #212121;
+  padding: 5px;
+  padding-bottom: 10px;
   width: 100%;
   flex: none;
   background-color: #5C9EAD;
@@ -16,15 +18,12 @@
   -webkit-box-orient: vertical;
   max-height: 100px;
   width: 100%;
-  margin-top: 15px;
+  margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 5px;
-  padding-right: 5px;
   text-decoration: underline;
   overflow: hidden;
   text-align: center;
 }
 .chat__online {
   align-self: flex-start;
-  padding: 5px;
 }

streams-react/src/context/ChatContext.js

@@ -35,6 +35,7 @@ const ChatContextProvider = ({children}) => {
       }
       socket.on("joined-room", handleJoinedRoom);
       socket.on("message-received", handleMessageReceived);
+      socket.on("updated-message", handleUpdatedMessage);
       socket.on("older-messages-received", handleOlderMessagesReceived);
       socket.on("messages-list", handleMessagesList);
       socket.on("all-older-messages-received", handleAllOlderMessagesReceived);
@@ -44,6 +45,7 @@ const ChatContextProvider = ({children}) => {
       if(socket) {
         socket.removeListener("joined-room", handleJoinedRoom);
         socket.removeListener("message-received", handleMessageReceived);
+        socket.removeListener("updated-message", handleUpdatedMessage);
         socket.removeListener("older-messages-received", handleOlderMessagesReceived);
         socket.removeListener("messages-list", handleMessagesList);
         socket.removeListener("all-older-messages-received", handleAllOlderMessagesReceived);
@@ -61,6 +63,13 @@ const ChatContextProvider = ({children}) => {
     setMessageList(messages => [...messages, message]);
   };
 
+  const handleUpdatedMessage = (message) => {
+    setMessageList(msgs => msgs.map(msg => {
+      if(msg.id === message.id) return message;
+      return msg;
+    }));
+  };
+
   const handleOlderMessagesReceived = (messages) => {
     setMessageList(msgs => [...messages]);
     setIsAtTop(false);