display image previews

app/components/ChatBox.js

@@ -41,6 +41,19 @@ function getYoutubeId(url) {
   return ID;
 }
 
+function isImage(text) {
+  return text.indexOf("http") >= 0 && (text.indexOf('.jpg') || text.indexOf('.gif'));
+}
+
+// TODO: this needs to be reviewed. best to return as a css background-image instead
+function displayImage(text) {
+
+  let reg = new RegExp(/\b(https?:\/\/\S+(?:png|jpe?g|gif)\S*)\b/);
+  let imageUrl = reg.exec(text);
+  if (!imageUrl) return (<span></span>);
+  return (<img src={imageUrl[0]} style={{maxWidth: '90%'}} />)
+}
+
 // TODO use regex for code parsing / detection. Add new line detection for shift+enter
 const MessageRender = ({ message }) => {
   const emojis = [];
@@ -115,6 +128,7 @@ class ChatBox extends PureComponent {
         </ListItem>
         }
         {!!imgUrl && <img src={imgUrl} alt='ipfs'/>}
+        {isImage(message) && displayImage(message)}
       </Fragment>
     );
   };