From 4a687c3ba59ecf64e5751815c4659cf6a233f2d7 Mon Sep 17 00:00:00 2001
From: Lukian LEIZOUR <lulul7018@gmail.com>
Date: Fri, 18 Apr 2025 18:56:56 +0200
Subject: [PATCH] fix: improved message displaying

---
 front/src/components/MessageComponent.tsx | 33 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/front/src/components/MessageComponent.tsx b/front/src/components/MessageComponent.tsx
index fda3185..0832723 100644
--- a/front/src/components/MessageComponent.tsx
+++ b/front/src/components/MessageComponent.tsx
@@ -9,6 +9,32 @@ export default function MessageComponent({ message, user, channel, deleteMessage
         channel: Channel | undefined;
         deleteMessage: ((messageId: number) => void) | undefined;
     }) {
+
+    function getMessageArray(message: Message) {
+        const array = []
+        var string = ''
+        message.content.split(" ").forEach((word) => {
+            console.log(word)
+            if (word.startsWith("@")) {
+                const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                if (mention) {
+                    array.push(string)
+                    string = ''
+                    array.push(word)
+                } else {
+                    string += word + " "
+                }
+            } else if (word.startsWith("https://") || word.startsWith("http://")) {
+                array.push(string)
+                string = ''
+                array.push(word)
+            } else {
+                string += word + " "
+            }
+        });
+        array.push(string)
+        return array.filter((word) => word !== '');
+    }
     
     return (
         <div key={message.id} className="message">
@@ -17,12 +43,9 @@ export default function MessageComponent({ message, user, channel, deleteMessage
                 <div className="message-content-right">
                     <span><Link to={`/u/${message.username}`}>{message.username}</Link> {new Date(message.date * 1000).toLocaleString()}</span>
                     <div className="message-text">
-                        {message.content.split(" ").map((word, index) => {
+                        {getMessageArray(message).map((word, index) => {
                             if (word.startsWith("@")) {
-                                const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                                if (mention) {
-                                    return <span key={index} ><Link to={`/u/${mention.username}`}>{word}</Link> </span>;
-                                }
+                                return <span key={index} ><Link to={`/u/${word.substring(1)}`}>{word}</Link> </span>
                             } else if (word.startsWith("https://") || word.startsWith("http://")) {
                                 return <span key={index} ><Link to={word}>{word}</Link> </span>
                             }