Added image handling for messaging BOD-187

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

@@ -8,21 +8,21 @@ import {
   List,
 } from "react-virtualized";
 import "./chat-message-list.styles.scss";
+import { urlencoded } from "body-parser";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
 
   const _cache = new CellMeasurerCache({
     fixedWidth: true,
-    minHeight: 25,
-    defaultHeight: 50,
+    // minHeight: 50,
+    defaultHeight: 100,
   });
 
-  const scrollToBottom = () => {
-    console.log("Scrolling to", messages.length);
-    !!virtualizedListRef.current &&
-      virtualizedListRef.current.scrollToRow(messages.length - 1);
-
+  const scrollToBottom = (renderedrows) => {
+    //console.log("Scrolling to", messages.length);
+    // !!virtualizedListRef.current &&
+    //   virtualizedListRef.current.scrollToRow(messages.length);
     //TODO Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
     //Scrolling does not work on this version of React.
   };
@@ -39,12 +39,11 @@ export default function ChatMessageListComponent({ messages }) {
             style={style}
             className={`${
               messages[index].isoutbound ? "mine messages" : "yours messages"
-            }`}
-          >
-            <div className="message msgmargin">
-              <span>{messages[index].text}</span>
+            }`}>
+            <div className='message msgmargin'>
+              {MessageRender(messages[index])}
+              {StatusRender(messages[index].status)}
             </div>
-            {StatusRender(messages[index].status)}
           </div>
         )}
       </CellMeasurer>
@@ -52,7 +51,7 @@ export default function ChatMessageListComponent({ messages }) {
   };
 
   return (
-    <div className="chat">
+    <div className='chat'>
       <AutoSizer>
         {({ height, width }) => (
           <List
@@ -62,6 +61,9 @@ export default function ChatMessageListComponent({ messages }) {
             rowHeight={_cache.rowHeight}
             rowRenderer={_rowRenderer}
             rowCount={messages.length}
+            overscanRowCount={10}
+            estimatedRowSize={150}
+            scrollToIndex={messages.length}
           />
         )}
       </AutoSizer>
@@ -69,12 +71,24 @@ export default function ChatMessageListComponent({ messages }) {
   );
 }
 
+const MessageRender = (message) => {
+  if (message.image) {
+    return (
+      <a href={message.image_path} target='__blank'>
+        <img className='message-img' src={message.image_path} />
+      </a>
+    );
+  } else {
+    return <span>{message.text}</span>;
+  }
+};
+
 const StatusRender = (status) => {
   switch (status) {
     case "sent":
-      return <Icon component={FaCheck} className="message-icon" />;
+      return <Icon component={FaCheck} className='message-icon' />;
     case "delivered":
-      return <Icon component={FaCheckDouble} className="message-icon" />;
+      return <Icon component={FaCheckDouble} className='message-icon' />;
     default:
       return null;
   }