feat: improve ledger event rows

src/pages/account-operations/ui/AccountOperationsPage.vm.ts

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { useParams } from "react-router";
+import {
+	type BrokerageOperation,
+	type OperationCategory,
+	useBrokerageOperations,
+} from "@/entities/broker-operation";
+
+type AccountOperationsPageViewModel =
+	| { state: "loading" }
+	| { state: "error"; retry: () => void }
+	| {
+			state: "loaded";
+			from: string;
+			to: string;
+			categories: OperationCategory[];
+			items: BrokerageOperation[];
+			hasNext: boolean;
+			hasPrevious: boolean;
+			onFromChange: (value: string) => void;
+			onToChange: (value: string) => void;
+			onCategoriesChange: (value: OperationCategory[]) => void;
+			onNext: () => void;
+			onPrevious: () => void;
+	  };
+
+const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
+	const { accountId } = useParams();
+	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([]);
+
+	if (operations.isLoading) return { state: "loading" };
+	if (operations.isError)
+		return { state: "error", retry: () => operations.refetch() };
+	if (!operations.data) return { state: "loading" };
+	const nextCursor = operations.data.nextCursor;
+
+	return {
+		state: "loaded",
+		from,
+		to,
+		categories,
+		items: operations.data.items,
+		hasNext: Boolean(operations.data.hasNext && nextCursor),
+		hasPrevious: Boolean(cursors.length),
+		onFromChange: (value) => {
+			setFrom(value);
+			reset();
+		},
+		onToChange: (value) => {
+			setTo(value);
+			reset();
+		},
+		onCategoriesChange: (value) => {
+			setCategories(value);
+			reset();
+		},
+		onNext: () => {
+			if (nextCursor) setCursors((value) => [...value, nextCursor]);
+		},
+		onPrevious: () => setCursors((value) => value.slice(0, -1)),
+	};
+};
+
+function dateStart(value: string) {
+	return value ? `${value}T00:00:00.000Z` : undefined;
+}
+
+function dateEnd(value: string) {
+	return value ? `${value}T23:59:59.999Z` : undefined;
+}
+
+export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };