Adding a very rudimentary admin page that displays a table of users and their basic information

2026-08-01 12:10:19 +08:00 · 2023-01-07 19:13:26 +09:00
parent d59a75a0be
commit b70c638f7c
3 changed files with 144 additions and 0 deletions
@@ -0,0 +1,46 @@
+import { Table, TableCaption, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import { useState } from "react";
+import fetcher from "src/lib/fetcher";
+import useSWR from "swr";
+
+/**
+ * Fetches users from the users api route and then presents them in a simple Chakra table.
+ */
+const UsersCell = () => {
+  // Fetch and save the users.
+  const [users, setUsers] = useState([]);
+  const { isLoading } = useSWR("/api/admin/users", fetcher, {
+    onSuccess: (data) => {
+      setUsers(data);
+    },
+  });
+
+  // Present users in a naive table.
+  return (
+    <TableContainer>
+      <Table variant="simple">
+        <TableCaption>Users</TableCaption>
+        <Thead>
+          <Tr>
+            <Th>Id</Th>
+            <Th>Email</Th>
+            <Th>Name</Th>
+            <Th>Role</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {users.map((user, index) => (
+            <Tr key={index}>
+              <Td>{user.id}</Td>
+              <Td>{user.email}</Td>
+              <Td>{user.name}</Td>
+              <Td>{user.role}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default UsersCell;