add: added channel admins

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>