lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed mentions display and added MessageComponent

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

31
front/src/components/MessageComponent.tsx Normal file
View file

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

26
front/src/pages/ChannelPage.tsx
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>
{

22
front/src/pages/Home.tsx
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"/>

22
front/src/pages/UserPage.tsx
View file

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