feat: add brocker account list

src/pages/accounts/ui/AccountsPage.tsx

@@ -1,13 +1,27 @@
-import { Stack, Title } from "@mantine/core";
+import { Button, Stack, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import {
+	BrokerageAccountList,
+	errorCode,
+	useBrokerageAccounts,
+} from "../../../entities/brokerage-account";
+import { useAuth } from "../../../features/auth";
 import { StateView } from "../../../shared/ui/StateView";
 
 export function AccountsPage() {
 	const { t } = useTranslation();
+	const { accessToken } = useAuth();
+	const accounts = useBrokerageAccounts(accessToken);
+	const code = errorCode(accounts.error);
+	if (accounts.isFetching) return <AccountsPageLoading />;
+	if (accounts.isError)
+		return <AccountsPageError code={code} retry={() => accounts.refetch()} />;
+	if (!accounts.data?.length) return <AccountsPageEmpty />;
 	return (
 		<Stack>
 			<Title order={1}>{t("accounts.title")}</Title>
-			<AccountsPageEmpty />
+			<BrokerageAccountList accounts={accounts.data} />
 		</Stack>
 	);
 }
@@ -23,13 +37,57 @@ export function AccountsPageLoading() {
 	);
 }
 
-export function AccountsPageError() {
+export function AccountsPageError({
+	code,
+	retry,
+}: {
+	code?: string;
+	retry?: () => void;
+}) {
 	const { t } = useTranslation();
+	const settingsAction = (
+		<Button component={Link} to="/settings" variant="light">
+			{t("accounts.openSettings")}
+		</Button>
+	);
+	if (code === "TBANK_NOT_CONNECTED")
+		return (
+			<StateView
+				error
+				title={t("accounts.notConnectedTitle")}
+				text={t("accounts.notConnectedText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "INVALID_TBANK_TOKEN")
+		return (
+			<StateView
+				error
+				title={t("accounts.invalidTokenTitle")}
+				text={t("accounts.invalidTokenText")}
+				action={settingsAction}
+			/>
+		);
+	if (code === "TBANK_UNAVAILABLE")
+		return (
+			<StateView
+				error
+				title={t("accounts.unavailableTitle")}
+				text={t("accounts.unavailableText")}
+				action={
+					<Stack align="flex-start">
+						<Button onClick={retry}>{t("accounts.retry")}</Button>
+						{settingsAction}
+					</Stack>
+				}
+			/>
+		);
 	return (
 		<StateView
 			error
 			title={t("states.errorTitle")}
 			text={t("states.errorText")}
+			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
 		/>
 	);
 }
@@ -37,6 +95,9 @@ export function AccountsPageError() {
 export function AccountsPageEmpty() {
 	const { t } = useTranslation();
 	return (
-		<StateView title={t("states.emptyTitle")} text={t("states.emptyText")} />
+		<StateView
+			title={t("accounts.emptyTitle")}
+			text={t("accounts.emptyText")}
+		/>
 	);
 }