refactor: share instrument search presentation

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 };