chore: finish frontend ESLint migration #18
Enable every plugin recommended preset and replace Biome with ESLint formatting. Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.
This commit is contained in:
+111
-112
@@ -2,44 +2,44 @@ 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,
|
||||
type OperationCategory,
|
||||
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;
|
||||
};
|
||||
type AccountOperationsPageViewModel
|
||||
= | {
|
||||
canApply: boolean;
|
||||
draftCategories: OperationCategory[];
|
||||
draftFrom: null | string;
|
||||
draftTo: null | string;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
historyLoading?: boolean;
|
||||
items: BrokerageOperation[];
|
||||
lastSuccessfulAt?: null | string;
|
||||
onApply: () => void;
|
||||
onDraftCategoriesChange: (value: OperationCategory[]) => void;
|
||||
onDraftFromChange: (value: null | string) => void;
|
||||
onDraftToChange: (value: null | string) => void;
|
||||
onNext: () => void;
|
||||
onPrevious: () => void;
|
||||
onReset: () => void;
|
||||
partial?: boolean;
|
||||
refreshError?: boolean;
|
||||
refreshing?: boolean;
|
||||
retry?: () => void;
|
||||
sourceError?: boolean;
|
||||
state: "loaded";
|
||||
}
|
||||
| { onReset: () => void; retry: () => void; state: "error" }
|
||||
| { state: "loading" };
|
||||
|
||||
const useAccountOperationsPageVm = (
|
||||
scopeId?: string,
|
||||
@@ -47,19 +47,19 @@ const useAccountOperationsPageVm = (
|
||||
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 [searchParameters, setSearchParameters] = useSearchParams();
|
||||
const urlFrom = searchParameters.get("from");
|
||||
const urlTo = searchParameters.get("to");
|
||||
const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo);
|
||||
const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
|
||||
const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
|
||||
const appliedCategories = operationCategories.filter(category =>
|
||||
(searchParameters.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 [draftFrom, setDraftFrom] = useState<null | string>(appliedFrom);
|
||||
const [draftTo, setDraftTo] = useState<null | string>(appliedTo);
|
||||
const [draftCategories, setDraftCategories]
|
||||
= useState<OperationCategory[]>(appliedCategories);
|
||||
const scopeKey = JSON.stringify([
|
||||
accountId,
|
||||
urlFrom,
|
||||
@@ -67,147 +67,146 @@ const useAccountOperationsPageVm = (
|
||||
appliedCategories,
|
||||
]);
|
||||
const [pagination, setPagination] = useState<{
|
||||
scopeKey: string;
|
||||
cursors: string[];
|
||||
}>({ scopeKey, cursors: [] });
|
||||
scopeKey: string;
|
||||
}>({ cursors: [], scopeKey });
|
||||
const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : [];
|
||||
const cursor = cursors.at(-1);
|
||||
if (pagination.scopeKey !== scopeKey) {
|
||||
setPagination({ scopeKey, cursors: [] });
|
||||
setPagination({ cursors: [], scopeKey });
|
||||
}
|
||||
useEffect(() => {
|
||||
if (validUrlPeriod) return;
|
||||
const normalized = new URLSearchParams(searchParams);
|
||||
if (isValidUrlPeriod) return;
|
||||
const normalized = new URLSearchParams(searchParameters);
|
||||
normalized.delete("from");
|
||||
normalized.delete("to");
|
||||
setSearchParams(normalized, { replace: true });
|
||||
}, [validUrlPeriod, searchParams, setSearchParams]);
|
||||
const [previousSearch, setPreviousSearch] = useState(searchParams);
|
||||
if (previousSearch !== searchParams) {
|
||||
setPreviousSearch(searchParams);
|
||||
setSearchParameters(normalized, { replace: true });
|
||||
}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
|
||||
const [previousSearch, setPreviousSearch] = useState(searchParameters);
|
||||
if (previousSearch !== searchParameters) {
|
||||
setPreviousSearch(searchParameters);
|
||||
setDraftFrom(appliedFrom);
|
||||
setDraftTo(appliedTo);
|
||||
setDraftCategories(
|
||||
operationCategories.filter((category) =>
|
||||
(searchParams.get("categories") ?? "").split(",").includes(category),
|
||||
operationCategories.filter(category =>
|
||||
(searchParameters.get("categories") ?? "").split(",").includes(category),
|
||||
),
|
||||
);
|
||||
}
|
||||
const firstPageQuery = {
|
||||
from: dateStart(appliedFrom),
|
||||
to: dateEnd(appliedTo),
|
||||
...(appliedCategories.length ? { categories: appliedCategories } : {}),
|
||||
...((appliedCategories.length > 0) && { categories: appliedCategories }),
|
||||
limit: 100,
|
||||
};
|
||||
const operations = useBrokerageOperations(accountId, {
|
||||
...firstPageQuery,
|
||||
...(cursor ? { cursor } : {}),
|
||||
...(cursor && { cursor }),
|
||||
});
|
||||
const sync = useScreenSync(
|
||||
{ screen: "operations", accountId, ...firstPageQuery },
|
||||
{ accountId, screen: "operations", ...firstPageQuery },
|
||||
[operations],
|
||||
);
|
||||
if (operations.isLoading) return { state: "loading" };
|
||||
const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
|
||||
limit: 100,
|
||||
}).queryKey;
|
||||
|
||||
const resetCursors = () => setPagination({ scopeKey, cursors: [] });
|
||||
const resetCursors = () => setPagination({ cursors: [], scopeKey });
|
||||
const retry = () => {
|
||||
if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") {
|
||||
void queryClient.invalidateQueries({
|
||||
exact: true,
|
||||
queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
|
||||
.queryKey,
|
||||
exact: true,
|
||||
});
|
||||
resetCursors();
|
||||
} else void sync.retry();
|
||||
}
|
||||
else void sync.retry();
|
||||
};
|
||||
const onReset = () => {
|
||||
setDraftFrom(null);
|
||||
setDraftTo(null);
|
||||
setDraftCategories([]);
|
||||
setSearchParams({});
|
||||
setSearchParameters({});
|
||||
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")
|
||||
(operations.isError || operations.meta?.sync.state === "failed")
|
||||
&& (!operations.data
|
||||
|| apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR")
|
||||
)
|
||||
return { state: "error", retry, onReset };
|
||||
return { onReset, retry, state: "error" };
|
||||
if (!operations.data) return { state: "loading" };
|
||||
const nextCursor = operations.data.nextCursor;
|
||||
|
||||
const isDirty =
|
||||
draftFrom !== appliedFrom ||
|
||||
draftTo !== appliedTo ||
|
||||
!sameCategories(draftCategories, appliedCategories);
|
||||
const isDirty
|
||||
= draftFrom !== appliedFrom
|
||||
|| draftTo !== appliedTo
|
||||
|| !isSameCategories(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,
|
||||
canApply: isDirty && isValidPeriod(draftFrom, draftTo),
|
||||
draftCategories,
|
||||
draftFrom,
|
||||
draftTo,
|
||||
draftCategories,
|
||||
hasNext: Boolean(nextCursor && operations.data.hasNext),
|
||||
hasPrevious: cursors.length > 0,
|
||||
historyLoading:
|
||||
operations.meta?.coverage?.historyState === "loading"
|
||||
|| operations.meta?.coverage?.historyState === "partial",
|
||||
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,
|
||||
lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
|
||||
onApply: () => {
|
||||
if (!isValidPeriod(draftFrom, draftTo)) return;
|
||||
setSearchParams({
|
||||
...(draftFrom ? { from: draftFrom } : {}),
|
||||
...(draftTo ? { to: draftTo } : {}),
|
||||
...(draftCategories.length
|
||||
? { categories: draftCategories.join(",") }
|
||||
: {}),
|
||||
setSearchParameters({
|
||||
...(draftFrom && { from: draftFrom }),
|
||||
...(draftTo && { to: draftTo }),
|
||||
...((draftCategories.length > 0) && { categories: draftCategories.join(",") }),
|
||||
});
|
||||
resetCursors();
|
||||
},
|
||||
onReset,
|
||||
onDraftCategoriesChange: setDraftCategories,
|
||||
onDraftFromChange: setDraftFrom,
|
||||
onDraftToChange: setDraftTo,
|
||||
onNext: () => {
|
||||
if (nextCursor)
|
||||
setPagination({ scopeKey, cursors: [...cursors, nextCursor] });
|
||||
setPagination({ cursors: [...cursors, nextCursor], scopeKey });
|
||||
},
|
||||
onPrevious: () =>
|
||||
setPagination({ scopeKey, cursors: cursors.slice(0, -1) }),
|
||||
setPagination({ cursors: cursors.slice(0, -1), scopeKey }),
|
||||
onReset,
|
||||
partial: operations.meta?.availability !== "complete",
|
||||
refreshError: operations.isError || sync.sourceError || sync.transportError,
|
||||
refreshing: operations.isFetching || sync.refreshing,
|
||||
retry,
|
||||
sourceError: sync.sourceError,
|
||||
state: "loaded",
|
||||
};
|
||||
};
|
||||
|
||||
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) {
|
||||
const calendarDate = z.iso.date();
|
||||
function dateEnd(value: null | string) {
|
||||
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));
|
||||
function dateStart(value: null | string) {
|
||||
return value ? `${value}T00:00:00.000Z` : undefined;
|
||||
}
|
||||
|
||||
function isSameCategories(a: OperationCategory[], b: OperationCategory[]) {
|
||||
return a.length === b.length && a.every(value => b.includes(value));
|
||||
}
|
||||
|
||||
function isValidPeriod(from: null | string, to: null | string) {
|
||||
return (
|
||||
[from, to].every(
|
||||
date => date === null || calendarDate.safeParse(date).success,
|
||||
)
|
||||
&& (!from || !to || from <= to)
|
||||
);
|
||||
}
|
||||
|
||||
export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };
|
||||
|
||||
Reference in New Issue
Block a user