import { useQueryClient } from "@tanstack/react-query"; import { useEffect, useState } from "react"; import { useParams, useSearchParams } from "react-router"; import { z } from "zod"; import { type BrokerageOperation, brokerageOperationsQueryOptions, type OperationCategory, operationCategories, useBrokerageOperations, } from "@/entities/broker-operation"; import { useScreenSync } from "@/features/tbank-connection"; import { apiErrorCode } from "@/shared/api"; type AccountOperationsPageViewModel = | { state: "loading" } | { state: "error"; retry: () => void; onReset: () => void } | { state: "loaded"; sourceError?: boolean; lastSuccessfulAt?: string | null; partial?: boolean; historyLoading?: boolean; 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 urlFrom = searchParams.get("from"); const urlTo = searchParams.get("to"); const validUrlPeriod = isValidPeriod(urlFrom, urlTo); const appliedFrom = validUrlPeriod ? urlFrom : null; const appliedTo = validUrlPeriod ? urlTo : null; const appliedCategories = operationCategories.filter((category) => (searchParams.get("categories") ?? "").split(",").includes(category), ); const [draftFrom, setDraftFrom] = useState(appliedFrom); const [draftTo, setDraftTo] = useState(appliedTo); const [draftCategories, setDraftCategories] = useState(appliedCategories); const scopeKey = JSON.stringify([ accountId, urlFrom, urlTo, appliedCategories, ]); const [pagination, setPagination] = useState<{ scopeKey: string; cursors: string[]; }>({ scopeKey, cursors: [] }); const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : []; const cursor = cursors.at(-1); useEffect(() => { setPagination((current) => current.scopeKey === scopeKey ? current : { scopeKey, cursors: [] }, ); }, [scopeKey]); useEffect(() => { if (validUrlPeriod) return; const normalized = new URLSearchParams(searchParams); normalized.delete("from"); normalized.delete("to"); setSearchParams(normalized, { replace: true }); }, [validUrlPeriod, searchParams, setSearchParams]); useEffect(() => { setDraftFrom(appliedFrom); setDraftTo(appliedTo); setDraftCategories( operationCategories.filter((category) => (searchParams.get("categories") ?? "").split(",").includes(category), ), ); }, [appliedFrom, appliedTo, searchParams]); const firstPageQuery = { from: dateStart(appliedFrom), to: dateEnd(appliedTo), ...(appliedCategories.length ? { categories: appliedCategories } : {}), limit: 100, }; const operations = useBrokerageOperations(accountId, { ...firstPageQuery, ...(cursor ? { cursor } : {}), }); const sync = useScreenSync( { screen: "operations", accountId, ...firstPageQuery }, [operations], ); 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 sync.retry(); }; const onReset = () => { setDraftFrom(null); setDraftTo(null); setDraftCategories([]); setSearchParams({}); resetCursors(); void queryClient.invalidateQueries({ queryKey: resetQueryKey }); }; if (operations.isLoading) return { state: "loading" }; if ( (operations.isError || operations.meta?.sync.state === "failed") && (!operations.data || apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") ) return { state: "error", retry, onReset }; if (!operations.data) return { state: "loading" }; const nextCursor = operations.data.nextCursor; const isDirty = draftFrom !== appliedFrom || draftTo !== appliedTo || !sameCategories(draftCategories, appliedCategories); return { state: "loaded", sourceError: sync.sourceError, lastSuccessfulAt: operations.meta?.lastSuccessfulAt, partial: operations.meta?.availability !== "complete", historyLoading: operations.meta?.coverage?.historyState === "loading" || operations.meta?.coverage?.historyState === "partial", refreshing: operations.isFetching || sync.refreshing, refreshError: operations.isError || sync.sourceError || sync.transportError, retry, draftFrom, draftTo, draftCategories, items: operations.data.items, hasNext: Boolean(operations.data.hasNext && nextCursor), hasPrevious: Boolean(cursors.length), canApply: isDirty && isValidPeriod(draftFrom, draftTo), onDraftFromChange: setDraftFrom, onDraftToChange: setDraftTo, onDraftCategoriesChange: setDraftCategories, onApply: () => { if (!isValidPeriod(draftFrom, draftTo)) return; setSearchParams({ ...(draftFrom ? { from: draftFrom } : {}), ...(draftTo ? { to: draftTo } : {}), ...(draftCategories.length ? { categories: draftCategories.join(",") } : {}), }); resetCursors(); }, onReset, onNext: () => { if (nextCursor) setPagination({ scopeKey, cursors: [...cursors, nextCursor] }); }, onPrevious: () => setPagination({ scopeKey, cursors: cursors.slice(0, -1) }), }; }; const calendarDate = z.string().date(); function isValidPeriod(from: string | null, to: string | null) { return ( [from, to].every( (date) => date === null || calendarDate.safeParse(date).success, ) && (!from || !to || from <= to) ); } 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 };