refactor: enforce frontend view model boundaries

src/pages/card/ui/DeleteOperation/DeleteOperation.vm.ts

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+	type BankOperation,
+	useBankFormFocus,
+	useBankMutations,
+	useBankOperation,
+} from "@/entities/bank-card";
+
+type DeleteOperationProps = { onClose: () => void; operation: BankOperation };
+
+function useDeleteOperationVm(props: DeleteOperationProps) {
+	useBankFormFocus();
+	const [opened, setOpened] = useState(true);
+	const { t } = useTranslation();
+	const [record, setRecord] = useState(props.operation);
+	const [latest, setLatest] = useState<BankOperation>();
+	const [error, setError] = useState<unknown>();
+	const query = useBankOperation(record.id);
+	const { deleteOperation: operationDeletion } = useBankMutations();
+
+	const isPending
+		= !opened
+			|| operationDeletion.isPending
+			|| (query.isFetching && Boolean(error));
+
+	const onRequestClose = () => !isPending && setOpened(false);
+
+	const onReloadRecord = async () => {
+		const result = await query.refetch();
+		if (result.data && !result.error) setLatest(result.data);
+		else setError(result.error);
+	};
+
+	const onAdoptVersion = () => {
+		if (!latest) return;
+		setRecord(latest);
+		setLatest(undefined);
+		setError(undefined);
+	};
+
+	const onDelete = async () => {
+		setError(undefined);
+
+		try {
+			await operationDeletion.mutateAsync({
+				id: record.id,
+				version: record.version,
+			});
+			setOpened(false);
+		}
+		catch (error_) {
+			setError(error_);
+		}
+	};
+
+	const onCancel = () => setOpened(false);
+
+	return {
+		error,
+		isPending,
+		latest,
+		onAdoptVersion,
+		onCancel,
+		onDelete,
+		onReloadRecord,
+		onRequestClose,
+		opened,
+		record,
+		t,
+	};
+}
+
+export { useDeleteOperationVm };