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 emojis

Browse source
This commit is contained in:
Lukian 2025-04-20 23:45:33 +02:00
parent fafbceb6a2
commit f326555c59
14 changed files with 523 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { useParams, Link, useNavigate } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { Channel, Messages, User } from "../types";
import { Channel, Messages, User, Users, Emojis } from "../types";
import TopBar from "../components/TopBar";
import MessageComponent from "../components/MessageComponent";
import axios from "axios";
@ -16,7 +16,8 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
const [user, setUser] = useState<User>();
const [message, setMessage] = useState<string>("");
const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
const [searchedUsers, setSearchedUsers] = useState<User[]>([]);
const [searchedUsers, setSearchedUsers] = useState<Users>([]);
const [searchedEmojis, setSearchedEmojis] = useState<Emojis>([]);
const [noChannel, setNoChannel] = useState<boolean>(false);
const ref = React.createRef<HTMLInputElement>();
@ -131,6 +132,20 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
} else {
setSearchedUsers([]);
}
if (lastWord && lastWord.startsWith(":")) {
const emojiName = lastWord.slice(1);
axios
.get(`/api/searchemojis?search=${emojiName}`)
.then((res) => {
setSearchedEmojis(res.data);
})
.catch((err) => {
console.error(err.response.data);
});
} else {
setSearchedEmojis([]);
}
}, [message]);
if (noChannel) {
@ -208,6 +223,27 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
))}
</div>
)}
{searchedEmojis.length > 0 && (
<div className="emojis">
{searchedEmojis.map((emoji) => (
<div key={emoji.id} className="search-emoji">
<img src={`/api/emojis/${emoji.name}`} alt={emoji.name} className="emojis-emoji" />
<button
type="button"
onClick={() => {
setMessage(
message.split(" ").slice(0, -1).join(" ") + " :" + emoji.name + ": "
);
setSearchedEmojis([]);
ref.current?.focus();
}}
>
Add Emoji
</button>
</div>
))}
</div>
)}
</form>
) : (
<div className="login-prompt">