refactor: enforce frontend view model boundaries

src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx

@@ -1,121 +1,61 @@
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Group, Modal, Stack, Text } from "@mantine/core";
-import { type FC, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { type FC } from "react";
+import { FormProvider } from "react-hook-form";
 
 import { formatDate } from "@/shared/lib";
 
-import { useBankMutations } from "../../api/mutations";
-import { type BankCard, useBankCard } from "../../api/queries";
-import {
-	bankCardSchema,
-	type BankCardValues,
-	bankMoneyValue,
-	bankToday,
-} from "../../model/form-validation";
+import { type BankCard } from "../../api/queries";
 import { BankFeedback } from "../BankFeedback";
 import classes from "../BankForms.module.css";
-import { useBankFormFocus } from "../useBankFormFocus";
 import { BankCardFields } from "./BankCardForm.view";
+import { useBankCardFormVm } from "./BankCardForm.vm";
 
 type BankCardFormProps = { card?: BankCard; onClose: () => void };
+
 const BankCardForm: FC<BankCardFormProps> = (props) => {
-	useBankFormFocus();
-	const [opened, setOpened] = useState(true);
-	const { t } = useTranslation();
-	const [intent] = useState(() => crypto.randomUUID());
-	const [version, setVersion] = useState(props.card?.version ?? 1);
-	const [error, setError] = useState<unknown>();
-	const [latest, setLatest] = useState<BankCard>();
-	const fresh = useBankCard(props.card?.id);
-	const mutation = useBankMutations();
-	const methods = useForm<BankCardValues>({
-		defaultValues: {
-			bankName: props.card?.bankName ?? "",
-			lastFour: props.card?.lastFour ?? "",
-			name: props.card?.name ?? "",
-			openingBalance: props.card?.openingBalance.value ?? "0",
-			openingDate: props.card?.openingDate ?? bankToday(),
-			paymentSystem: props.card?.paymentSystem ?? "",
-		},
-		resolver: zodResolver(bankCardSchema),
-	});
-	const isPending
-		= !opened
-			|| methods.formState.isSubmitting
-			|| (fresh.isFetching && Boolean(error));
+	const {
+		dialogTitle,
+		error,
+		isPending,
+		latest,
+		methods,
+		onAdoptVersion,
+		onCancel,
+		onReloadRecord,
+		onRequestClose,
+		onSubmit,
+		opened,
+		t,
+	} = useBankCardFormVm(props);
+
 	return (
 		<Modal
 			closeButtonProps={{ "aria-label": t("bank.close"), "disabled": isPending }}
 			closeOnClickOutside={!isPending}
 			closeOnEscape={!isPending}
-			onClose={() => !isPending && setOpened(false)}
+			onClose={onRequestClose}
 			onExitTransitionEnd={props.onClose}
 			opened={opened}
-			title={t(props.card ? "bank.editCard" : "bank.addCard")}
+			title={dialogTitle}
 		>
 			<FormProvider {...methods}>
-				<form
-					onSubmit={methods.handleSubmit(async (values) => {
-						setError(undefined);
-						try {
-							const metadata = {
-								bankName: values.bankName || /* eslint-disable-line unicorn/no-null -- PATCH uses null to clear these optional card fields. */ null,
-								lastFour: values.lastFour || /* eslint-disable-line unicorn/no-null -- PATCH uses null to clear these optional card fields. */ null,
-								name: values.name,
-								paymentSystem: values.paymentSystem || /* eslint-disable-line unicorn/no-null -- PATCH uses null to clear these optional card fields. */ null,
-							};
-							const financial = {
-								openingBalance: {
-									currency: "RUB" as const,
-									value: bankMoneyValue(values.openingBalance),
-								},
-								openingDate: values.openingDate,
-							};
-							if (props.card)
-								await mutation.updateCard.mutateAsync({
-									body: {
-										...metadata,
-										...(!props.card.archivedAt && financial),
-										version,
-									},
-									id: props.card.id,
-								});
-							else
-								await mutation.createCard.mutateAsync({
-									id: intent,
-									...metadata,
-									...financial,
-								});
-							setOpened(false);
-						}
-						catch (error_) {
-							setError(error_);
-						}
-					})}
-				>
+				<form onSubmit={onSubmit}>
 					<fieldset className={classes.fieldset} disabled={isPending}>
 						<Stack>
 							<BankCardFields archived={Boolean(props.card?.archivedAt)} />
-							{!!(error) && ((
+
+							{!!error && (
 								<>
 									<BankFeedback error={error} />
+
 									{props.card && (
-										<Button
-											onClick={async () => {
-												const response = await fresh.refetch();
-												if (response.data && !response.error)
-													setLatest(response.data);
-												else setError(response.error);
-											}}
-											variant="default"
-										>
+										<Button onClick={onReloadRecord} variant="default">
 											{t("bank.reloadRecord")}
 										</Button>
 									)}
 								</>
-							))}
+							)}
+
 							{latest && (
 								<>
 									<Text>
@@ -123,23 +63,19 @@ const BankCardForm: FC<BankCardFormProps> = (props) => {
 											details: `${latest.name} · ${latest.openingBalance.value} RUB · ${formatDate(latest.openingDate)}`,
 										})}
 									</Text>
-									<Button
-										onClick={() => {
-											setVersion(latest.version);
-											setLatest(undefined);
-											setError(undefined);
-										}}
-										variant="default"
-									>
+
+									<Button onClick={onAdoptVersion} variant="default">
 										{t("bank.adoptVersion", { version: latest.version })}
 									</Button>
 								</>
 							)}
+
 							<Group>
 								<Button loading={isPending} type="submit">
 									{t("bank.save")}
 								</Button>
-								<Button onClick={() => setOpened(false)} variant="default">
+
+								<Button onClick={onCancel} variant="default">
 									{t("bank.cancel")}
 								</Button>
 							</Group>