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

add: added mentions

Browse source
This commit is contained in:
Lukian 2025-04-05 17:33:23 +02:00
parent dfb6639ecf
commit 6c8f354bf6
9 changed files with 208 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

53
front/src/pages/ChannelPage.tsx
View file

@ -11,6 +11,7 @@ export default function ChannelPage() {
const [user, setUser] = useState<User>();
const [message, setMessage] = useState<string>("");
const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
const [searchedUsers, setSearchedUsers] = useState<User[]>([]);
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
@ -75,6 +76,26 @@ export default function ChannelPage() {
return () => { clearInterval(id) }
}, [])
useEffect(() => {
const words = message.toString().split(" ");
const lastWord = words[words.length - 1];
if (lastWord && lastWord.startsWith("@")) {
const username = lastWord.slice(1);
axios
.get(`/api/searchuser?search=${username}`)
.then((res) => {
setSearchedUsers(res.data);
})
.catch((err) => {
console.error(err.response);
});
} else {
setSearchedUsers([]);
}
}, [message]);
if (!channel || !messages) {
return <div>Loading...</div>;
}
@ -91,6 +112,27 @@ export default function ChannelPage() {
{
token ? (
<form onSubmit={handleSubmit}>
{searchedUsers.length > 0 && (
<div>
<p>Mentions:</p>
{searchedUsers.map((user) => (
<div key={user.id}>
<Link to={`/u/${user.username}`}>{user.username}</Link>
<button
type="button"
onClick={() => {
setMessage(
message.split(" ").slice(0, -1).join(" ") + " @" + user.username + " "
);
setSearchedUsers([]);
}}
>
Mention
</button>
</div>
))}
</div>
)}
<input
type="text"
placeholder="Message"
@ -109,7 +151,16 @@ export default function ChannelPage() {
<ul>
{messages.slice(0, maxMessageToShown).map((message) => (
<li key={message.id}>
<p><Link to={`/u/${message.username}`}>{message.username}</Link>: {message.content}</p>
<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>