add: added channel delete button

back/api/channels.js

@@ -13,7 +13,8 @@ const {
     getUserByUsername,
     deleMentions,
     deleteChannelMentions,
-    deleteChannelMessages
+    deleteChannelMessages,
+    deleteChannel
 } = require('../libs/mysql');
 const { checkAuth } = require('../libs/middlewares');
 
@@ -68,6 +69,37 @@ router.post('/:name/purge', async (req, res) => {
     res.send({ message: 'Channel purged' });
 });
 
+router.use('/:name/delete', checkAuth);
+router.post('/:name/delete', async (req, res) => {
+    const name = req.params.name;
+    const user = req.user;
+
+    const connection = await getConnection();
+
+    const channel = await getChannel(connection, name);
+    if (!channel[0]) {
+        connection.end();
+        return res.status(400).send({ error: 'No channel found' });
+    }
+
+    if (user.admin !== 1) {
+        connection.end();
+        return res.status(401).send({ error: 'Unauthorized' });
+    }
+
+    await deleteChannelMentions(connection, channel[0].id);
+    await deleteChannelMessages(connection, channel[0].id);
+    await deleteChannel(connection, channel[0].id);
+    connection.end();
+
+    req.sockets.emit({
+        type: 'delete_channel',
+        channel_id: channel[0].id,
+    });
+
+    res.send({ message: 'Channel deleted' });
+});
+
 router.get('/:name/messages', async (req, res) => {
     const name = req.params.name;
     const connection = await getConnection();

back/libs/mysql.js

@@ -193,6 +193,21 @@ function addChannel(connection, name, description, owner_id) {
   });
 }
 
+function deleteChannel(connection, channel_id) {
+  return new Promise((resolve, reject) => {
+    connection.query(
+      `DELETE FROM channels WHERE id = ?`,
+      [channel_id], // Use parameterized query
+      (error, result) => {
+        if (error) {
+          reject(new Error(error));
+        }
+        resolve(result);
+      }
+    );
+  });
+}
+
 function getMessages(connection, channel_id) {
   return new Promise((resolve, reject) => {
     connection.query(
@@ -371,6 +386,7 @@ module.exports = {
   searchChannels,
   getChannel,
   addChannel,
+  deleteChannel,
   getMessages,
   getLastMessages,
   getMessage,

front/src/pages/ChannelPage.tsx

@@ -1,4 +1,4 @@
-import { useParams, Link } from "react-router-dom";
+import { useParams, Link, useNavigate } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { Channel, Messages, User } from "../types";
 import TopBar from "../components/TopBar";
@@ -8,6 +8,7 @@ import axios from "axios";
 import "../styles/ChannelPage.css";
 
 export default function ChannelPage({socket}: {socket: WebSocket}) {
+    const navigate = useNavigate();
     const { name } = useParams();
     const [channel, setChannel] = useState<Channel>();
     const [messages, setMessages] = useState<Messages>();
@@ -48,6 +49,17 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
         );
     }
 
+    function deleteChannel() {
+        axios
+            .post(`/api/channels/${name}/delete`, { token })
+            .then(() => {
+                navigate("/");
+            })
+            .catch((err) => {
+                console.error(err.response);
+            });
+    }
+
     useEffect(() => {
         const localToken = localStorage.getItem("token");
         if (localToken) {
@@ -75,6 +87,9 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
                         setMessages(res.data)
                     })
             }
+            if (data.type === "delete_channel" && data.channel_id === channel?.id) {
+                navigate("/");
+            }
         });
     }, [channel])
 
@@ -124,6 +139,11 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
                         Purge Channel
                     </button>
                 )}
+                {user?.admin == 1 && (
+                    <button onClick={deleteChannel}>
+                        Delete Channel
+                    </button>
+                )}
                 {token ? (
                     <form onSubmit={handleSubmit} className="message-form">
                         <input 

front/src/pages/ChannelsPage.tsx

@@ -9,12 +9,22 @@ import "../styles/ChannelsPage.css"
 export default function ChannelsPage({socket}: {socket: WebSocket}) {
     const [channels, setChannels] = useState<Channels>();
     const [search, setSearch] = useState<string>("");
+    const [token, setToken] = useState<string>("");
     const [user, setUser] = useState<User>();
 
+    function deleteChannel(name: string) {
+        axios
+            .post(`/api/channels/${name}/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
@@ -36,7 +46,7 @@ export default function ChannelsPage({socket}: {socket: WebSocket}) {
     useEffect(() => {
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
-            if (data.type === "new_channel") {
+            if (data.type === "new_channel" || data.type === "delete_channel") {
                 axios
                     .get("/api/channels")
                     .then((res) => {
@@ -77,6 +87,11 @@ export default function ChannelsPage({socket}: {socket: WebSocket}) {
                     {channels?.sort().filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
                         <li key={channel.id}>
                             <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                            {user?.admin == 1 && (
+                                <button onClick={() => deleteChannel(channel.name)}> 
+                                    Delete
+                                </button>
+                            )}
                         </li>
                     ))}
                 </ul>

front/src/pages/Home.tsx

@@ -62,7 +62,7 @@ export default function Home({socket}: {socket: WebSocket}) {
         socket.addEventListener('message', function (event) 
         {
             const data = JSON.parse(event.data);
-            if (data.type === "new_message" || data.type === "delete_message" || data.type === "purge_channel") {
+            if (data.type === "new_message" || data.type === "delete_message" || data.type === "purge_channel" || data.type === "new_channel" || data.type === "delete_channel") {
                 axios
                     .get("/api/lastmessages")
                     .then((res) => {

front/src/pages/UserPage.tsx

@@ -47,7 +47,7 @@ export default function UserPage({socket}: {socket: WebSocket}) {
     useEffect(() => {
         socket.addEventListener('message', function (event) {
             const data = JSON.parse(event.data);
-            if (((data.type === "new_message" || data.type === "delete_message") && data.user_id === pageUser?.id) || data.type === "purge_channel") {
+            if (((data.type === "new_message" || data.type === "delete_message") && data.user_id === pageUser?.id) || data.type === "purge_channel" || data.type === "delete_channel") {
                 axios
                     .get(`/api/users/${username}/lastmessages`)
                     .then((res) => {