72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { Container, Text, Title, Flex, Card, Image, Box } from "@mantine/core";
|
||
|
|
import { useLoaderData } from "react-router";
|
||
|
|
import { IconPencil } from "@tabler/icons-react";
|
||
|
|
import { NavigateButton } from "./NavigateButton";
|
||
|
|
import { OrderSetProps, OrderSets } from "./OrderSets";
|
||
|
|
import { useUserContext } from "./UserContext";
|
||
|
|
|
||
|
|
export const subsListLoader = () =>
|
||
|
|
Promise.all([
|
||
|
|
fetch("/api/orders/").then((response) => response.json()),
|
||
|
|
fetch("/api/subs").then((response) => response.json()),
|
||
|
|
]);
|
||
|
|
|
||
|
|
interface SubsListProps {
|
||
|
|
subs: { sub_username: string; telegram_photo_url: string }[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const SubsList: React.FC<SubsListProps> = ({ subs }) => (
|
||
|
|
<>
|
||
|
|
<Title order={1} mb="lg">
|
||
|
|
Subs
|
||
|
|
</Title>
|
||
|
|
<Flex gap="md" wrap="wrap">
|
||
|
|
{subs.map(({ sub_username, telegram_photo_url }) => (
|
||
|
|
<Card
|
||
|
|
key={sub_username}
|
||
|
|
shadow="sm"
|
||
|
|
padding="lg"
|
||
|
|
radius="md"
|
||
|
|
withBorder
|
||
|
|
bg="gray.2"
|
||
|
|
w="320px"
|
||
|
|
>
|
||
|
|
{telegram_photo_url ? (
|
||
|
|
<Card.Section>
|
||
|
|
<Image
|
||
|
|
src={telegram_photo_url}
|
||
|
|
height={280}
|
||
|
|
alt={`Profile picture for ${sub_username}`}
|
||
|
|
/>
|
||
|
|
</Card.Section>
|
||
|
|
) : null}
|
||
|
|
|
||
|
|
<Flex direction="column" gap="md" mt="md" h="100%">
|
||
|
|
<Text fw={500}>{sub_username}</Text>
|
||
|
|
<Flex gap="md" justify="end">
|
||
|
|
<NavigateButton to={`/orders/${sub_username}`}>
|
||
|
|
<IconPencil style={{ marginRight: "0.5rem" }} />
|
||
|
|
Edit
|
||
|
|
</NavigateButton>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</Flex>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const Dashboard: React.FC = () => {
|
||
|
|
const [orderSets, subs] =
|
||
|
|
useLoaderData<[OrderSetProps["orderSets"], SubsListProps["subs"]]>();
|
||
|
|
const { username } = useUserContext();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<OrderSets orderSets={orderSets} username={username} />
|
||
|
|
{subs.length > 0 ? <SubsList subs={subs} /> : null}
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|