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 some things in message component

Browse source
This commit is contained in:
Lukian 2025-05-16 22:22:46 +02:00
parent b707e2cead
commit 6342377aa0
4 changed files with 21 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

54
front/src/components/MessageComponent.tsx
View file

@ -11,33 +11,29 @@ export default function MessageComponent({ message, user, channel }: {
channel: Channel | undefined; channel: Channel | undefined;
}) { }) {
const [reply, setReply] = useState(false); const [reply, setReply] = useState(false);
const token = localStorage.getItem("token");
const [replyContent, setReplyContent] = useState(""); const [replyContent, setReplyContent] = useState("");
const [searchedUsers, setSearchedUsers] = useState<Users>([]); const [searchedUsers, setSearchedUsers] = useState<Users>([]);
const [searchedEmojis, setSearchedEmojis] = useState<Emojis>([]); const [searchedEmojis, setSearchedEmojis] = useState<Emojis>([]);
const ref = createRef<HTMLInputElement>(); const ref = createRef<HTMLInputElement>();
const token = localStorage.getItem("token");
function getMessageArray(message: Message) { function getMessageArray(message: Message) {
const array = [] const array = []
var string = '' var string = ''
message.content.split(" ").forEach((word) => { message.content.split(" ").forEach((word) => {
if (word.startsWith("@")) { if (word.startsWith("@") && message.mentions.find((mention) => `@${mention.username}` === word)) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word); array.push(string)
if (mention) { string = ''
array.push(string) array.push(<Link to={`/u/${word.substring(1)}`}>{word}</Link>)
string = ''
array.push(word)
} else {
string += word + " "
}
} else if (word.startsWith("https://") || word.startsWith("http://")) { } else if (word.startsWith("https://") || word.startsWith("http://")) {
array.push(string) array.push(string)
string = '' string = ''
array.push(word) array.push(<Link to={word}>{word}</Link>)
} else if (word.startsWith(":") && word.endsWith(":") && word.length > 2) { } else if (word.startsWith(":") && word.endsWith(":") && word.length > 2) {
array.push(string) array.push(string)
string = '' string = ''
array.push(word) const emojiName = word.substring(1, word.length - 1);
array.push(<img src={`/api/emojis/${emojiName}`} alt={emojiName} className="message-emoji" />)
} else { } else {
string += word + " " string += word + " "
} }
@ -81,7 +77,7 @@ export default function MessageComponent({ message, user, channel }: {
const words = replyContent.toString().split(" "); const words = replyContent.toString().split(" ");
const lastWord = words[words.length - 1]; const lastWord = words[words.length - 1];
if (lastWord && lastWord.startsWith("@")) { if (lastWord?.startsWith("@")) {
const username = lastWord.slice(1); const username = lastWord.slice(1);
axios axios
.get(`/api/users?search=${username}`) .get(`/api/users?search=${username}`)
@ -95,7 +91,7 @@ export default function MessageComponent({ message, user, channel }: {
setSearchedUsers([]); setSearchedUsers([]);
} }
if (lastWord && lastWord.startsWith(":")) { if (lastWord?.startsWith(":")) {
const emojiName = lastWord.slice(1); const emojiName = lastWord.slice(1);
axios axios
.get(`/api/emojis?search=${emojiName}`) .get(`/api/emojis?search=${emojiName}`)
@ -118,37 +114,17 @@ export default function MessageComponent({ message, user, channel }: {
<span><Link to={`/u/${message.username}`}>{message.username}</Link> {new Date(message.date * 1000).toLocaleString()}</span> <span><Link to={`/u/${message.username}`}>{message.username}</Link> {new Date(message.date * 1000).toLocaleString()}</span>
<div className="message-text"> <div className="message-text">
{getMessageArray(message).map((word, index) => { {getMessageArray(message).map((word, index) => {
if (word.startsWith("@")) {
return <span key={index} ><Link to={`/u/${word.substring(1)}`}>{word}</Link> </span>
} else if (word.startsWith("https://") || word.startsWith("http://")) {
return <span key={index} ><Link to={word}>{word}</Link> </span>
} else if (word.startsWith(":") && word.endsWith(":") && word.length > 2) {
const emojiName = word.substring(1, word.length - 1);
return <span key={index} ><img src={`/api/emojis/${emojiName}`} alt={emojiName} className="message-emoji" /> </span>
}
return <span key={index}>{word} </span>; return <span key={index}>{word} </span>;
})} })}
</div> </div>
</div> </div>
</div> </div>
{message.has_attachments == true && ( <div className="message-attachments">
<div className="message-attachments"> {message.attachments?.map((attachment) => (
{message.attachments.map((attachment) => ( <img src={`/api/attachments/${attachment.file_name}`} alt="attachment" className="message-attachment" />
<img src={`/api/attachments/${attachment.file_name}`} alt="attachment" className="message-attachment" /> ))}
))}
</div>
)}
<div>
{message.content.toLocaleLowerCase().includes("gros cochon") && (
<img src="/pig.png" alt="Gros cochon" className="pig" />
)}
</div> </div>
<div> {((channel && channel?.owner_id == user?.id) || user?.admin == 1 || user?.id == message.user_id) && (
{message.content.toLocaleLowerCase().includes("le poisson steve") && (
<img src="/le_poisson_steve.png" alt="Le poisson steve" className="fish" />
)}
</div>
{(channel?.owner_id == user?.id || user?.admin == 1 || user?.id == message.user_id) && (
<button onClick={handleDelete} className="forum-button">Delete</button> <button onClick={handleDelete} className="forum-button">Delete</button>
)} )}
{channel && user && !reply && ( {channel && user && !reply && (

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

@ -123,7 +123,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
const words = message.toString().split(" "); const words = message.toString().split(" ");
const lastWord = words[words.length - 1]; const lastWord = words[words.length - 1];
if (lastWord && lastWord.startsWith("@")) { if (lastWord?.startsWith("@")) {
const username = lastWord.slice(1); const username = lastWord.slice(1);
axios axios
.get(`/api/users?search=${username}`) .get(`/api/users?search=${username}`)
@ -137,7 +137,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
setSearchedUsers([]); setSearchedUsers([]);
} }
if (lastWord && lastWord.startsWith(":")) { if (lastWord?.startsWith(":")) {
const emojiName = lastWord.slice(1); const emojiName = lastWord.slice(1);
axios axios
.get(`/api/emojis?search=${emojiName}`) .get(`/api/emojis?search=${emojiName}`)

4
front/src/pages/Login.tsx
View file

@ -16,8 +16,8 @@ export default function Login() {
localStorage.setItem("token", res.data.token); localStorage.setItem("token", res.data.token);
navigate("/"); navigate("/");
}) })
.catch((err) => { .catch(() => {
alert(err.response); alert("Login failed");
}); });
} }

4
front/src/pages/Register.tsx
View file

@ -18,8 +18,8 @@ export default function Register () {
localStorage.setItem("token", res.data.token); localStorage.setItem("token", res.data.token);
navigate("/"); navigate("/");
}) })
.catch((err) => { .catch(() => {
alert(err.response); alert("Register failed");
} }
); );
}) })