From a543dd31aeb9bd49543838a5a6eca0dd10bc30b8 Mon Sep 17 00:00:00 2001 From: canove Date: Sat, 25 Jul 2020 10:25:13 -0300 Subject: [PATCH] Added linkfy lib to handle messages links --- frontend/package.json | 1 + .../LinkifyWithTargetBlank/index.js | 14 +++++ .../components/MessagesList/MessagesList.js | 51 ++++++++++--------- frontend/yarn.lock | 25 +++++++++ 4 files changed, 68 insertions(+), 23 deletions(-) create mode 100644 frontend/src/components/LinkifyWithTargetBlank/index.js 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"