refactor: share source sync status presentation
This commit is contained in:
+2
-8
@@ -16,7 +16,7 @@ import {
|
||||
BrokerageEventCard,
|
||||
brokerageEventKey,
|
||||
} from "@/entities/brokerage-event";
|
||||
import { formatSnapshotTime } from "@/shared/lib";
|
||||
import { SourceSyncStatus } from "@/shared/ui";
|
||||
|
||||
import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
|
||||
|
||||
@@ -55,13 +55,7 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{!!props.lastSuccessfulAt && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(props.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
||||
|
||||
<Title order={1}>{t("events.title")}</Title>
|
||||
|
||||
|
||||
+2
-8
@@ -13,7 +13,7 @@ import { StateView } from "@wealthledger/ui";
|
||||
import { FormProvider } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { formatSnapshotTime } from "@/shared/lib";
|
||||
import { SourceSyncStatus } from "@/shared/ui";
|
||||
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
|
||||
@@ -47,13 +47,7 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Stack className={classes.page} gap="lg">
|
||||
{!!props.lastSuccessfulAt && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(props.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
||||
|
||||
<Title order={1}>{t("income.title")}</Title>
|
||||
|
||||
|
||||
+2
-9
@@ -7,7 +7,6 @@ import {
|
||||
MultiSelect,
|
||||
Progress,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { DatePickerInput } from "@mantine/dates";
|
||||
@@ -15,7 +14,7 @@ import { StateView } from "@wealthledger/ui";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
|
||||
import { formatSnapshotTime } from "@/shared/lib";
|
||||
import { SourceSyncStatus } from "@/shared/ui";
|
||||
|
||||
import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
|
||||
|
||||
@@ -63,13 +62,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{!!props.lastSuccessfulAt && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(props.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
<SourceSyncStatus lastSuccessfulAt={props.lastSuccessfulAt} />
|
||||
|
||||
<Title order={1}>{t("ledger.title")}</Title>
|
||||
|
||||
|
||||
@@ -7,7 +7,8 @@ import { Link } from "react-router";
|
||||
|
||||
import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
|
||||
|
||||
import { formatMoney, formatSnapshotTime } from "@/shared/lib";
|
||||
import { formatMoney } from "@/shared/lib";
|
||||
import { SourceSyncStatus } from "@/shared/ui";
|
||||
|
||||
type IncomeSummaryProps
|
||||
= | {
|
||||
@@ -25,6 +26,12 @@ type IncomeSummaryProps
|
||||
|
||||
const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const errorText
|
||||
= props.state === "loaded" && props.refreshError
|
||||
? t("income.refreshError")
|
||||
: null;
|
||||
|
||||
if (props.state === "loading" || props.state === "partial")
|
||||
return (
|
||||
<Text c="dimmed" role="status">
|
||||
@@ -59,17 +66,11 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
{!!props.lastSuccessfulAt && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(props.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{!!props.stale && <Text size="xs">{t("investment.stale")}</Text>}
|
||||
|
||||
{!!props.refreshError && <Text role="status">{t("income.refreshError")}</Text>}
|
||||
<SourceSyncStatus
|
||||
errorText={errorText}
|
||||
lastSuccessfulAt={props.lastSuccessfulAt}
|
||||
stale={props.stale}
|
||||
/>
|
||||
|
||||
{props.summary.totalsByCurrency.map(total => (
|
||||
<Paper key={total.currency} p="sm" withBorder>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { LedgerEntryRow } from "@/entities/broker-operation";
|
||||
import { formatSnapshotTime } from "@/shared/lib";
|
||||
import { SourceSyncStatus } from "@/shared/ui";
|
||||
|
||||
import type { AccountPageRecentOperations } from "../../../model/previews";
|
||||
|
||||
@@ -18,22 +18,19 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { operations } = props;
|
||||
|
||||
const errorText
|
||||
= operations.state === "loaded" && operations.refreshError
|
||||
? t("accounts.refreshError")
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
{operations.state === "loaded" && (
|
||||
<>
|
||||
{!!operations.lastSuccessfulAt && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(operations.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{!!operations.stale && <Text size="xs">{t("investment.stale")}</Text>}
|
||||
|
||||
{!!operations.refreshError && <Text role="status">{t("accounts.refreshError")}</Text>}
|
||||
</>
|
||||
<SourceSyncStatus
|
||||
errorText={errorText}
|
||||
lastSuccessfulAt={operations.lastSuccessfulAt}
|
||||
stale={operations.stale}
|
||||
/>
|
||||
)}
|
||||
|
||||
{operations.state === "loading" && (
|
||||
|
||||
Reference in New Issue
Block a user