add: added emojis

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