feat: improve ledger event rows

src/pages/account-operations/ui/AccountOperationsPage.tsx

@@ -1,188 +1,19 @@
-import {
-	Button,
-	Card,
-	Checkbox,
-	Group,
-	Stack,
-	Text,
-	TextInput,
-	Title,
-} from "@mantine/core";
 import type { FC } from "react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router";
+import { LedgerEntryRow } from "@/entities/broker-operation";
 import {
-	type BrokerageOperation,
-	type OperationCategory,
-	operationCategories,
-	useBrokerageOperations,
-} from "@/entities/broker-operation";
-import { formatMoney, formatSnapshotTime } from "@/entities/portfolio";
-import { StateView } from "@/shared/ui";
-
-function dateStart(value: string) {
-	return value ? `${value}T00:00:00.000Z` : undefined;
-}
-
-function dateEnd(value: string) {
-	return value ? `${value}T23:59:59.999Z` : undefined;
-}
-
-type OperationRowProps = {
-	operation: BrokerageOperation;
-};
+	AccountOperationsPageError,
+	AccountOperationsPageLoaded,
+	AccountOperationsPageLoading,
+} from "./AccountOperationsPage.view";
+import { useAccountOperationsPageVm } from "./AccountOperationsPage.vm";
 
 const AccountOperationsPage: FC = () => {
-	const { accountId } = useParams();
-	const { t } = useTranslation();
-	const [from, setFrom] = useState("");
-	const [to, setTo] = useState("");
-	const [categories, setCategories] = useState<OperationCategory[]>([]);
-	const [cursors, setCursors] = useState<string[]>([]);
-	const cursor = cursors.at(-1);
-	const operations = useBrokerageOperations(accountId, {
-		from: dateStart(from),
-		to: dateEnd(to),
-		...(categories.length ? { categories } : {}),
-		...(cursor ? { cursor } : {}),
-		limit: 100,
-	});
-	const reset = () => setCursors([]);
+	const viewModel = useAccountOperationsPageVm();
 
-	if (operations.isLoading)
-		return (
-			<StateView
-				loading
-				title={t("states.loadingTitle")}
-				text={t("states.loadingText")}
-			/>
-		);
-	if (operations.isError)
-		return (
-			<StateView
-				error
-				title={t("ledger.errorTitle")}
-				text={t("ledger.errorText")}
-				action={
-					<Button onClick={() => operations.refetch()}>
-						{t("ledger.retry")}
-					</Button>
-				}
-			/>
-		);
-	if (!operations.data)
-		return (
-			<StateView
-				loading
-				title={t("states.loadingTitle")}
-				text={t("states.loadingText")}
-			/>
-		);
-	const { data } = operations;
-	const nextCursor = data.nextCursor;
-	return (
-		<Stack maw={960} gap="lg">
-			<Title order={1}>{t("ledger.title")}</Title>
-			<Group align="end">
-				<TextInput
-					label={t("ledger.from")}
-					type="date"
-					value={from}
-					onChange={(event) => {
-						setFrom(event.currentTarget.value);
-						reset();
-					}}
-				/>
-				<TextInput
-					label={t("ledger.to")}
-					type="date"
-					value={to}
-					onChange={(event) => {
-						setTo(event.currentTarget.value);
-						reset();
-					}}
-				/>
-			</Group>
-			<Checkbox.Group
-				label={t("ledger.categories")}
-				value={categories}
-				onChange={(value) => {
-					setCategories(value as OperationCategory[]);
-					reset();
-				}}
-			>
-				<Group mt="xs">
-					{operationCategories.map((category) => (
-						<Checkbox
-							key={category}
-							value={category}
-							label={t(`ledger.category.${category}`)}
-						/>
-					))}
-				</Group>
-			</Checkbox.Group>
-			{data.items.length ? (
-				data.items.map((operation) => (
-					<OperationRow key={operation.id} operation={operation} />
-				))
-			) : (
-				<StateView
-					title={t("ledger.emptyTitle")}
-					text={t("ledger.emptyText")}
-				/>
-			)}
-			{data.hasNext || cursors.length ? (
-				<Group justify="space-between">
-					<Button
-						disabled={!cursors.length}
-						onClick={() => setCursors((value) => value.slice(0, -1))}
-					>
-						{t("ledger.previous")}
-					</Button>
-					<Button
-						disabled={!data.hasNext || !nextCursor}
-						onClick={() => {
-							if (nextCursor) setCursors((value) => [...value, nextCursor]);
-						}}
-					>
-						{t("ledger.next")}
-					</Button>
-				</Group>
-			) : null}
-		</Stack>
-	);
+	if (viewModel.state === "loading") return <AccountOperationsPageLoading />;
+	if (viewModel.state === "error")
+		return <AccountOperationsPageError {...viewModel} />;
+	return <AccountOperationsPageLoaded {...viewModel} />;
 };
 
-const OperationRow: FC<OperationRowProps> = (props) => {
-	const { operation } = props;
-	const { t } = useTranslation();
-
-	return (
-		<Card withBorder>
-			<Group justify="space-between" align="flex-start">
-				<Stack gap={2}>
-					<Text fw={700}>{operation.description || operation.type}</Text>
-					<Text c="dimmed" size="sm">
-						{formatSnapshotTime(operation.occurredAt)} ·{" "}
-						{operation.ticker ??
-							operation.instrumentType ??
-							t("ledger.noInstrument")}
-					</Text>
-				</Stack>
-				<Stack gap={2} align="end">
-					<Text fw={700}>
-						{operation.payment
-							? formatMoney(operation.payment)
-							: t("ledger.noMoney")}
-					</Text>
-					<Text c="dimmed" size="sm">
-						{t(`ledger.category.${operation.category}`)}
-					</Text>
-				</Stack>
-			</Group>
-		</Card>
-	);
-};
-
-export { AccountOperationsPage, OperationRow };
+export { AccountOperationsPage, LedgerEntryRow as OperationRow };