86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Button, Skeleton, Stack, Text } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import { groupItems } from "@/shared/lib";
|
|
|
|
import type { BrokerageEvent } from "../../api/useBrokerageEvents";
|
|
|
|
import { brokerageEventGroupKey, brokerageEventKey } from "../../model/event-key";
|
|
import { BrokerageEventCard } from "../BrokerageEventCard";
|
|
import { BrokerageEventGroup } from "../BrokerageEventGroup";
|
|
|
|
type BrokerageEventsPreviewProps = {
|
|
allAccounts?: boolean;
|
|
events: BrokerageEventsPreviewState;
|
|
moreLabel?: string;
|
|
};
|
|
|
|
type BrokerageEventsPreviewState
|
|
= | {
|
|
items: BrokerageEvent[];
|
|
state: "loaded" | "partial";
|
|
to: string;
|
|
totalVisible?: boolean;
|
|
}
|
|
| { state: "empty"
|
|
| "error"
|
|
| "loading"; to: string; };
|
|
|
|
const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
|
|
const { events } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack gap="sm">
|
|
{events.state === "loading" && (
|
|
<LoadingSkeleton label={t("events.recentLoading")}>
|
|
{["first", "second", "third"].map(placeholder => <Skeleton height={48} key={placeholder} radius="sm" />)}
|
|
</LoadingSkeleton>
|
|
)}
|
|
|
|
{events.state === "error" && <Text c="dimmed">{t("states.unavailableText")}</Text>}
|
|
|
|
{events.state === "empty" && <Text c="dimmed">{t("events.recentEmpty")}</Text>}
|
|
|
|
{events.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
|
|
|
|
{(events.state === "loaded" || events.state === "partial") && (
|
|
<Stack
|
|
component="ul"
|
|
gap="sm"
|
|
m={0}
|
|
p={0}
|
|
style={{ listStyle: "none" }}
|
|
>
|
|
{groupItems(
|
|
events.items,
|
|
props.allAccounts ? brokerageEventGroupKey : () => null,
|
|
).map(entry => entry.type === "group"
|
|
? (
|
|
<BrokerageEventGroup
|
|
events={entry.items}
|
|
key={entry.key}
|
|
totalVisible={events.totalVisible === true}
|
|
/>
|
|
)
|
|
: (
|
|
<li key={brokerageEventKey(entry.item)}>
|
|
<BrokerageEventCard event={entry.item} />
|
|
</li>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
|
|
<Button component={Link} to={events.to} variant="subtle">
|
|
{props.moreLabel ?? t("events.open")}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { BrokerageEventsPreview, type BrokerageEventsPreviewState };
|