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 { 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"/>