cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-19 12:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added linkfy lib to handle messages links

Browse Source
This commit is contained in:
canove
2020-07-25 10:25:13 -03:00
parent 1550fefa41
commit a543dd31ae
4 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/LinkifyWithTargetBlank/index.js Normal file
View File

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

51
frontend/src/pages/Chat/components/MessagesList/MessagesList.js
View File

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