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

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

@ -11,33 +11,29 @@ export default function MessageComponent({ message, user, channel }: {
channel: Channel | undefined;
}) {
const [reply, setReply] = useState(false);
const token = localStorage.getItem("token");
const [replyContent, setReplyContent] = useState("");
const [searchedUsers, setSearchedUsers] = useState<Users>([]);
const [searchedEmojis, setSearchedEmojis] = useState<Emojis>([]);
const ref = createRef<HTMLInputElement>();
const token = localStorage.getItem("token");
function getMessageArray(message: Message) {
const array = []
var string = ''
message.content.split(" ").forEach((word) => {
if (word.startsWith("@")) {
const mention = message.mentions.find((mention) => `@${mention.username}` === word);
if (mention) {
if (word.startsWith("@") && message.mentions.find((mention) => `@${mention.username}` === word)) {
array.push(string)
string = ''
array.push(word)
} else {
string += word + " "
}
array.push(<Link to={`/u/${word.substring(1)}`}>{word}</Link>)
} else if (word.startsWith("https://") || word.startsWith("http://")) {
array.push(string)
string = ''
array.push(word)
array.push(<Link to={word}>{word}</Link>)
} else if (word.startsWith(":") && word.endsWith(":") && word.length > 2) {
array.push(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 {
string += word + " "
}
@ -81,7 +77,7 @@ export default function MessageComponent({ message, user, channel }: {
const words = replyContent.toString().split(" ");
const lastWord = words[words.length - 1];
if (lastWord && lastWord.startsWith("@")) {
if (lastWord?.startsWith("@")) {
const username = lastWord.slice(1);
axios
.get(`/api/users?search=${username}`)
@ -95,7 +91,7 @@ export default function MessageComponent({ message, user, channel }: {
setSearchedUsers([]);
}
if (lastWord && lastWord.startsWith(":")) {
if (lastWord?.startsWith(":")) {
const emojiName = lastWord.slice(1);
axios
.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>
<div className="message-text">
{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>;
})}
</div>
</div>
</div>
{message.has_attachments == true && (
<div className="message-attachments">
{message.attachments.map((attachment) => (
{message.attachments?.map((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>
{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) && (
{((channel && channel?.owner_id == user?.id) || user?.admin == 1 || user?.id == message.user_id) && (
<button onClick={handleDelete} className="forum-button">Delete</button>
)}
{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 lastWord = words[words.length - 1];
if (lastWord && lastWord.startsWith("@")) {
if (lastWord?.startsWith("@")) {
const username = lastWord.slice(1);
axios
.get(`/api/users?search=${username}`)
@ -137,7 +137,7 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
setSearchedUsers([]);
}
if (lastWord && lastWord.startsWith(":")) {
if (lastWord?.startsWith(":")) {
const emojiName = lastWord.slice(1);
axios
.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);
navigate("/");
})
.catch((err) => {
alert(err.response);
.catch(() => {
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);
navigate("/");
})
.catch((err) => {
alert(err.response);
.catch(() => {
alert("Register failed");
}
);
})