refactor: enforce frontend view model boundaries
This commit is contained in:
@@ -24,113 +24,133 @@ import { formatMoney, formatSnapshotTime } from "@/shared/lib";
|
||||
import type { StocksPageVm } from "./StocksPage.vm";
|
||||
|
||||
import classes from "./StocksPage.module.css";
|
||||
import { useStocksPageViewVm } from "./StocksPageView.vm";
|
||||
|
||||
type StocksPageViewProps = { vm: StocksPageVm };
|
||||
const StocksPageView: FC<StocksPageViewProps> = (props) => {
|
||||
const { vm } = props;
|
||||
|
||||
const StocksPageViewResults: FC<StocksPageViewProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
function renderResults() {
|
||||
if (vm.loading) {
|
||||
return (
|
||||
<LoadingSkeleton label={t("stock.searching")}>
|
||||
<Stack>
|
||||
<Skeleton h={78} />
|
||||
<Skeleton h={78} />
|
||||
<Skeleton h={78} />
|
||||
</Stack>
|
||||
</LoadingSkeleton>
|
||||
);
|
||||
}
|
||||
if (!vm.ready) return;
|
||||
if (vm.items.length > 0) {
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.searchVariants")}
|
||||
</Text>
|
||||
{vm.items.map(stock => (
|
||||
<Paper
|
||||
className={classes.card}
|
||||
component={Link}
|
||||
key={stock.instrumentUid}
|
||||
to={stock.to}
|
||||
withBorder
|
||||
>
|
||||
<Avatar alt="" radius="md" size={48} src={stock.logoSrc}>
|
||||
{stock.name[0]}
|
||||
</Avatar>
|
||||
<div className={classes.identity}>
|
||||
<Text fw={600} size="lg">
|
||||
{stock.name}
|
||||
</Text>
|
||||
<Text c="dimmed" size="sm">
|
||||
{stock.ticker}
|
||||
{" "}
|
||||
·
|
||||
{" "}
|
||||
{t(`stock.shareTypes.${stock.shareType}`, {
|
||||
defaultValue: t("stock.share"),
|
||||
})}
|
||||
</Text>
|
||||
<Group gap="xs" mt="sm">
|
||||
<Badge color="gray" variant="light">
|
||||
{t(`stock.exchanges.${stock.realExchange}`, {
|
||||
defaultValue: t("stock.exchangeUnknown"),
|
||||
})}
|
||||
</Badge>
|
||||
{!!(stock.classCode) && ((
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.classCode", { code: stock.classCode })}
|
||||
</Text>
|
||||
))}
|
||||
</Group>
|
||||
{!!(stock.isin) && ((
|
||||
<Text c="dimmed" mt={4} size="xs">
|
||||
{t("stock.isin", { value: stock.isin })}
|
||||
</Text>
|
||||
))}
|
||||
{(stock.apiTradeAvailable === false) && ((
|
||||
<Text c="dimmed" mt={4} size="xs">
|
||||
{t("stock.apiUnavailable")}
|
||||
</Text>
|
||||
))}
|
||||
</div>
|
||||
<div className={classes.quote}>
|
||||
<Text fw={650} size="xl">
|
||||
{stock.price ? formatMoney(stock.price) : "—"}
|
||||
</Text>
|
||||
<Text c="dimmed" size="xs">
|
||||
{stock.price && stock.priceAt
|
||||
? t("stock.priceAt", {
|
||||
date: formatSnapshotTime(stock.priceAt),
|
||||
})
|
||||
: t("stock.priceUnavailable")}
|
||||
</Text>
|
||||
{(stock.apiTradeAvailable === true) && ((
|
||||
<Text c="green.8" mt="sm" size="xs">
|
||||
{t("stock.apiAvailable")}
|
||||
</Text>
|
||||
))}
|
||||
</div>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
const { vm } = props;
|
||||
|
||||
if (vm.loading) {
|
||||
return (
|
||||
<Text c="dimmed">
|
||||
{t(vm.partial ? "investment.partial" : "stock.noSearchResults")}
|
||||
</Text>
|
||||
<LoadingSkeleton label={t("stock.searching")}>
|
||||
<Stack>
|
||||
<Skeleton h={78} />
|
||||
|
||||
<Skeleton h={78} />
|
||||
|
||||
<Skeleton h={78} />
|
||||
</Stack>
|
||||
</LoadingSkeleton>
|
||||
);
|
||||
}
|
||||
|
||||
if (!vm.ready) return;
|
||||
|
||||
if (vm.items.length > 0) {
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.searchVariants")}
|
||||
</Text>
|
||||
|
||||
{vm.items.map(stock => (
|
||||
<Paper
|
||||
className={classes.card}
|
||||
component={Link}
|
||||
key={stock.instrumentUid}
|
||||
to={stock.to}
|
||||
withBorder
|
||||
>
|
||||
<Avatar alt="" radius="md" size={48} src={stock.logoSrc}>
|
||||
{stock.name[0]}
|
||||
</Avatar>
|
||||
|
||||
<div className={classes.identity}>
|
||||
<Text fw={600} size="lg">
|
||||
{stock.name}
|
||||
</Text>
|
||||
|
||||
<Text c="dimmed" size="sm">
|
||||
{stock.ticker} ·{" "}
|
||||
{t(`stock.shareTypes.${stock.shareType}`, {
|
||||
defaultValue: t("stock.share"),
|
||||
})}
|
||||
</Text>
|
||||
|
||||
<Group gap="xs" mt="sm">
|
||||
<Badge color="gray" variant="light">
|
||||
{t(`stock.exchanges.${stock.realExchange}`, {
|
||||
defaultValue: t("stock.exchangeUnknown"),
|
||||
})}
|
||||
</Badge>
|
||||
|
||||
{!!stock.classCode && (
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.classCode", { code: stock.classCode })}
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{!!stock.isin && (
|
||||
<Text c="dimmed" mt={4} size="xs">
|
||||
{t("stock.isin", { value: stock.isin })}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{stock.apiTradeAvailable === false && (
|
||||
<Text c="dimmed" mt={4} size="xs">
|
||||
{t("stock.apiUnavailable")}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={classes.quote}>
|
||||
<Text fw={650} size="xl">
|
||||
{stock.price ? formatMoney(stock.price) : "—"}
|
||||
</Text>
|
||||
|
||||
<Text c="dimmed" size="xs">
|
||||
{stock.price && stock.priceAt
|
||||
? t("stock.priceAt", {
|
||||
date: formatSnapshotTime(stock.priceAt),
|
||||
})
|
||||
: t("stock.priceUnavailable")}
|
||||
</Text>
|
||||
|
||||
{stock.apiTradeAvailable === true && (
|
||||
<Text c="green.8" mt="sm" size="xs">
|
||||
{t("stock.apiAvailable")}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Text c="dimmed">
|
||||
{t(vm.partial ? "investment.partial" : "stock.noSearchResults")}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const StocksPageView: FC<StocksPageViewProps> = (props) => {
|
||||
const { onChange, t, vm } = useStocksPageViewVm(props);
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
<div>
|
||||
<Title order={1}>{t("stock.searchTitle")}</Title>
|
||||
|
||||
<Text c="dimmed" mt="xs">
|
||||
{t("stock.searchSubtitle")}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
disabled={vm.refreshing || !vm.canSearch}
|
||||
onClick={vm.retry}
|
||||
@@ -138,21 +158,21 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
|
||||
>
|
||||
{t("investment.refresh")}
|
||||
</Button>
|
||||
{!!(vm.partial) && ((
|
||||
<Alert role="status">{t("investment.partial")}</Alert>
|
||||
))}
|
||||
|
||||
{!!vm.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
||||
|
||||
<TextInput
|
||||
label={t("stock.searchLabel")}
|
||||
maxLength={80}
|
||||
onChange={event => vm.setQuery(event.currentTarget.value)}
|
||||
onChange={onChange}
|
||||
placeholder={t("stock.searchPlaceholder")}
|
||||
size="md"
|
||||
value={vm.query}
|
||||
/>
|
||||
{!(vm.canSearch) && ((
|
||||
<Text c="dimmed">{t("stock.searchHint")}</Text>
|
||||
))}
|
||||
{!!(vm.error) && ((
|
||||
|
||||
{!vm.canSearch && <Text c="dimmed">{t("stock.searchHint")}</Text>}
|
||||
|
||||
{!!vm.error && (
|
||||
<Alert aria-live="polite" color="orange" role="status">
|
||||
<Stack gap="xs">
|
||||
<Text>
|
||||
@@ -163,16 +183,19 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
|
||||
: "stock.sectionError",
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<Anchor component={Link} to="/settings">
|
||||
{t("accounts.openSettings")}
|
||||
</Anchor>
|
||||
|
||||
<Button onClick={vm.retry} variant="default">
|
||||
{t("accounts.retry")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Alert>
|
||||
))}
|
||||
{renderResults()}
|
||||
)}
|
||||
|
||||
<StocksPageViewResults {...props} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user