fix: fixed mentions display and added MessageComponent

This commit is contained in:
Lukian 2025-04-06 14:50:19 +02:00
parent 6c8f354bf6
commit e38691c02a
4 changed files with 56 additions and 45 deletions

View file

@ -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>
{