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

refactor: enforce frontend view model boundaries
Frontend verify / commits (pull_request) Successful in 28s
Details
Frontend verify / security (pull_request) Successful in 10s
Details
Frontend verify / verify (pull_request) Successful in 8m19s
Details

Browse Source
This commit is contained in:
ksv741
2026-09-28 18:48:23 +03:00
parent 5b69003516
commit ca0ad4f824
287 changed files with 8558 additions and 4538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/stocks/ui/StocksPage/StocksPage.test.tsx
+1
View File
@@ -18,6 +18,7 @@ describe("stock search", () => {
server.use(
http.get("*/api/v1/stocks", ({ request }) => {
query(new URL(request.url).searchParams.get("query"));
return HttpResponse.json(
resource([
{
src/pages/stocks/ui/StocksPage/StocksPage.view.tsx
+126 -103
View File
@@ -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>
);
};
src/pages/stocks/ui/StocksPage/StocksPage.vm.ts
+6 -1
View File
@@ -9,6 +9,7 @@ import { instrumentLogoUrl } from "@/shared/lib";
const SEARCH_DEBOUNCE_MS = 300;
type StocksPageVm = ReturnType<typeof useStocksPageVm>;
function useStocksPageVm() {
const [parameters, setParameters] = useSearchParams();
const query = parameters.get("q") ?? "";
@@ -17,6 +18,7 @@ function useStocksPageVm() {
const sync = useScreenSync({ query: debounced, screen: "stocks" }, [result]);
const canSearch = query.trim().length >= MIN_STOCK_SEARCH_LENGTH;
const isWaiting = query.trim() !== debounced;
return {
canSearch,
code: apiErrorCode(result.error),
@@ -35,7 +37,10 @@ function useStocksPageVm() {
&& result.meta?.sync.state !== "failed")),
partial: result.meta?.availability === "partial",
query,
ready: debounced.length >= MIN_STOCK_SEARCH_LENGTH && !isWaiting && Boolean(result.data),
ready:
debounced.length >= MIN_STOCK_SEARCH_LENGTH
&& !isWaiting
&& Boolean(result.data),
refreshing: sync.refreshing,
retry: () => {
void sync.retry();
src/pages/stocks/ui/StocksPage/StocksPageView.vm.ts
+20
View File
@@ -0,0 +1,20 @@
import type { ComponentProps } from "react";
import { TextInput } from "@mantine/core";
import { useTranslation } from "react-i18next";
import type { StocksPageVm } from "./StocksPage.vm";
type StocksPageViewProps = { vm: StocksPageVm };
function useStocksPageViewVm(props: StocksPageViewProps) {
const { vm } = props;
const { t } = useTranslation();
const onChange: ComponentProps<typeof TextInput>["onChange"] = event =>
vm.setQuery(event.currentTarget.value);
return { onChange, t, vm };
}
export { useStocksPageViewVm };