Added linkfy lib to handle messages links

frontend/package.json

@@ -19,6 +19,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-infinite-scroll-reverse": "^1.0.3",
+    "react-linkify": "^1.0.0-alpha",
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",

frontend/src/components/LinkifyWithTargetBlank/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Linkify from "react-linkify";
+
+const componentDecorator = (href, text, key) => (
+	<a href={href} key={key} target="_blank" rel="noopener noreferrer">
+		{text}
+	</a>
+);
+
+const LinkifyWithTargetBlank = ({ children }) => {
+	return <Linkify componentDecorator={componentDecorator}>{children}</Linkify>;
+};
+
+export default LinkifyWithTargetBlank;

frontend/src/pages/Chat/components/MessagesList/MessagesList.js

@@ -29,6 +29,7 @@ import Drawer from "@material-ui/core/Drawer";
 
 import whatsBackground from "../../../../Images/wa-background.png";
 
+import LinkifyWithTargetBlank from "../../../../components/LinkifyWithTargetBlank";
 import api from "../../../../util/api";
 
 import MessagesInput from "../MessagesInput/MessagesInput";
@@ -461,32 +462,36 @@ const MessagesList = () => {
 		if (messagesList.length > 0) {
 			const viewMessagesList = messagesList.map((message, index) => {
 				if (!message.userId) {
-					return [
-						renderDailyTimestamps(message, index),
-						<div className={classes.messageLeft} key={message.id}>
-							{message.mediaUrl && checkMessaageMedia(message)}
-							<div className={classes.textContentItem}>
-								{message.body}
-								<span className={classes.timestamp}>
-									{format(parseISO(message.createdAt), "HH:mm")}
-								</span>
+					return (
+						<LinkifyWithTargetBlank key={message.id}>
+							{renderDailyTimestamps(message, index)}
+							<div className={classes.messageLeft}>
+								{message.mediaUrl && checkMessaageMedia(message)}
+								<div className={classes.textContentItem}>
+									{message.body}
+									<span className={classes.timestamp}>
+										{format(parseISO(message.createdAt), "HH:mm")}
+									</span>
+								</div>
 							</div>
-						</div>,
-					];
+						</LinkifyWithTargetBlank>
+					);
 				} else {
-					return [
-						renderDailyTimestamps(message, index),
-						<div className={classes.messageRight} key={message.id}>
-							{message.mediaUrl && checkMessaageMedia(message)}
-							<div className={classes.textContentItem}>
-								{message.body}
-								<span className={classes.timestamp}>
-									{format(parseISO(message.createdAt), "HH:mm")}
-									{renderMessageAck(message)}
-								</span>
+					return (
+						<LinkifyWithTargetBlank key={message.id}>
+							{renderDailyTimestamps(message, index)}
+							<div className={classes.messageRight}>
+								{message.mediaUrl && checkMessaageMedia(message)}
+								<div className={classes.textContentItem}>
+									{message.body}
+									<span className={classes.timestamp}>
+										{format(parseISO(message.createdAt), "HH:mm")}
+										{renderMessageAck(message)}
+									</span>
+								</div>
 							</div>
-						</div>,
-					];
+						</LinkifyWithTargetBlank>
+					);
 				}
 			});
 			return viewMessagesList;

frontend/yarn.lock

@@ -6875,6 +6875,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^2.0.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -9142,6 +9149,14 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-linkify@^1.0.0-alpha:
+  version "1.0.0-alpha"
+  resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-1.0.0-alpha.tgz#b391c7b88e3443752fafe76a95ca4434e82e70d5"
+  integrity sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg==
+  dependencies:
+    linkify-it "^2.0.3"
+    tlds "^1.199.0"
+
 react-modal-image@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-modal-image/-/react-modal-image-2.5.0.tgz#c9f047ae2a1b8ca54c35dbdad3bbca846cf21632"
@@ -10625,6 +10640,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tlds@^1.199.0:
+  version "1.207.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.207.0.tgz#459264e644cf63ddc0965fece3898913286b1afd"
+  integrity sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10783,6 +10803,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uc.micro@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"