refactor: enforce frontend view model boundaries

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.vm.ts

@@ -0,0 +1,116 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import {
+	ApiErrorCode,
+	apiErrorCode,
+	apiQueryClient,
+	isApiErrorCode,
+} from "@/shared/api";
+
+import {
+	commitTbankConnectionBoundary,
+	type TbankConnectionStatus,
+} from "../../model/connection-boundary";
+enum ConnectionErrorCode {
+	RequestFailed = "REQUEST_ERROR",
+}
+
+type TbankConnectionSectionLoadedProps = {
+	refreshError: boolean;
+	refreshing: boolean;
+	retry: () => void;
+	status: TbankConnectionStatus;
+};
+
+function useTbankConnectionSectionLoadedVm(
+	props: TbankConnectionSectionLoadedProps,
+) {
+	const { status } = props;
+	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+	const [isDeleteOpened, setIsDeleteOpened] = useState(false);
+	const removalButtonRef = useRef<HTMLButtonElement>(null);
+	const [requestError, setRequestError] = useState<null | string>(null);
+
+	const {
+		formState: { errors },
+		handleSubmit,
+		register,
+		reset,
+	} = useForm<{ token: string }>();
+
+	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
+		onError: error =>
+			setRequestError(apiErrorCode(error) ?? ConnectionErrorCode.RequestFailed),
+		onSuccess: (data) => {
+			commitTbankConnectionBoundary(queryClient, data);
+			reset();
+		},
+	});
+
+	const remove = apiQueryClient.useMutation(
+		"delete",
+		"/api/v1/tbank-connection",
+		{
+			onSuccess: () => {
+				commitTbankConnectionBoundary(queryClient, {
+					connected: false,
+					connectedAt:
+						// eslint-disable-next-line unicorn/no-null -- The disconnected API snapshot requires a null connection timestamp.
+						null,
+				});
+				setIsDeleteOpened(false);
+			},
+		},
+	);
+
+	const unavailableMessage = isApiErrorCode(
+		requestError,
+		ApiErrorCode.TbankUnavailable,
+	)
+		? "tbank.unavailable"
+		: "tbank.requestError";
+
+	const isPending = update.isPending || remove.isPending;
+	const isConnected = status.connected;
+	useEffect(() => {
+		if (isDeleteOpened && remove.isError) removalButtonRef.current?.focus();
+	}, [isDeleteOpened, remove.isError]);
+
+	const onSubmit = handleSubmit(({ token }) => {
+		setRequestError(null);
+		update.mutate({ body: { token } });
+	});
+
+	const onOpenDisconnect = () => {
+		remove.reset();
+		setIsDeleteOpened(true);
+	};
+
+	const onCloseDisconnect = () => !isPending && setIsDeleteOpened(false);
+	const onConfirmDisconnect = () => remove.mutate({});
+
+	return {
+		errors,
+		isConnected,
+		isDeleteOpened,
+		isPending,
+		onCloseDisconnect,
+		onConfirmDisconnect,
+		onOpenDisconnect,
+		onSubmit,
+		register,
+		removalButtonRef,
+		remove,
+		requestError,
+		status,
+		t,
+		unavailableMessage,
+		update,
+	};
+}
+
+export { useTbankConnectionSectionLoadedVm };