add: added emojis

back/api/emojis.js

@@ -0,0 +1,102 @@
+const express = require('express');
+const { getConnection, getEmojis, addEmoji, getEmojiByName, deleteEmoji } = require('../libs/mysql');
+const { checkAuth } = require("../libs/middlewares")
+const multer = require('multer');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const router = express.Router();
+
+const upload = multer({ dest: 'data/emojis/' })
+upload.limits = {
+    fileSize: 1024 * 1024 * 1,
+    files: 1,
+};
+
+router.get('/', async (req, res) => {
+    const connection = await getConnection();
+    const emojis = await getEmojis(connection);
+    connection.end();
+    res.send(emojis);
+});
+
+router.post('/add', upload.single("emoji"), checkAuth, async (req, res) => {
+    const { name } = req.body;
+    const file = req.file;
+
+    if (!name || !file) {
+        return res.status(400).send({ error: 'Invalid name or file' });
+    }
+
+    const connection = await getConnection();
+
+    const emoji = await getEmojiByName(connection, name);
+
+    if (emoji[0]) {
+        connection.end();
+        fs.unlinkSync(`data/emojis/${file.filename}`);
+        return res.status(400).send({ error: 'Emoji already exists' });
+    }
+
+    if (!/^[a-zA-Z0-9-_]+$/.test(name)) {
+        connection.end();
+        fs.unlinkSync(`data/emojis/${file.filename}`);
+        return res.status(400).send({ error: 'Invalid name' });
+    }
+
+    await addEmoji(connection, name, file.filename);
+    connection.end();
+
+    req.sockets.emit({
+        type: 'new_emoji'
+    });
+
+    res.send({ message: "Emoji added" });
+});
+
+router.get('/:name', async (req, res) => {
+    const { name } = req.params;
+
+    const connection = await getConnection();
+    const emoji = await getEmojiByName(connection, name);
+    connection.end();
+
+    if (!emoji[0]) {
+        return res.status(404).send({ error: 'Emoji not found' });
+    }
+
+    res.sendFile(path.join(__dirname, `../data/emojis/${emoji[0].file}`), { headers: { 'Content-Type': 'image' } });
+});
+
+router.post('/:name/delete', checkAuth, async (req, res) => {
+    const { name } = req.params;
+    const user = req.user;
+
+    const connection = await getConnection();
+    const emoji = await getEmojiByName(connection, name);
+
+    if (!emoji[0]) {
+        connection.end();
+        return res.status(404).send({ error: 'Emoji not found' });
+    }
+
+    if (user.admin !== 1) {
+        connection.end();
+        return res.status(401).send({ error: 'Unauthorized' });
+    }
+
+    if (fs.existsSync(`data/emojis/${emoji[0].file}`)) {
+        fs.unlinkSync(`data/emojis/${emoji[0].file}`);
+    }
+    
+    await deleteEmoji(connection, emoji[0].id);
+    connection.end();
+
+    req.sockets.emit({
+        type: 'delete_emoji',
+    });
+
+    res.send({ message: "Emoji deleted" });
+});
+
+module.exports = router;

back/api/searchemojis.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const { getConnection, searchEmojis } = require('../libs/mysql');
+
+const router = express.Router();
+
+router.get('/', async (req, res) => {
+    const { search } = req.query;
+    const connection = await getConnection();
+    const emojis = await searchEmojis(connection, search);
+    connection.end();
+    res.send(emojis);
+});
+
+module.exports = router;

back/libs/mysql.js

@@ -477,6 +477,95 @@ function deleteUserMentions(connection, user_id) {
   });
 }
 
+function getEmojis(connection) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT id, name FROM emojis`,
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function addEmoji(connection, name, file) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `INSERT INTO emojis (name, file) VALUES (?, ?)`,
+      [name, file], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function deleteEmoji(connection, id) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `DELETE FROM emojis WHERE id = ?`,
+      [id], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function getEmoji(connection, id) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT * FROM emojis WHERE id = ?`,
+      [id], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function getEmojiByName(connection, name) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT * FROM emojis WHERE name = ?`,
+      [name], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
+function searchEmojis(connection, search) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `SELECT * FROM emojis WHERE name LIKE ? LIMIT 5`,
+      [`%${search}%`], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
 module.exports = {
   getUsers,
   getConnection,
@@ -508,4 +597,10 @@ module.exports = {
   deleMentions,
   deleteUserMentions,
   deleteChannelMentions,
+  getEmojis,
+  addEmoji,
+  deleteEmoji,
+  getEmoji,
+  getEmojiByName,
+  searchEmojis,
 };

front/src/components/MessageComponent.tsx

@@ -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>;
                         })}

front/src/components/TopBar.tsx

@@ -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 ? (

front/src/main.tsx

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

front/src/pages/ChannelPage.tsx

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

front/src/pages/CreateEmoji.tsx

@@ -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>
+    );
+}

front/src/pages/EmojisPage.tsx

@@ -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>
+    )
+}

front/src/styles/ChannelPage.css

@@ -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;

front/src/styles/CreateEmoji.css

@@ -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;
+}

front/src/styles/EmojisPage.css

@@ -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;
+}

front/src/styles/MessageComponent.css

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

front/src/types.tsx

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