refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,119 @@
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	BankFeedback,
+	type BankOperation,
+	useBankFormFocus,
+	useBankMutations,
+	useBankOperation,
+} from "@/entities/bank-card";
+import { formatDate, formatMoney } from "@/shared/lib";
+
+type DeleteOperationProps = { operation: BankOperation; onClose: () => void };
+const DeleteOperation: FC<DeleteOperationProps> = (props) => {
+	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 } = useBankMutations();
+	const pending =
+		!opened ||
+		deleteOperation.isPending ||
+		(query.isFetching && Boolean(error));
+	return (
+		<Modal
+			opened={opened}
+			onExitTransitionEnd={props.onClose}
+			onClose={() => !pending && setOpened(false)}
+			title={t("bank.deleteTitle")}
+			closeOnEscape={!pending}
+			closeOnClickOutside={!pending}
+			closeButtonProps={{ "aria-label": t("bank.close"), disabled: pending }}
+		>
+			<Stack>
+				<Text>
+					{record.kind === "transfer"
+						? t("bank.deleteTransfer", {
+								amount: formatMoney(record.amount),
+								source: record.cardName,
+								target: record.targetCardName,
+							})
+						: t("bank.deleteHint", {
+								kind: t(`bank.kinds.${record.kind}`),
+								amount: formatMoney(record.amount),
+								card: record.cardName,
+							})}
+				</Text>
+				{error ? (
+					<>
+						<BankFeedback error={error} />
+						<Button
+							variant="default"
+							disabled={pending}
+							onClick={async () => {
+								const result = await query.refetch();
+								if (result.data && !result.error) setLatest(result.data);
+								else setError(result.error);
+							}}
+						>
+							{t("bank.reloadRecord")}
+						</Button>
+					</>
+				) : null}
+				{latest && (
+					<>
+						<Text>
+							{t("bank.versionHint", {
+								details: `${formatDate(latest.date)} · ${formatMoney(latest.amount)} · ${latest.description ?? ""}`,
+							})}
+						</Text>
+						<Button
+							variant="default"
+							disabled={pending}
+							onClick={() => {
+								setRecord(latest);
+								setLatest(undefined);
+								setError(undefined);
+							}}
+						>
+							{t("bank.adoptVersion", { version: latest.version })}
+						</Button>
+					</>
+				)}
+				<Group>
+					<Button
+						color="red"
+						loading={pending}
+						onClick={async () => {
+							setError(undefined);
+							try {
+								await deleteOperation.mutateAsync({
+									id: record.id,
+									version: record.version,
+								});
+								setOpened(false);
+							} catch (failure) {
+								setError(failure);
+							}
+						}}
+					>
+						{t("bank.delete")}
+					</Button>
+					<Button
+						variant="default"
+						disabled={pending}
+						onClick={() => setOpened(false)}
+					>
+						{t("bank.cancel")}
+					</Button>
+				</Group>
+			</Stack>
+		</Modal>
+	);
+};
+
+export { DeleteOperation };