feat: add all-accounts portfolio pages
Reuse account sections and group securities with per-account holdings. Use Mantine Select to preserve filters and reset pagination on scope changes. Document component reuse guardrails and cover routes, grouping and scope switching.
This commit is contained in:
@@ -4,8 +4,10 @@ import { AccountOperationsPageError } from "./components/AccountOperationsPageEr
|
||||
import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageLoaded.view";
|
||||
import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
|
||||
|
||||
const AccountOperationsPage: FC = () => {
|
||||
const viewModel = useAccountOperationsPageVm();
|
||||
type AccountOperationsPageProps = { accountId?: string };
|
||||
|
||||
const AccountOperationsPage: FC<AccountOperationsPageProps> = (props) => {
|
||||
const viewModel = useAccountOperationsPageVm(props.accountId);
|
||||
|
||||
if (viewModel.state === "loading") {
|
||||
return <AccountOperationsPageLoading />;
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
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[];
|
||||
@@ -29,37 +35,76 @@ type AccountOperationsPageViewModel =
|
||||
onPrevious: () => void;
|
||||
};
|
||||
|
||||
const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
||||
const { accountId } = useParams();
|
||||
const useAccountOperationsPageVm = (
|
||||
scopeId?: string,
|
||||
): AccountOperationsPageViewModel => {
|
||||
const { accountId: routeAccountId } = useParams();
|
||||
const accountId = scopeId ?? routeAccountId;
|
||||
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 [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 [cursors, setCursors] = useState<string[]>([]);
|
||||
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);
|
||||
const operations = useBrokerageOperations(accountId, {
|
||||
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 } : {}),
|
||||
...(cursor ? { cursor } : {}),
|
||||
limit: 100,
|
||||
};
|
||||
const operations = useBrokerageOperations(accountId, {
|
||||
...firstPageQuery,
|
||||
...(cursor ? { cursor } : {}),
|
||||
});
|
||||
const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
|
||||
limit: 100,
|
||||
}).queryKey;
|
||||
|
||||
const resetCursors = () => setCursors([]);
|
||||
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)
|
||||
return { state: "error", retry: () => operations.refetch() };
|
||||
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;
|
||||
|
||||
@@ -70,6 +115,9 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
||||
|
||||
return {
|
||||
state: "loaded",
|
||||
refreshing: operations.isFetching,
|
||||
refreshError: operations.isError,
|
||||
retry,
|
||||
draftFrom,
|
||||
draftTo,
|
||||
draftCategories,
|
||||
@@ -81,25 +129,29 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
|
||||
onDraftToChange: setDraftTo,
|
||||
onDraftCategoriesChange: setDraftCategories,
|
||||
onApply: () => {
|
||||
setAppliedFrom(draftFrom);
|
||||
setAppliedTo(draftTo);
|
||||
setAppliedCategories(draftCategories);
|
||||
setSearchParams({
|
||||
...(draftFrom ? { from: draftFrom } : {}),
|
||||
...(draftTo ? { to: draftTo } : {}),
|
||||
...(draftCategories.length
|
||||
? { categories: draftCategories.join(",") }
|
||||
: {}),
|
||||
});
|
||||
resetCursors();
|
||||
},
|
||||
onReset: () => {
|
||||
setDraftFrom(null);
|
||||
setDraftTo(null);
|
||||
setDraftCategories([]);
|
||||
setAppliedFrom(null);
|
||||
setAppliedTo(null);
|
||||
setAppliedCategories([]);
|
||||
setSearchParams({});
|
||||
resetCursors();
|
||||
void queryClient.invalidateQueries({ queryKey: resetQueryKey });
|
||||
},
|
||||
onNext: () => {
|
||||
if (nextCursor) setCursors((value) => [...value, nextCursor]);
|
||||
if (nextCursor)
|
||||
setPagination({ scopeKey, cursors: [...cursors, nextCursor] });
|
||||
},
|
||||
onPrevious: () => setCursors((value) => value.slice(0, -1)),
|
||||
onPrevious: () =>
|
||||
setPagination({ scopeKey, cursors: cursors.slice(0, -1) }),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import { Button, Group, MultiSelect, Stack, Title } from "@mantine/core";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Group,
|
||||
MultiSelect,
|
||||
Progress,
|
||||
Stack,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { DateInput } from "@mantine/dates";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -67,6 +75,17 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
|
||||
return (
|
||||
<Stack maw={960} gap="lg">
|
||||
<Title order={1}>{t("ledger.title")}</Title>
|
||||
{props.refreshing ? (
|
||||
<Progress value={100} animated aria-label={t("accounts.refreshing")} />
|
||||
) : null}
|
||||
{props.refreshError ? (
|
||||
<Alert color="yellow">
|
||||
{t("accounts.refreshError")}
|
||||
<Button variant="subtle" onClick={props.retry}>
|
||||
{t("accounts.retry")}
|
||||
</Button>
|
||||
</Alert>
|
||||
) : null}
|
||||
<Group align="end">
|
||||
<DateInput
|
||||
label={t("ledger.from")}
|
||||
@@ -103,7 +122,14 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
|
||||
</Group>
|
||||
{items.length ? (
|
||||
items.map((operation) => (
|
||||
<LedgerEntryRow key={operation.id} operation={operation} />
|
||||
<LedgerEntryRow
|
||||
key={JSON.stringify([
|
||||
operation.account?.id,
|
||||
operation.id,
|
||||
operation.logoName,
|
||||
])}
|
||||
operation={operation}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<StateView
|
||||
|
||||
Reference in New Issue
Block a user