diff --git a/frontend/package.json b/frontend/package.json
index c9e0c07..0693e36 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/LinkifyWithTargetBlank/index.js b/frontend/src/components/LinkifyWithTargetBlank/index.js
new file mode 100644
index 0000000..4d5a352
--- /dev/null
+++ b/frontend/src/components/LinkifyWithTargetBlank/index.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Linkify from "react-linkify";
+
+const componentDecorator = (href, text, key) => (
+
+ {text}
+
+);
+
+const LinkifyWithTargetBlank = ({ children }) => {
+ return {children};
+};
+
+export default LinkifyWithTargetBlank;
diff --git a/frontend/src/pages/Chat/components/MessagesList/MessagesList.js b/frontend/src/pages/Chat/components/MessagesList/MessagesList.js
index 0c2af8b..9875c1b 100644
--- a/frontend/src/pages/Chat/components/MessagesList/MessagesList.js
+++ b/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),
-
- {message.mediaUrl && checkMessaageMedia(message)}
-
- {message.body}
-
- {format(parseISO(message.createdAt), "HH:mm")}
-
+ return (
+
+ {renderDailyTimestamps(message, index)}
+
+ {message.mediaUrl && checkMessaageMedia(message)}
+
+ {message.body}
+
+ {format(parseISO(message.createdAt), "HH:mm")}
+
+
- ,
- ];
+
+ );
} else {
- return [
- renderDailyTimestamps(message, index),
-
- {message.mediaUrl && checkMessaageMedia(message)}
-
- {message.body}
-
- {format(parseISO(message.createdAt), "HH:mm")}
- {renderMessageAck(message)}
-
+ return (
+
+ {renderDailyTimestamps(message, index)}
+
+ {message.mediaUrl && checkMessaageMedia(message)}
+
+ {message.body}
+
+ {format(parseISO(message.createdAt), "HH:mm")}
+ {renderMessageAck(message)}
+
+
- ,
- ];
+
+ );
}
});
return viewMessagesList;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 74a2684..8b6bb13 100644
--- a/frontend/yarn.lock
+++ b/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"