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;
   }

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,8 +1,10 @@
 .message-icon {
-  position: absolute;
-  bottom: 0rem;
-  color: seagreen;
-  border: black;
+  //position: absolute;
+  // bottom: 0rem;
+  color: whitesmoke;
+  border: #000000;
+  margin-left: 0.2rem;
+  margin-right: 0rem;
   // z-index: 5;
 }
 
@@ -12,7 +14,7 @@
   //border: solid 1px #eee;
   display: flex;
   flex-direction: column;
-  //padding: 10px;
+  margin: 0.8rem 0rem;
 }
 
 .messages {
@@ -26,7 +28,13 @@
   padding: 0.25rem 0.8rem;
   //margin-top: 5px;
   // margin-bottom: 5px;
-  display: inline-block;
+  //display: inline-block;
+
+  .message-img {
+    max-width: 33%;
+    object-fit: contain;
+  }
+
 }
 
 .yours {
@@ -34,10 +42,11 @@
 }
 .msgmargin {
   margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
 }
 
 .yours .message {
-  margin-right: 25%;
+  margin-right: 20%;
   background-color: #eee;
   position: relative;
 }