118 lines
2.4 KiB
TypeScript
118 lines
2.4 KiB
TypeScript
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>
|
|
);
|
|
}
|