import { useLoaderData } from "@remix-run/react"; import { Container, Heading, Link, Table, TableCaption, TableContainer, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react"; import { useState } from "react"; export async function loader({ context }: { context: RequestContext }) { if (!context.data.current_user) throw new Response(null, { status: 401, }); if ( ![1 << 3, 1 << 4, 1 << 12].find( (p) => context.data.current_user.permissions & p, ) ) throw new Response(null, { status: 403, }); const etData = await context.env.D1.prepare( "SELECT id, name, points, roblox_id FROM et_members;", ).all(); if (etData.error) throw new Response(null, { status: 500, }); return etData.results as { [k: string]: any }[]; } export default function () { async function removeMember(id: string) { await fetch("/api/events-team/team-members/user", { body: JSON.stringify({ id }), headers: { "content-type": "application/json", }, method: "DELETE", }); setMemberData(memberData.filter((member) => member.id !== id)); } const [realtimePoints, setRealtimePoints] = useState(0); const [memberData, setMemberData] = useState(useLoaderData<typeof loader>()); return ( <Container maxW="container.lg"> <Heading>Events Team Members</Heading> <TableContainer pt="16px"> <Table variant="simple"> <TableCaption> Points are updated at the end of the month </TableCaption> <Thead> <Tr> <Th>Discord ID</Th> <Th>Name</Th> <Th>Roblox ID</Th> <Th>Points</Th> <Th>Remove</Th> </Tr> </Thead> <Tbody> {memberData.map((member) => ( <Tr> <Td>{member.id}</Td> <Td>{member.name}</Td> <Td>{member.roblox_id}</Td> <Td>{member.points}</Td> <Td> <Link onClick={async () => removeMember(member.id)}> Remove </Link> </Td> </Tr> ))} </Tbody> </Table> </TableContainer> </Container> ); }