chore: codify React component style

src/pages/accounts/ui/AccountsPage.tsx

@@ -1,3 +1,4 @@
+import type { FC } from "react";
 import {
 	AccountsPageEmpty,
 	AccountsPageError,
@@ -6,7 +7,7 @@ import {
 } from "./AccountsPage.view";
 import { useAccountsPageViewModel } from "./AccountsPage.vm";
 
-export function AccountsPage() {
+const AccountsPage: FC = () => {
 	const viewModel = useAccountsPageViewModel();
 	if (viewModel.state === "loading") return <AccountsPageLoading />;
 	if (viewModel.state === "error") return <AccountsPageError {...viewModel} />;
@@ -26,10 +27,11 @@ export function AccountsPage() {
 			retry={viewModel.retry}
 		/>
 	);
-}
+};
 
 export {
+	AccountsPage,
 	AccountsPageEmpty,
 	AccountsPageError,
 	AccountsPageLoading,
-} from "./AccountsPage.view";
+};

src/pages/accounts/ui/AccountsPage.view.tsx

@@ -7,14 +7,40 @@ import {
 	Text,
 	Title,
 } from "@mantine/core";
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import type { BrokerageAccount } from "@/entities/brokerage-account";
 import { BrokerageAccountList } from "@/entities/brokerage-account";
 import { StateView } from "@/shared/ui";
 
-export function AccountsPageLoading() {
+type AccountsPageErrorProps = {
+	code?: string;
+	retry?: () => void;
+};
+
+type AccountsPageEmptyProps = {
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
+};
+
+type AccountsPageLoadedProps = {
+	accounts: BrokerageAccount[];
+	refreshing?: boolean;
+	refreshError?: boolean;
+	retry?: () => void;
+};
+
+type AccountsRefreshStateProps = {
+	refreshing: boolean;
+	refreshError: boolean;
+	retry?: () => void;
+};
+
+const AccountsPageLoading: FC = () => {
 	const { t } = useTranslation();
+
 	return (
 		<StateView
 			loading
@@ -22,15 +48,10 @@ export function AccountsPageLoading() {
 			text={t("states.loadingText")}
 		/>
 	);
-}
+};
 
-export function AccountsPageError({
-	code,
-	retry,
-}: {
-	code?: string;
-	retry?: () => void;
-}) {
+const AccountsPageError: FC<AccountsPageErrorProps> = (props) => {
+	const { code, retry } = props;
 	const { t } = useTranslation();
 	const settingsAction = (
 		<Button component={Link} to="/settings" variant="light">
@@ -77,18 +98,12 @@ export function AccountsPageError({
 			action={<Button onClick={retry}>{t("accounts.retry")}</Button>}
 		/>
 	);
-}
+};
 
-export function AccountsPageEmpty({
-	refreshing = false,
-	refreshError = false,
-	retry,
-}: {
-	refreshing?: boolean;
-	refreshError?: boolean;
-	retry?: () => void;
-}) {
+const AccountsPageEmpty: FC<AccountsPageEmptyProps> = (props) => {
+	const { refreshing = false, refreshError = false, retry } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Stack>
 			<AccountsRefreshState
@@ -102,20 +117,12 @@ export function AccountsPageEmpty({
 			/>
 		</Stack>
 	);
-}
+};
 
-export function AccountsPageLoaded({
-	accounts,
-	refreshing = false,
-	refreshError = false,
-	retry,
-}: {
-	accounts: BrokerageAccount[];
-	refreshing?: boolean;
-	refreshError?: boolean;
-	retry?: () => void;
-}) {
+const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
+	const { accounts, refreshing = false, refreshError = false, retry } = props;
 	const { t } = useTranslation();
+
 	return (
 		<Stack>
 			<Title order={1}>{t("accounts.title")}</Title>
@@ -127,19 +134,13 @@ export function AccountsPageLoaded({
 			<BrokerageAccountList accounts={accounts} />
 		</Stack>
 	);
-}
+};
 
-function AccountsRefreshState({
-	refreshing,
-	refreshError,
-	retry,
-}: {
-	refreshing: boolean;
-	refreshError: boolean;
-	retry?: () => void;
-}) {
+const AccountsRefreshState: FC<AccountsRefreshStateProps> = (props) => {
+	const { refreshing, refreshError, retry } = props;
 	const { t } = useTranslation();
 	if (!refreshing && !refreshError) return null;
+
 	return (
 		<>
 			{refreshing ? (
@@ -162,4 +163,11 @@ function AccountsRefreshState({
 			) : null}
 		</>
 	);
-}
+};
+
+export {
+	AccountsPageEmpty,
+	AccountsPageError,
+	AccountsPageLoaded,
+	AccountsPageLoading,
+};

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

@@ -1,6 +1,6 @@
 import { errorCode, useBrokerageAccounts } from "@/entities/brokerage-account";
 
-export function useAccountsPageViewModel() {
+function useAccountsPageViewModel() {
 	const accounts = useBrokerageAccounts();
 	if (!accounts.data) {
 		if (accounts.isFetching) return { state: "loading" as const };
@@ -26,3 +26,5 @@ export function useAccountsPageViewModel() {
 		retry: () => accounts.refetch(),
 	};
 }
+
+export { useAccountsPageViewModel };