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

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

@ -27,6 +27,10 @@ export default function MessageComponent({ message, user, channel, deleteMessage
array.push(string)
string = ''
array.push(word)
} else if (word.startsWith(":") && word.endsWith(":") && word.length > 2) {
array.push(string)
string = ''
array.push(word)
} else {
string += word + " "
}
@ -47,6 +51,9 @@ export default function MessageComponent({ message, user, channel, deleteMessage
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>;
})}

1
front/src/components/TopBar.tsx
View file

@ -13,6 +13,7 @@ export default function TopBar({ user }: { user: User | undefined }) {
<Link to="/">Home</Link>
<Link to="/channels">Channels</Link>
<Link to="/users">Users</Link>
<Link to="/emojis">Emojis</Link>
</div>
<div className="topbar-center">
{user && user.id == 5 ? (

4
front/src/main.tsx
View file

@ -11,6 +11,8 @@ import CreateChannel from './pages/CreateChannel'
import ChannelsPage from './pages/ChannelsPage'
import UsersPage from './pages/UsersPage'
import EditProfile from './pages/EditProfile'
import CreateEmoji from './pages/CreateEmoji'
import EmojisPage from './pages/EmojisPage'
import NotFoundPage from './pages/404'
const socket = new WebSocket("/api/ws");
@ -36,6 +38,8 @@ createRoot(document.getElementById('root')!).render(
<Route path="/channels" element={<ChannelsPage socket={socket} />} />
<Route path="/users" element={<UsersPage socket={socket} />} />
<Route path="/edit-profile" element={<EditProfile />} />
<Route path="/create-emoji" element={<CreateEmoji />} />
<Route path="/emojis" element={<EmojisPage socket={socket} />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>

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

77
front/src/pages/CreateEmoji.tsx Normal file
View file

@ -0,0 +1,77 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { User } from "../types";
import axios from "axios";
import TopBar from "../components/TopBar";
import "../styles/CreateEmoji.css";
export default function CreateEmoji() {
const navigate = useNavigate();
const [name, setName] = useState("");
const [token, setToken] = useState<string>("");
const [user , setUser] = useState<User>();
useEffect(() => {
const localToken = localStorage.getItem("token");
if (localToken) {
setToken(localToken)
axios
.post("/api/auth/me", { token: localToken })
.then((res) => {
setUser(res.data);
});
}
}, []);
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const formData = new FormData();
const fileInput = document.getElementById("emoji") as HTMLInputElement;
if (fileInput.files) {
formData.append("emoji", fileInput.files[0]);
}
formData.append("token", token);
formData.append("name", name);
axios
.post("/api/emojis/add", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(() => {
navigate("/emojis");
})
.catch((err) => {
console.error(err.response.data);
});
}
return (
<div className="create-emoji-page">
<TopBar user={user}/>
<div className="create-emoji">
<h1>Create Emoji</h1>
<form onSubmit={handleSubmit}>
<p>
{!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
<span>Emoji name can only contain letters, numbers, - and _</span>
)}
</p>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input type="file" name="emoji" id="emoji" />
<button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
Create
</button>
</form>
</div>
</div>
);
}

107
front/src/pages/EmojisPage.tsx Normal file
View file

@ -0,0 +1,107 @@
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
import { Emojis, User } from "../types"
import axios from "axios"
import TopBar from "../components/TopBar"
import "../styles/EmojisPage.css"
export default function EmojisPage({socket}: {socket: WebSocket}) {
const [emojis, setEmojis] = useState<Emojis>();
const [search, setSearch] = useState<string>("");
const [token, setToken] = useState<string>("");
const [user, setUser] = useState<User>();
function deleteEmoji(name: string) {
if (!window.confirm(`Are you sure you want to delete ${name}?`)) {
return;
}
axios
.post(`/api/emojis/${name}/delete`, { token })
.then(() => {
window.location.reload();
})
.catch((err) => {
console.error(err.response);
});
}
useEffect(() => {
const token = localStorage.getItem("token")
if (token) {
setToken(token)
axios
.post("/api/auth/me", {
token: token
})
.then((res) => {
setUser(res.data)
})
}
axios
.get("/api/emojis")
.then((res) => {
setEmojis(res.data)
})
.catch((err) => {
console.error(err.response)
})
}, [])
useEffect(() => {
socket.addEventListener('message', function (event) {
const data = JSON.parse(event.data);
if (data.type === "new_emoji" || data.type === "delete_emoji") {
axios
.get("/api/emojis")
.then((res) => {
setEmojis(res.data)
})
.catch((err) => {
console.error(err.response)
})
}
});
}, [])
if (!emojis) {
return (
<div className="emojis-page">
<TopBar user={user} />
<div className="emojis-page-emojis">
<h2>Emojis</h2>
<p>Loading...</p>
</div>
</div>
)
}
return (
<div className="emojis-page">
<TopBar user={user} />
<div className="emojis-page-emojis">
<h2>Channels</h2>
<Link to="/create-emoji">Create emoji</Link>
<input
type="text"
placeholder="Search emojis"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<ul>
{emojis?.sort().filter((emoji) => emoji.name.toLowerCase().includes(search.toLowerCase())).map((emoji) => (
<li key={emoji.id}>
<img src={`/api/emojis/${emoji.name}`} alt={emoji.name} className="emoji" />
{user?.admin == 1 && (
<button onClick={() => deleteEmoji(emoji.name)}>
Delete
</button>
)}
</li>
))}
</ul>
</div>
</div>
)
}

27
front/src/styles/ChannelPage.css
View file

@ -41,6 +41,33 @@
gap: 5px;
}
.emojis {
position: absolute;
top: 100%;
border: 1px solid #270722;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: left;
gap: 5px;
min-width: 20%;
background-color: white;
}
.search-emoji {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: top;
gap: 5px;
}
.emojis-emoji {
max-width: 1em;
max-height: 1em;
}
.login-prompt {
margin: 16px 0;
display: flex;

15
front/src/styles/CreateEmoji.css Normal file
View file

@ -0,0 +1,15 @@
.create-emoji-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.create-emoji {
width: 97%;
border: 1px solid #270722;
padding: 10px;
background-color: #fff6fd;
}

24
front/src/styles/EmojisPage.css Normal file
View file

@ -0,0 +1,24 @@
.emojis-page {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
width: 100%;
gap: 20px;
}
.emojis-page-emojis {
width: 97%;
border: 1px solid #270722;
padding: 10px;
background-color: #fff6fd;
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}
.emoji {
max-width: 50px;
max-height: 50px;
}

5
front/src/styles/MessageComponent.css
View file

@ -31,3 +31,8 @@
overflow: hidden;
text-overflow: ellipsis;
}
.message-emoji {
max-width: 1em;
max-height: 1em;
}

7
front/src/types.tsx
View file

@ -46,3 +46,10 @@ export type User = {
}
export type Users = User[]
export type Emoji = {
id: number
name: string
}
export type Emojis = Emoji[]