85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
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 };
|