Create short links page

app/routes/short-links.tsx

@@ -0,0 +1,117 @@
+import {
+  Button,
+  Container,
+  Heading,
+  Link,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useToast,
+} from "@chakra-ui/react";
+import { useLoaderData } from "@remix-run/react";
+
+export function meta() {
+  return [
+    {
+      title: "Short Link Manager - Car Crushers",
+    },
+  ];
+}
+
+export async function loader({ context }: { context: RequestContext }) {
+  const userId = context.data.current_user?.id;
+
+  if (!userId)
+    throw new Response(null, {
+      status: 401,
+    });
+
+  if (
+    ![0, 2, 4, 5, 6, 7, 9, 10, 11, 12].find(
+      (i) => context.data.current_user.permissions & (1 << i),
+    )
+  )
+    throw new Response(null, {
+      status: 403,
+    });
+
+  const { results } = await context.env.D1.prepare(
+    "SELECT destination, path FROM short_links WHERE user = ?;",
+  )
+    .bind(userId)
+    .all();
+
+  return results as Record<string, string>[];
+}
+
+export default function () {
+  const data = useLoaderData<typeof loader>();
+  const toast = useToast();
+
+  async function deleteLink(path: string) {
+    const deleteResp = await fetch(`/api/short-links/${path}`, {
+      method: "DELETE",
+    });
+
+    if (!deleteResp.ok) {
+      let error = "Unknown error";
+
+      try {
+        error = ((await deleteResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: error,
+        status: "error",
+        title: "Failed to delete link",
+      });
+
+      return;
+    }
+
+    toast({
+      description: `Link ${path} was successfully deleted.`,
+      status: "success",
+      title: "Deleted",
+    });
+  }
+
+  return (
+    <Container maxW="container.lg">
+      <Heading mb={8}>Short Links</Heading>
+      <TableContainer mx="16px">
+        <Table variant="simple">
+          <TableCaption>Your short links</TableCaption>
+          <Thead>
+            <Tr>
+              <Th>Destination</Th>
+              <Th>Code</Th>
+              <Th>Delete</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {data.map((entry) => {
+              return (
+                <Tr>
+                  <Td>{entry.destination}</Td>
+                  <Td>{entry.path}</Td>
+                  <Td>
+                    <Button colorScheme="red">Delete</Button>
+                  </Td>
+                </Tr>
+              );
+            })}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <Link href="/short-links/create" mt="8px">
+        Create a new link
+      </Link>
+    </Container>
+  );
+}