From b2f8b24fc9b3f1c5352c34977d267b62740a54f8 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Thu, 30 Sep 2021 14:18:29 +0200 Subject: [PATCH] Add link highliting (#24) --- .../components/Chat/ChatMessageContent.tsx | 39 +++++++++++ .../src/components/Chat/ChatMessages.tsx | 64 ++++++++++--------- packages/react-chat/src/hooks/useMessenger.ts | 2 +- 3 files changed, 75 insertions(+), 30 deletions(-) create mode 100644 packages/react-chat/src/components/Chat/ChatMessageContent.tsx diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx new file mode 100644 index 00000000..05b3f043 --- /dev/null +++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from "react"; + +/* eslint-disable no-useless-escape */ +const regEx = + /(?:(?:http|https):\/\/)?(?:[-a-z0-9]+\.)+[a-z]+(?::\d+)?(?:(?:\/[-\+~%/\.\w]+)?\/?(?:[&?][-\+=&;%@\.\w]+)?(?:#[\w]+)?)?/gi; +/* eslint-enable no-useless-escape */ + +type ChatMessageContentProps = { + content: string; +}; + +export function ChatMessageContent({ content }: ChatMessageContentProps) { + const [elements, setElements] = useState<(string | React.ReactElement)[]>([ + content, + ]); + + useEffect(() => { + const split = content.split(regEx); + const newSplit: (string | React.ReactElement)[] = [split[0]]; + const matches = content.match(regEx); + if (matches) { + matches.forEach((match, idx) => { + const link = + match.startsWith("http://") || match.startsWith("https://") + ? match + : "https://" + match; + newSplit.push( + + {match} + , + split[idx + 1] + ); + }); + setElements(newSplit); + } + }, [content]); + + return <>{elements.map((el) => el)}; +} diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index 5db04400..f251107c 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx @@ -5,6 +5,8 @@ import { ChatMessage } from "../../models/ChatMessage"; import { Theme } from "../../styles/themes"; import { UserIcon } from "../Icons/UserIcon"; +import { ChatMessageContent } from "./ChatMessageContent"; + type ChatMessagesProps = { messages: ChatMessage[]; theme: Theme; @@ -18,38 +20,42 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) { ref.current.scrollTop = ref.current.scrollHeight; } }, [messages]); - return ( - {messages.map((message, idx) => ( - - {(idx === 0 || - messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && ( - - {message.date.getDay() === today - ? "Today" - : message.date.toLocaleDateString()} - - )} - - - - + {messages.map((message, idx) => { + return ( + + {(idx === 0 || + messages[idx - 1].date.getDay() != + messages[idx].date.getDay()) && ( + + {message.date.getDay() === today + ? "Today" + : message.date.toLocaleDateString()} + + )} + + + + - - - - {message.sender.slice(0, 10)} - - - {message.date.toLocaleString()} - - - {message.content} - - - - ))} + + + + {message.sender.slice(0, 10)} + + + {message.date.toLocaleString()} + + + + + + + + + ); + })} ); } diff --git a/packages/react-chat/src/hooks/useMessenger.ts b/packages/react-chat/src/hooks/useMessenger.ts index 71fc93c9..139d83c9 100644 --- a/packages/react-chat/src/hooks/useMessenger.ts +++ b/packages/react-chat/src/hooks/useMessenger.ts @@ -69,7 +69,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) { const messenger = await Messenger.create(identity, { bootstrap: getBootstrapNodes.bind({}, [ "fleets", - "wakuv2.prod", + "wakuv2.test", "waku-websocket", ]), });