81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import { useLoaderData } from "@remix-run/react";
|
|
import {
|
|
Container,
|
|
Heading,
|
|
Link,
|
|
Table,
|
|
TableCaption,
|
|
TableContainer,
|
|
Tbody,
|
|
Td,
|
|
Th,
|
|
Thead,
|
|
Tr,
|
|
} from "@chakra-ui/react";
|
|
|
|
export async function loader({ context }: { context: RequestContext }) {
|
|
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",
|
|
});
|
|
|
|
location.reload();
|
|
}
|
|
|
|
const memberData = 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>
|
|
);
|
|
}
|