generated from lucien/api-template
add: added channel delete button
This commit is contained in:
parent
29f6276534
commit
6c19015a29
6 changed files with 88 additions and 5 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue