import { Link, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useDisclosure, useToast, } from "@chakra-ui/react"; import { useEffect, useState } from "react"; import NewAppealBan from "./NewAppealBan.js"; export default function (props: { isOpen: boolean; onClose: () => void }) { const [entries, setEntries] = useState( [] as { created_at: number; created_by: string; user: string }[], ); const toast = useToast(); const { isOpen, onClose, onOpen } = useDisclosure(); async function removeBan(user: string) { const removeResp = await fetch(`/api/appeals/${user}/ban`, { method: "DELETE", }); if (!removeResp.ok) { let error; try { error = ((await removeResp.json()) as { error: string }).error; } catch { error = "Unknown error"; } toast({ description: error, isClosable: true, status: "error", title: "Failed to remove member", }); return; } toast({ description: `User ${user} removed`, isClosable: true, status: "success", title: "Success", }); setEntries([...entries].filter((entry) => entry.user !== user)); } useEffect(() => {}, []); return ( <> <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Appeal Bans</ModalHeader> <ModalCloseButton /> <ModalBody> <TableContainer> <Table variant="simple"> <Thead> <Tr> <Th>User</Th> <Th>Moderator</Th> <Th>Time</Th> <Th>Remove</Th> </Tr> </Thead> <Tbody> {entries.map((entry) => ( <Tr> <Td>{entry.user}</Td> <Td>{entry.created_by}</Td> <Td>{new Date(entry.created_at).toUTCString()}</Td> <Td> <Link onClick={async () => await removeBan(entry.user)}> Remove </Link> </Td> </Tr> ))} </Tbody> </Table> </TableContainer> </ModalBody> <ModalFooter> <Link onClick={onOpen}>Click here to ban someone</Link> </ModalFooter> </ModalContent> </Modal> <NewAppealBan isOpen={isOpen} onClose={onClose} /> </> ); }