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",
]),
});