refactor: share instrument search presentation
This commit is contained in:
@@ -1,202 +1,89 @@
|
||||
import type { FC } from "react";
|
||||
|
||||
import {
|
||||
Alert,
|
||||
Anchor,
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||
import { Badge, Group, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
|
||||
import {
|
||||
InstrumentSearch,
|
||||
InstrumentSearchCard,
|
||||
} from "@/features/instrument-search";
|
||||
import { formatMoney, formatSnapshotTime } from "@/shared/lib";
|
||||
|
||||
import type { StocksPageVm } from "./StocksPage.vm";
|
||||
|
||||
import classes from "./StocksPage.module.css";
|
||||
|
||||
type StocksPageViewProps = { vm: StocksPageVm };
|
||||
|
||||
const StocksPageViewResults: FC<StocksPageViewProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { vm } = props;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Text c="dimmed">
|
||||
{t(vm.partial ? "investment.partial" : "stock.noSearchResults")}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const StocksPageView: FC<StocksPageViewProps> = (props) => {
|
||||
const { vm } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
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}
|
||||
w="fit-content"
|
||||
>
|
||||
{t("investment.refresh")}
|
||||
</Button>
|
||||
|
||||
{!!vm.partial && <Alert role="status">{t("investment.partial")}</Alert>}
|
||||
|
||||
<TextInput
|
||||
label={t("stock.searchLabel")}
|
||||
maxLength={80}
|
||||
onChange={vm.onQueryChange}
|
||||
placeholder={t("stock.searchPlaceholder")}
|
||||
size="md"
|
||||
value={vm.query}
|
||||
/>
|
||||
|
||||
{!vm.canSearch && <Text c="dimmed">{t("stock.searchHint")}</Text>}
|
||||
|
||||
{!!vm.error && (
|
||||
<Alert aria-live="polite" color="orange" role="status">
|
||||
<Stack gap="xs">
|
||||
<Text>
|
||||
{t(
|
||||
isApiErrorCode(vm.code, ApiErrorCode.TbankNotConnected)
|
||||
|| isApiErrorCode(vm.code, ApiErrorCode.InvalidTbankToken)
|
||||
? "stock.connect"
|
||||
: "stock.sectionError",
|
||||
)}
|
||||
<InstrumentSearch kind="stock" vm={vm}>
|
||||
{vm.items.map((stock) => {
|
||||
const quote = (
|
||||
<>
|
||||
<Text fw={650} size="xl">
|
||||
{stock.price ? formatMoney(stock.price) : "—"}
|
||||
</Text>
|
||||
|
||||
<Anchor component={Link} to="/settings">
|
||||
{t("accounts.openSettings")}
|
||||
</Anchor>
|
||||
<Text c="dimmed" size="xs">
|
||||
{stock.price && stock.priceAt
|
||||
? t("stock.priceAt", {
|
||||
date: formatSnapshotTime(stock.priceAt),
|
||||
})
|
||||
: t("stock.priceUnavailable")}
|
||||
</Text>
|
||||
|
||||
<Button onClick={vm.retry} variant="default">
|
||||
{t("accounts.retry")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Alert>
|
||||
)}
|
||||
{stock.apiTradeAvailable === true && (
|
||||
<Text c="green.8" mt="sm" size="xs">
|
||||
{t("stock.apiAvailable")}
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
<StocksPageViewResults {...props} />
|
||||
</Stack>
|
||||
return (
|
||||
<InstrumentSearchCard
|
||||
instrument={stock}
|
||||
key={stock.instrumentUid}
|
||||
quote={quote}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</InstrumentSearchCard>
|
||||
);
|
||||
})}
|
||||
</InstrumentSearch>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user