From e38691c02addb682521dcae43f8c3794d9c81bf9 Mon Sep 17 00:00:00 2001
From: Lukian <lulul7018@gmail.com>
Date: Sun, 6 Apr 2025 14:50:19 +0200
Subject: [PATCH] fix: fixed mentions display and added MessageComponent

---
 front/src/components/MessageComponent.tsx | 31 +++++++++++++++++++++++
 front/src/pages/ChannelPage.tsx           | 26 +++++++------------
 front/src/pages/Home.tsx                  | 22 ++++++----------
 front/src/pages/UserPage.tsx              | 22 ++++++----------
 4 files changed, 56 insertions(+), 45 deletions(-)
 create mode 100644 front/src/components/MessageComponent.tsx

diff --git a/front/src/components/MessageComponent.tsx b/front/src/components/MessageComponent.tsx
new file mode 100644
index 0000000..f73c525
--- /dev/null
+++ b/front/src/components/MessageComponent.tsx
@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+import { Message, User, Channel } from "../types";
+
+export default function MessageComponent({ message, user, channel, deleteMessage }: {
+        message: Message;
+        user: User | undefined;
+        channel: Channel | undefined;
+        deleteMessage: ((messageId: number) => void) | undefined;
+    }) {
+    
+    return (
+        <li key={message.id}>
+            <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+            {message.content.split(" ").map((word, index) => {
+                if (word.startsWith("@")) {
+                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                    if (mention) {
+                        return <span><Link key={index} to={`/u/${mention.username}`}>{word}</Link> </span>;
+                    }
+                }
+                return <span key={index}>{word} </span>;
+            })}
+            <p>{new Date(message.date * 1000).toLocaleString()}</p>
+            {channel && deleteMessage && (
+                user?.id === message.user_id || user?.id === channel?.owner_id || user?.admin === 1) && (
+                    <button onClick={() => {deleteMessage(message.id)}}>Delete</button>
+                )
+            }            
+        </li>
+    );
+}
\ No newline at end of file
diff --git a/front/src/pages/ChannelPage.tsx b/front/src/pages/ChannelPage.tsx
index 51605a4..c9658b3 100644
--- a/front/src/pages/ChannelPage.tsx
+++ b/front/src/pages/ChannelPage.tsx
@@ -1,6 +1,7 @@
 import { useParams, Link } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { Channel, Messages, User } from "../types";
+import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
 export default function ChannelPage() {
@@ -105,7 +106,7 @@ export default function ChannelPage() {
             <Link to="/">Home</Link>
             <h1>Channel {channel.name}</h1>
             <p>{channel.description}</p>
-            <p>Owner: {channel.owner_username}</p>
+            <p>Owner: <Link to={`/u/${channel.owner_username}`}>{channel.owner_username}</Link></p>
             {channel.name.toLowerCase().includes("cat") && (
                 <img src="/cat.jpg" alt="cat" className="cat" />
             )}
@@ -150,22 +151,13 @@ export default function ChannelPage() {
             }
             <ul>
                 {messages.slice(0, maxMessageToShown).map((message) => (
-                    <li key={message.id}>
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
-                        {message.content.split(" ").map((word, index) => {
-                                if (word.startsWith("@")) {
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                                    if (mention) {
-                                        return <Link key={index} to={`/u/${mention.username}`}>{word}</Link>;
-                                    }
-                                }
-                                return <span key={index}>{word} </span>;
-                        })}
-                        <p>{new Date(message.date * 1000).toLocaleString()}</p>
-                        {(user?.id === message.user_id || user?.id === channel.owner_id || user?.admin === 1) && (
-                            <button onClick={() => {deleteMessage(message.id)}}>Delete</button>
-                        )}
-                    </li>
+                    <MessageComponent
+                        key={message.id}
+                        message={message}
+                        user={user}
+                        channel={channel}
+                        deleteMessage={deleteMessage}
+                    />
                 ))}
             </ul>
             {
diff --git a/front/src/pages/Home.tsx b/front/src/pages/Home.tsx
index c09c973..13aa52f 100644
--- a/front/src/pages/Home.tsx
+++ b/front/src/pages/Home.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react"
 import { Link } from "react-router-dom"
 import { Channels, RecentChannels, User, Messages } from "../types"
+import MessageComponent from "../components/MessageComponent"
 import axios from "axios"
 
 export default function Home() {
@@ -122,20 +123,13 @@ export default function Home() {
             <h2>Last messages</h2>
             <ul>
                 {messages?.map((message) => (
-                    <li key={message.id}>
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
-                        {message.content.split(" ").map((word, index) => {
-                                if (word.startsWith("@")) {
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                                    if (mention) {
-                                        return <Link key={index} to={`/u/${mention.username}`}>{word}</Link>;
-                                    }
-                                }
-                                return <span key={index}>{word} </span>;
-                        })}
-                        <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
-                        <p>{new Date(message.date * 1000).toLocaleString()}</p>
-                    </li>
+                    <MessageComponent
+                        key={message.id}
+                        message={message}
+                        user={user}
+                        channel={undefined}
+                        deleteMessage={undefined}
+                    />
                 ))}
             </ul>
             <img src="osaka_arch.png" alt="osaka" className="osaka"/>
diff --git a/front/src/pages/UserPage.tsx b/front/src/pages/UserPage.tsx
index 33f45bc..b3b78c6 100644
--- a/front/src/pages/UserPage.tsx
+++ b/front/src/pages/UserPage.tsx
@@ -1,6 +1,7 @@
 import { useParams, Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { User, Messages } from "../types";
+import MessageComponent from "../components/MessageComponent";
 import axios from "axios";
 
 export default function UserPage() {
@@ -41,20 +42,13 @@ export default function UserPage() {
             <h1>Last messages</h1>
             <ul>
                 {messages?.map((message) => (
-                    <li key={message.id}>
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
-                        {message.content.split(" ").map((word, index) => {
-                                if (word.startsWith("@")) {
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
-                                    if (mention) {
-                                        return <Link key={index} to={`/u/${mention.username}`}>{word}</Link>;
-                                    }
-                                }
-                                return <span key={index}>{word} </span>;
-                        })}
-                        <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
-                        <p>{new Date(message.date * 1000).toLocaleString()}</p>
-                    </li>
+                    <MessageComponent
+                        key={message.id}
+                        message={message}
+                        user={user}
+                        channel={undefined}
+                        deleteMessage={undefined}
+                    />
                 ))}
             </ul>
         </div>