feat(account-operations): require explicit ledger filters

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

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useParams } from "react-router";
 import {
@@ -5,40 +6,58 @@ import {
 	type OperationCategory,
 	useBrokerageOperations,
 } from "@/entities/broker-operation";
+import { apiQueryClient } from "@/shared/api";
 
 type AccountOperationsPageViewModel =
 	| { state: "loading" }
 	| { state: "error"; retry: () => void }
 	| {
 			state: "loaded";
-			from: string;
-			to: string;
-			categories: OperationCategory[];
+			draftFrom: string | null;
+			draftTo: string | null;
+			draftCategories: OperationCategory[];
 			items: BrokerageOperation[];
 			hasNext: boolean;
 			hasPrevious: boolean;
-			onFromChange: (value: string) => void;
-			onToChange: (value: string) => void;
-			onCategoriesChange: (value: OperationCategory[]) => void;
+			canApply: boolean;
+			onDraftFromChange: (value: string | null) => void;
+			onDraftToChange: (value: string | null) => void;
+			onDraftCategoriesChange: (value: OperationCategory[]) => void;
+			onApply: () => void;
+			onReset: () => 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 queryClient = useQueryClient();
+	const [appliedFrom, setAppliedFrom] = useState<string | null>(null);
+	const [appliedTo, setAppliedTo] = useState<string | null>(null);
+	const [appliedCategories, setAppliedCategories] = useState<
+		OperationCategory[]
+	>([]);
+	const [draftFrom, setDraftFrom] = useState<string | null>(null);
+	const [draftTo, setDraftTo] = useState<string | null>(null);
+	const [draftCategories, setDraftCategories] = 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 } : {}),
+		from: dateStart(appliedFrom),
+		to: dateEnd(appliedTo),
+		...(appliedCategories.length ? { categories: appliedCategories } : {}),
 		...(cursor ? { cursor } : {}),
 		limit: 100,
 	});
-	const reset = () => setCursors([]);
+	const resetQueryKey = apiQueryClient.queryOptions(
+		"get",
+		"/api/v1/brokerage-accounts/{accountId}/operations",
+		{ params: { path: { accountId: accountId ?? "" }, query: { limit: 100 } } },
+	).queryKey;
+
+	const resetCursors = () => setCursors([]);
 
 	if (operations.isLoading) return { state: "loading" };
 	if (operations.isError)
@@ -46,25 +65,38 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 	if (!operations.data) return { state: "loading" };
 	const nextCursor = operations.data.nextCursor;
 
+	const isDirty =
+		draftFrom !== appliedFrom ||
+		draftTo !== appliedTo ||
+		!sameCategories(draftCategories, appliedCategories);
+
 	return {
 		state: "loaded",
-		from,
-		to,
-		categories,
+		draftFrom,
+		draftTo,
+		draftCategories,
 		items: operations.data.items,
 		hasNext: Boolean(operations.data.hasNext && nextCursor),
 		hasPrevious: Boolean(cursors.length),
-		onFromChange: (value) => {
-			setFrom(value);
-			reset();
+		canApply: isDirty,
+		onDraftFromChange: setDraftFrom,
+		onDraftToChange: setDraftTo,
+		onDraftCategoriesChange: setDraftCategories,
+		onApply: () => {
+			setAppliedFrom(draftFrom);
+			setAppliedTo(draftTo);
+			setAppliedCategories(draftCategories);
+			resetCursors();
 		},
-		onToChange: (value) => {
-			setTo(value);
-			reset();
-		},
-		onCategoriesChange: (value) => {
-			setCategories(value);
-			reset();
+		onReset: () => {
+			setDraftFrom(null);
+			setDraftTo(null);
+			setDraftCategories([]);
+			setAppliedFrom(null);
+			setAppliedTo(null);
+			setAppliedCategories([]);
+			resetCursors();
+			void queryClient.invalidateQueries({ queryKey: resetQueryKey });
 		},
 		onNext: () => {
 			if (nextCursor) setCursors((value) => [...value, nextCursor]);
@@ -73,12 +105,16 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 	};
 };
 
-function dateStart(value: string) {
+function dateStart(value: string | null) {
 	return value ? `${value}T00:00:00.000Z` : undefined;
 }
 
-function dateEnd(value: string) {
+function dateEnd(value: string | null) {
 	return value ? `${value}T23:59:59.999Z` : undefined;
 }
 
+function sameCategories(a: OperationCategory[], b: OperationCategory[]) {
+	return a.length === b.length && a.every((value) => b.includes(value));
+}
+
 export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };