add: added channel delete button

This commit is contained in:
Lukian 2025-04-09 13:09:18 +02:00
parent 29f6276534
commit 6c19015a29
6 changed files with 88 additions and 5 deletions

View file

@ -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

View file

@ -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>

View file

@ -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) => {

View file

@ -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) => {