add: added channel admins

front/src/main.tsx

@@ -12,7 +12,7 @@ createRoot(document.getElementById('root')!).render(
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/:name" element={<Channel />} />
+      <Route path="/c/:name" element={<Channel />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/create-channel" element={<CreateChannel />} />

front/src/pages/Channel.tsx

@@ -1,6 +1,6 @@
 import { useParams, Link } from "react-router-dom";
 import React, { useEffect, useState } from "react";
-import { Channel_type, Messages } from "../types";
+import { Channel_type, Messages, User } from "../types";
 import axios from "axios";
 
 export default function Channel() {
@@ -8,6 +8,7 @@ export default function Channel() {
     const [channel, setChannel] = useState<Channel_type>();
     const [messages, setMessages] = useState<Messages>();
     const [token, setToken] = useState<string>("");
+    const [user, setUser] = useState<User>();
     const [message, setMessage] = useState<string>("");
     const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
 
@@ -29,9 +30,31 @@ export default function Channel() {
             });
     }
 
+    function deleteMessage(message_id: number) {
+        axios
+            .post(`/api/channels/${name}/messages/delete`, { token, message_id })
+            .then(() => {
+                axios
+                    .get(`/api/channels/${name}/messages`)
+                    .then((res) => {
+                        setMessages(res.data);
+                    }
+                );
+            })
+            .catch((err) => {
+                console.error(err.response.data.message);
+            });
+    }
+
     useEffect(() => {
         const localToken = localStorage.getItem("token");
-        if (localToken) setToken(localToken);
+        if (localToken) {
+            setToken(localToken);
+            axios.post("/api/auth/me", { token: localToken }).then((res) => {
+                    setUser(res.data);
+                }
+            );
+        }
         axios.get(`/api/channels/${name}`).then((res) => {
             setChannel(res.data);
         });
@@ -72,6 +95,9 @@ export default function Channel() {
                 {messages.slice(0, maxMessageToShown).map((message) => (
                     <li key={message.id}>
                         <p>{message.username}: {message.content}</p>
+                        {(user?.id === message.user_id || user?.id === channel.owner_id) && (
+                            <button onClick={() => {deleteMessage(message.id)}}>Delete</button>
+                        )}
                     </li>
                 ))}
             </ul>

front/src/pages/Home.tsx

@@ -48,7 +48,7 @@ export default function Home() {
             <ul>
                 {channels?.map((channel) => (
                     <li key={channel.id}>
-                        <Link to={`/${channel.name}`}>{channel.name}</Link>
+                        <Link to={`/c/${channel.name}`}>{channel.name}</Link>
                     </li>
                 ))}
             </ul>

front/src/types.tsx

@@ -2,6 +2,7 @@ export type Channel_type ={
     id: number,
     name: string
     description: string
+    owner_id: number
 }
 
 export type Channels = Channel_type[]