WealthLedger/frontend
5
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify frontend state and mutation boundaries
Frontend verify / commits (pull_request) Successful in 31s
Details
Frontend verify / security (pull_request) Successful in 11s
Details
Frontend verify / verify (pull_request) Successful in 9m1s
Details
Frontend verify / commits (push) Skipped
Details
Frontend verify / security (push) Successful in 10s
Details
Frontend verify / verify (push) Successful in 9m59s
Details

Browse Source
This commit was merged in pull request #44.
This commit is contained in:
ksv741
2026-09-28 20:01:37 +03:00
parent a4046dbe87
commit a7537da344
25 changed files with 414 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/card/ui/CardPage/CardPage.view.tsx
+29 -50
View File
@@ -41,7 +41,7 @@ type CardPageViewProps = { vm: CardPageVm };
const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
const { vm } = props;
const { t } = useTranslation();
const card = vm.card.data;
const card = vm.card;
if (!card) return;
@@ -70,11 +70,7 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
<Group gap={4} wrap="nowrap">
<ActionIcon
aria-label={t("bank.edit")}
disabled={
vm.history.isPlaceholderData
|| !row.editable
|| Boolean(card.archivedAt)
}
disabled={!row.editable}
onClick={row.onEdit}
size="sm"
title={t("bank.edit")}
@@ -86,11 +82,7 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
<ActionIcon
aria-label={t("bank.delete")}
color="red"
disabled={
vm.history.isPlaceholderData
|| !row.editable
|| Boolean(card.archivedAt)
}
disabled={!row.editable}
onClick={row.onDelete}
size="sm"
title={t("bank.delete")}
@@ -125,7 +117,7 @@ const CardPageViewHistory: FC<CardPageViewProps> = (props) => {
return <Text>{t("bank.noOperations")}</Text>;
}
if (vm.history.isLoading) {
if (vm.history.loading) {
return (
<LoadingSkeleton label={t("bank.loadingHistory")}>
<Stack>
@@ -142,24 +134,18 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
const { vm } = props;
const {
archiveActionLabel,
card,
getControlProps,
getItemProps,
onAddOperation,
onEditCard,
onPageChange,
onToggleArchive,
paginationRef,
retryCard,
retryCards,
retryHistory,
retrySummary,
t,
} = useCardPagePresentationVm(vm);
const { t } = useTranslation();
const card = vm.card;
const archiveActionLabel = t(card?.archivedAt ? "bank.restore" : "bank.archive");
if (!card) {
if (vm.card.isLoading)
if (vm.cardLoading)
return (
<LoadingSkeleton label={t("bank.loading")}>
<Stack>
@@ -184,7 +170,7 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
{t("bank.back")}
</Button>
{!vm.notFound && <Button onClick={retryCard}>{t("bank.retry")}</Button>}
{!vm.notFound && <Button onClick={vm.retryCard}>{t("bank.retry")}</Button>}
</Group>
)}
error
@@ -207,7 +193,7 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
<Group className={classes.cardActions} gap={4} wrap="nowrap">
<ActionIcon
aria-label={t("bank.editCard")}
onClick={onEditCard}
onClick={vm.openCardEditor}
radius="md"
size="md"
title={t("bank.editCard")}
@@ -220,7 +206,7 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
aria-label={archiveActionLabel}
color="red"
loading={vm.archivePending}
onClick={onToggleArchive}
onClick={vm.toggleArchive}
radius="md"
size="md"
title={archiveActionLabel}
@@ -234,40 +220,33 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
</div>
{!!vm.archiveError && (
<BankFeedback error={vm.archiveError} retry={retryCard} />
<BankFeedback error={vm.archiveError} retry={vm.retryCard} />
)}
{card.archivedAt && <Text>{t("bank.archiveHint")}</Text>}
</Stack>
{vm.card.isError && (
{vm.cardRefreshError && (
<Group role="alert">
<Text>{t("bank.refreshError")}</Text>
<Button onClick={retryCard}>{t("bank.retry")}</Button>
<Button onClick={vm.retryCard}>{t("bank.retry")}</Button>
</Group>
)}
{vm.card.isFetching && <Text role="status">{t("bank.refreshing")}</Text>}
{vm.cardRefreshing && <Text role="status">{t("bank.refreshing")}</Text>}
{vm.cards.isError && (
{vm.cardsFeedback && (
<BankFeedback
cached={Boolean(vm.cards.data)}
error={vm.cards.error}
{...vm.cardsFeedback}
loadingError
retry={retryCards}
retry={vm.retryCards}
/>
)}
<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
<BankSummaryView
data={vm.summary.data}
error={vm.summary.isError}
fetching={vm.summary.isFetching}
loading={vm.summary.isLoading}
retry={retrySummary}
/>
<BankSummaryView {...vm.summary} />
<Group align="end" justify="space-between">
<Group gap="xs">
@@ -275,8 +254,8 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
<ActionIcon
aria-label={t("bank.addOperation")}
disabled={Boolean(card.archivedAt) || !vm.cards.data}
onClick={onAddOperation}
disabled={!vm.canAddOperation}
onClick={vm.openNewOperation}
size="lg"
title={t("bank.addOperation")}
variant="subtle"
@@ -303,24 +282,24 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
</Group>
<Stack
aria-busy={vm.history.isFetching}
aria-busy={vm.history.refreshing}
className={classes.operations}
data-pending={vm.history.isPlaceholderData || undefined}
data-pending={vm.history.changingPage || undefined}
gap="lg"
key={`${vm.period.from}-${vm.period.to}-${vm.pageSize}-${vm.history.data?.page ?? "loading"}`}
key={`${vm.period.from}-${vm.period.to}-${vm.pageSize}-${vm.history.page ?? "loading"}`}
>
<CardPageViewHistory {...props} />
</Stack>
{vm.history.isError && (
{vm.history.error && (
<Group role="alert">
<Text>{t(vm.rows ? "bank.refreshError" : "bank.error")}</Text>
<Button onClick={retryHistory}>{t("bank.retry")}</Button>
<Button onClick={vm.history.retry}>{t("bank.retry")}</Button>
</Group>
)}
{vm.history.data && vm.pageSize !== "all" && (
{vm.history.page !== undefined && vm.pageSize !== "all" && (
<Group
aria-label={t("bank.pagination")}
component="nav"
@@ -329,7 +308,7 @@ const CardPageView: FC<CardPageViewProps> = (props) => {
ref={paginationRef}
>
<Pagination
disabled={vm.history.isFetching}
disabled={vm.history.refreshing}
getControlProps={getControlProps}
getItemProps={getItemProps}
onChange={onPageChange}