add: added a user page and button to delete them

front/src/components/TopBar.tsx

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

front/src/main.tsx

@@ -9,6 +9,7 @@ import Login from './pages/Login'
 import Register from './pages/Register'
 import CreateChannel from './pages/CreateChannel'
 import ChannelsPage from './pages/ChannelsPage'
+import UsersPage from './pages/UsersPage'
 
 const socket = new WebSocket("/api/ws");
 
@@ -31,6 +32,7 @@ createRoot(document.getElementById('root')!).render(
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />
       <Route path="/channels" element={<ChannelsPage socket={socket} />} />
+      <Route path="/users" element={<UsersPage socket={socket} />} />
     </Routes>
   </BrowserRouter>
 )

front/src/pages/UsersPage.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+import { User, Users } from "../types"
+import axios from "axios"
+import TopBar from "../components/TopBar"
+
+import "../styles/UsersPage.css"
+
+export default function UsersPage({socket}: {socket: WebSocket}) {
+    const [users, setUsers] = useState<Users>();
+    const [search, setSearch] = useState<string>("");
+    const [token, setToken] = useState<string>("");
+    const [thisUser, setThisUser] = useState<User>();
+
+    function deleteUser(username: string) {
+        axios
+            .post(`/api/users/${username}/delete`, { token })
+            .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) => {
+                    setThisUser(res.data)
+                })
+        }
+        axios
+            .get("/api/users")
+            .then((res) => {
+                setUsers(res.data)
+            })
+            .catch((err) => {
+                console.error(err.response)
+            })
+    }, [])
+
+    useEffect(() => {
+        socket.addEventListener('message', function (event) {
+            const data = JSON.parse(event.data);
+            if (data.type === "new_user" || data.type === "delete_user") {
+                axios
+                    .get("/api/users")
+                    .then((res) => {
+                        setUsers(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
+            }
+        });
+    }, [])
+
+    if (!users) {
+        return (
+            <div className="users-page">
+                <TopBar user={thisUser} />
+                <div className="users-page-users">
+                    <h2>Users</h2>
+                    <p>Loading...</p>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="users-page">
+            <TopBar user={thisUser} />
+            <div className="users-page-channels">
+                <h2>Channels</h2>
+                <input
+                    type="text"
+                    placeholder="Search users"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                />
+                <ul>
+                    {users?.sort().filter((channel) => channel.username.toLowerCase().includes(search.toLowerCase())).map((user) => (
+                        <li key={user.id}>
+                            <Link to={`/u/${user.username}`}>{user.username}</Link>
+                            {thisUser?.admin == 1 && (
+                                <button onClick={() => deleteUser(user.username)}> 
+                                    Delete
+                                </button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}

front/src/styles/UsersPage.css

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

front/src/types.tsx

@@ -43,3 +43,5 @@ export type User = {
     username: string
     admin: number
 }
+
+export type Users = User[]