refactor: share instrument search presentation

src/features/instrument-search/ui/InstrumentSearch/InstrumentSearch.test.tsx

@@ -0,0 +1,61 @@
+import type { ComponentProps } from "react";
+
+import { MantineProvider } from "@mantine/core";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { expect, it, vi } from "vitest";
+
+import { InstrumentSearch } from "./InstrumentSearch.view";
+
+it("keeps cached results on failure, hides them during a new search and distinguishes partial from empty", () => {
+	const vm = {
+		canSearch: true,
+		error: false,
+		loading: false,
+		onQueryChange: vi.fn(),
+		partial: false,
+		query: "SBER",
+		ready: true,
+		refreshing: false,
+		retry: vi.fn(),
+	};
+
+	const cached = [<a href="/stocks/SBER" key="SBER">Сбербанк</a>];
+
+	const view = (
+		state: Partial<ComponentProps<typeof InstrumentSearch>["vm"]>,
+		children = cached,
+	) => (
+		<InstrumentSearch kind="stock" vm={{ ...vm, ...state }}>
+			{children}
+		</InstrumentSearch>
+	);
+
+	const { rerender } = render(view({}), {
+		wrapper: ({ children }) => (
+			<MantineProvider>
+				<MemoryRouter>{children}</MemoryRouter>
+			</MantineProvider>
+		),
+	});
+
+	rerender(view({ code: "INVALID_TBANK_TOKEN", error: true }));
+	expect(screen.getByRole("link", { name: "Сбербанк" })).toBeVisible();
+	expect(
+		screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
+	).toHaveAttribute("href", "/settings");
+	fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
+	expect(vm.retry).toHaveBeenCalledOnce();
+
+	rerender(view({ loading: true, ready: false }));
+	expect(screen.queryByRole("link", { name: "Сбербанк" })).not.toBeInTheDocument();
+	expect(screen.getByLabelText("Ищем акции")).toBeVisible();
+
+	rerender(view({ partial: true }, []));
+	expect(screen.queryByText(/Акции не найдены/)).not.toBeInTheDocument();
+	expect(screen.getByRole("status")).toBeVisible();
+
+	rerender(view({}, []));
+	expect(screen.queryByRole("status")).not.toBeInTheDocument();
+	expect(screen.getByText(/Акции не найдены/)).toBeVisible();
+});

src/features/instrument-search/ui/InstrumentSearch/InstrumentSearch.view.tsx

@@ -0,0 +1,129 @@
+import type { ChangeEvent, FC, ReactNode } from "react";
+
+import {
+	Alert,
+	Anchor,
+	Button,
+	Skeleton,
+	Stack,
+	Text,
+	TextInput,
+	Title,
+} from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
+
+type InstrumentSearchProps = {
+	children: ReactNode[];
+	kind: "bond" | "stock";
+	vm: {
+		canSearch: boolean;
+		code?: string;
+		error: boolean;
+		loading: boolean;
+		onQueryChange: (event: ChangeEvent<HTMLInputElement>) => void;
+		partial: boolean;
+		query: string;
+		ready: boolean;
+		refreshing: boolean;
+		retry: () => void;
+	};
+};
+
+const InstrumentSearchResults: FC<InstrumentSearchProps> = (props) => {
+	const { children, kind, vm } = props;
+	const { t } = useTranslation();
+	if (vm.loading) return (
+		<LoadingSkeleton label={t(`${kind}.searching`)}>
+			<Stack>
+				<Skeleton h={78} />
+
+				<Skeleton h={78} />
+
+				<Skeleton h={78} />
+			</Stack>
+		</LoadingSkeleton>
+	);
+	if (!vm.ready) return;
+	if (children.length > 0) return (
+		<Stack gap="sm">
+			<Text c="dimmed" size="xs">{t(`${kind}.searchVariants`)}</Text>
+
+			{children}
+		</Stack>
+	);
+
+	return (
+		<Text c="dimmed">
+			{t(vm.partial ? "investment.partial" : `${kind}.noSearchResults`)}
+		</Text>
+	);
+};
+
+const InstrumentSearch: FC<InstrumentSearchProps> = (props) => {
+	const { kind, vm } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Stack gap="lg">
+			<div>
+				<Title order={1}>{t(`${kind}.searchTitle`)}</Title>
+
+				<Text c="dimmed" mt="xs">
+					{t(`${kind}.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(`${kind}.searchLabel`)}
+				maxLength={80}
+				onChange={vm.onQueryChange}
+				placeholder={t(`${kind}.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)
+									? `${kind}.connect`
+									: "stock.sectionError",
+							)}
+						</Text>
+
+						<Anchor component={Link} to="/settings">
+							{t("accounts.openSettings")}
+						</Anchor>
+
+						<Button onClick={vm.retry} variant="default">
+							{t("accounts.retry")}
+						</Button>
+					</Stack>
+				</Alert>
+			)}
+
+			<InstrumentSearchResults {...props} />
+		</Stack>
+	);
+};
+
+export { InstrumentSearch };

src/features/instrument-search/ui/InstrumentSearchCard/InstrumentSearchCard.module.css

@@ -0,0 +1,36 @@
+.card {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) minmax(150px, 210px);
+	gap: var(--mantine-spacing-md);
+	align-items: start;
+	padding: var(--mantine-spacing-lg);
+	border-radius: var(--mantine-radius-lg);
+	color: inherit;
+	text-decoration: none;
+}
+.card:hover {
+	border-color: var(--mantine-color-blue-4);
+	background: var(--mantine-color-blue-0);
+}
+.card:focus-visible {
+	outline: 2px solid var(--mantine-color-blue-6);
+	outline-offset: 3px;
+}
+.identity {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.quote {
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+}
+@media (max-width: 40em) {
+	.card {
+		grid-template-columns: auto minmax(0, 1fr);
+		padding: var(--mantine-spacing-md);
+	}
+	.quote {
+		grid-column: 2;
+		text-align: left;
+	}
+}

src/features/instrument-search/ui/InstrumentSearchCard/InstrumentSearchCard.view.tsx

@@ -0,0 +1,38 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import { Avatar, Paper, Text } from "@mantine/core";
+import { Link } from "react-router";
+
+import classes from "./InstrumentSearchCard.module.css";
+
+type InstrumentSearchCardProps = PropsWithChildren<{
+	instrument: { logoSrc: null | string; name: string; to: string };
+	quote: ReactNode;
+}>;
+
+const InstrumentSearchCard: FC<InstrumentSearchCardProps> = (props) => {
+	const { children, instrument, quote } = props;
+
+	return (
+		<Paper
+			className={classes.card}
+			component={Link}
+			to={instrument.to}
+			withBorder
+		>
+			<Avatar alt="" radius="md" size={48} src={instrument.logoSrc}>
+				{instrument.name[0]}
+			</Avatar>
+
+			<div className={classes.identity}>
+				<Text fw={600} size="lg">{instrument.name}</Text>
+
+				{children}
+			</div>
+
+			<div className={classes.quote}>{quote}</div>
+		</Paper>
+	);
+};
+
+export { InstrumentSearchCard };