feat(investments): warn and offer retry after exhausted read retries (WealthLedger/frontend#55) (#136)

src/pages/accounts/ui/AccountsPage/AccountsPage.vm.ts

@@ -4,14 +4,26 @@ import {
 	useBrokerageAccounts,
 } from "@/entities/brokerage-account";
 import { useScreenSync } from "@/features/tbank-connection";
-import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
+import {
+	ApiErrorCode,
+	apiErrorCode,
+	isApiErrorCode,
+	readRetry,
+} from "@/shared/api";
 import { useInitialAvailability } from "@/shared/lib";
 
+type AccountsPageReadRetry = ReturnType<typeof readRetry>;
+
 type AccountsPageViewModel
-	= | { accounts: BrokerageAccountCard[]; meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>; state: "loaded" }
-		| { code?: string; state: "error" }
-		| { state: "empty" }
-		| { state: "loading" };
+	= | {
+		accounts: BrokerageAccountCard[];
+		meta: NonNullable<ReturnType<typeof useBrokerageAccounts>["meta"]>;
+		readRetry: AccountsPageReadRetry;
+		state: "loaded";
+	}
+	| { code?: string; readRetry: AccountsPageReadRetry; state: "error" }
+	| { state: "empty" }
+	| { state: "loading" };
 
 function isAccountsAccessFailure(code?: string) {
 	return isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
@@ -23,6 +35,7 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
 	useScreenSync({ screen: "accounts" }, [accounts]);
 
 	const code = apiErrorCode(accounts.error);
+	const retry = readRetry([accounts]);
 	const isAccessFailure = isAccountsAccessFailure(code);
 
 	const hasResult = !!accounts.data
@@ -36,12 +49,13 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
 		isFetching: accounts.isFetching,
 	});
 
-	if (isAccessFailure) return { code, state: "error" as const };
+	if (isAccessFailure)
+		return { code, readRetry: retry, state: "error" as const };
 
 	if (!hasResult || !accounts.data)
-		return {
-			state: availability === "unavailable" ? "error" : "loading",
-		} as const;
+		return availability === "unavailable"
+			? { code, readRetry: retry, state: "error" as const }
+			: { state: "loading" as const };
 
 	if (accounts.data.length === 0)
 		return {
@@ -54,6 +68,7 @@ function useAccountsPageViewModel(): AccountsPageViewModel {
 	return {
 		accounts: brokerageAccountCards(accounts.data, meta.dependencies),
 		meta,
+		readRetry: retry,
 		state: "loaded" as const,
 	};
 }