fix: fixed mentions display and added MessageComponent

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>
+    );
+}

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}>
+                    <MessageComponent
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+                        key={message.id}
-                        {message.content.split(" ").map((word, index) => {
+                        message={message}
-                                if (word.startsWith("@")) {
+                        user={user}
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                        channel={channel}
-                                    if (mention) {
+                        deleteMessage={deleteMessage}
-                                        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>
                 ))}
             </ul>
             {

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}>
+                    <MessageComponent
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+                        key={message.id}
-                        {message.content.split(" ").map((word, index) => {
+                        message={message}
-                                if (word.startsWith("@")) {
+                        user={user}
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                        channel={undefined}
-                                    if (mention) {
+                        deleteMessage={undefined}
-                                        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>
                 ))}
             </ul>
             <img src="osaka_arch.png" alt="osaka" className="osaka"/>

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}>
+                    <MessageComponent
-                        <Link to={`/u/${message.username}`}>{message.username}</Link>:{" "}
+                        key={message.id}
-                        {message.content.split(" ").map((word, index) => {
+                        message={message}
-                                if (word.startsWith("@")) {
+                        user={user}
-                                    const mention = message.mentions.find((mention) => `@${mention.username}` === word);
+                        channel={undefined}
-                                    if (mention) {
+                        deleteMessage={undefined}
-                                        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>
                 ))}
             </ul>
         </div>