Added MMS support for messaging. IO-538

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,4 +1,6 @@
 import Icon from "@ant-design/icons";
+import i18n from "i18next";
+import moment from "moment";
 import React, { useEffect, useRef } from "react";
 import { MdDone, MdDoneAll } from "react-icons/md";
 import {
@@ -8,8 +10,6 @@ import {
   List,
 } from "react-virtualized";
 import "./chat-message-list.styles.scss";
-import i18n from "i18next";
-import moment from "moment";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
@@ -46,6 +46,16 @@ export default function ChatMessageListComponent({ messages }) {
               {MessageRender(messages[index])}
               {StatusRender(messages[index].status)}
             </div>
+            {messages[index].isoutbound && (
+              <div style={{ fontSize: 10 }}>
+                {i18n.t("messaging.labels.sentby", {
+                  by: messages[index].userid,
+                  time: moment(messages[index].created_at).format(
+                    "MM/DD/YYYY @ hh:mm a"
+                  ),
+                })}
+              </div>
+            )}
           </div>
         )}
       </CellMeasurer>
@@ -74,27 +84,19 @@ export default function ChatMessageListComponent({ messages }) {
 }
 
 const MessageRender = (message) => {
-  if (message.image) {
-    return (
-      <a href={message.image_path} target="__blank">
-        <img alt="Received" className="message-img" src={message.image_path} />
-      </a>
-    );
-  } else {
-    return (
-      <div>
-        <div>{message.text}</div>
-        {message.isoutbound && (
-          <div style={{ color: "slategray", fontSize: 10 }}>
-            {i18n.t("messaging.labels.sentby", {
-              by: message.userid,
-              time: moment(message.created_at).format("MM/DD/YYYY @ hh:mm a"),
-            })}
+  return (
+    <div>
+      {message.image_path &&
+        message.image_path.map((i, idx) => (
+          <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
+            <a href={i} target="__blank">
+              <img alt="Received" className="message-img" src={i} />
+            </a>
           </div>
-        )}
-      </div>
-    );
-  }
+        ))}
+      <div>{message.text}</div>
+    </div>
+  );
 };
 
 const StatusRender = (status) => {