refactor: colocate frontend component files

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

@@ -0,0 +1,170 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useParams, useSearchParams } from "react-router";
+import {
+	type BrokerageOperation,
+	brokerageOperationsQueryOptions,
+	type OperationCategory,
+	operationCategories,
+	useBrokerageOperations,
+} from "@/entities/broker-operation";
+
+import { apiErrorCode } from "@/shared/api";
+
+type AccountOperationsPageViewModel =
+	| { state: "loading" }
+	| { state: "error"; retry: () => void }
+	| {
+			state: "loaded";
+			refreshing?: boolean;
+			refreshError?: boolean;
+			retry?: () => void;
+			draftFrom: string | null;
+			draftTo: string | null;
+			draftCategories: OperationCategory[];
+			items: BrokerageOperation[];
+			hasNext: boolean;
+			hasPrevious: boolean;
+			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 = (
+	scopeId?: string,
+): AccountOperationsPageViewModel => {
+	const { accountId: routeAccountId } = useParams();
+	const accountId = scopeId ?? routeAccountId;
+	const queryClient = useQueryClient();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const appliedFrom = searchParams.get("from");
+	const appliedTo = searchParams.get("to");
+	const appliedCategories = operationCategories.filter((category) =>
+		(searchParams.get("categories") ?? "").split(",").includes(category),
+	);
+	const [draftFrom, setDraftFrom] = useState<string | null>(appliedFrom);
+	const [draftTo, setDraftTo] = useState<string | null>(appliedTo);
+	const [draftCategories, setDraftCategories] =
+		useState<OperationCategory[]>(appliedCategories);
+	const scopeKey = JSON.stringify([
+		accountId,
+		appliedFrom,
+		appliedTo,
+		appliedCategories,
+	]);
+	const [pagination, setPagination] = useState<{
+		scopeKey: string;
+		cursors: string[];
+	}>({ scopeKey, cursors: [] });
+	const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : [];
+	const cursor = cursors.at(-1);
+	useEffect(() => {
+		setDraftFrom(searchParams.get("from"));
+		setDraftTo(searchParams.get("to"));
+		setDraftCategories(
+			operationCategories.filter((category) =>
+				(searchParams.get("categories") ?? "").split(",").includes(category),
+			),
+		);
+	}, [searchParams]);
+	const firstPageQuery = {
+		from: dateStart(appliedFrom),
+		to: dateEnd(appliedTo),
+		...(appliedCategories.length ? { categories: appliedCategories } : {}),
+		limit: 100,
+	};
+	const operations = useBrokerageOperations(accountId, {
+		...firstPageQuery,
+		...(cursor ? { cursor } : {}),
+	});
+	const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
+		limit: 100,
+	}).queryKey;
+
+	const resetCursors = () => setPagination({ scopeKey, cursors: [] });
+	const retry = () => {
+		if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") {
+			void queryClient.invalidateQueries({
+				queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
+					.queryKey,
+				exact: true,
+			});
+			resetCursors();
+		} else void operations.refetch();
+	};
+
+	if (operations.isLoading) return { state: "loading" };
+	if (
+		operations.isError &&
+		(!operations.data ||
+			apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR")
+	)
+		return { state: "error", retry };
+	if (!operations.data) return { state: "loading" };
+	const nextCursor = operations.data.nextCursor;
+
+	const isDirty =
+		draftFrom !== appliedFrom ||
+		draftTo !== appliedTo ||
+		!sameCategories(draftCategories, appliedCategories);
+
+	return {
+		state: "loaded",
+		refreshing: operations.isFetching,
+		refreshError: operations.isError,
+		retry,
+		draftFrom,
+		draftTo,
+		draftCategories,
+		items: operations.data.items,
+		hasNext: Boolean(operations.data.hasNext && nextCursor),
+		hasPrevious: Boolean(cursors.length),
+		canApply: isDirty,
+		onDraftFromChange: setDraftFrom,
+		onDraftToChange: setDraftTo,
+		onDraftCategoriesChange: setDraftCategories,
+		onApply: () => {
+			setSearchParams({
+				...(draftFrom ? { from: draftFrom } : {}),
+				...(draftTo ? { to: draftTo } : {}),
+				...(draftCategories.length
+					? { categories: draftCategories.join(",") }
+					: {}),
+			});
+			resetCursors();
+		},
+		onReset: () => {
+			setDraftFrom(null);
+			setDraftTo(null);
+			setDraftCategories([]);
+			setSearchParams({});
+			resetCursors();
+			void queryClient.invalidateQueries({ queryKey: resetQueryKey });
+		},
+		onNext: () => {
+			if (nextCursor)
+				setPagination({ scopeKey, cursors: [...cursors, nextCursor] });
+		},
+		onPrevious: () =>
+			setPagination({ scopeKey, cursors: cursors.slice(0, -1) }),
+	};
+};
+
+function dateStart(value: string | null) {
+	return value ? `${value}T00:00:00.000Z` : undefined;
+}
+
+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 };