chore: finish frontend ESLint migration #18
Enable every plugin recommended preset and replace Biome with ESLint formatting. Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.
This commit is contained in:
+40
-38
@@ -1,3 +1,5 @@
|
||||
import type { FC } from "react";
|
||||
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
@@ -7,21 +9,22 @@ import {
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { FC } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { apiErrorCode, apiQueryClient } from "@/shared/api";
|
||||
|
||||
import {
|
||||
commitTbankConnectionBoundary,
|
||||
type TbankConnectionStatus,
|
||||
} from "../../model/connection-boundary";
|
||||
|
||||
type TbankConnectionSectionLoadedProps = {
|
||||
status: TbankConnectionStatus;
|
||||
refreshing: boolean;
|
||||
refreshError: boolean;
|
||||
refreshing: boolean;
|
||||
retry: () => void;
|
||||
status: TbankConnectionStatus;
|
||||
};
|
||||
|
||||
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
@@ -30,21 +33,21 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
const { status } = props;
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [deleteOpened, setDeleteOpened] = useState(false);
|
||||
const deleteButton = useRef<HTMLButtonElement>(null);
|
||||
const [requestError, setRequestError] = useState<string | null>(null);
|
||||
const [isDeleteOpened, setIsDeleteOpened] = useState(false);
|
||||
const removalButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const [requestError, setRequestError] = useState<null | string>(null);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
} = useForm<{ token: string }>();
|
||||
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
|
||||
onError: error => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
|
||||
onSuccess: (data) => {
|
||||
commitTbankConnectionBoundary(queryClient, data);
|
||||
reset();
|
||||
},
|
||||
onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
|
||||
});
|
||||
const remove = apiQueryClient.useMutation(
|
||||
"delete",
|
||||
@@ -53,23 +56,24 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
onSuccess: () => {
|
||||
commitTbankConnectionBoundary(queryClient, {
|
||||
connected: false,
|
||||
connectedAt: null,
|
||||
connectedAt: /* eslint-disable-line unicorn/no-null -- The disconnected API snapshot requires a null connection timestamp. */ null,
|
||||
});
|
||||
setDeleteOpened(false);
|
||||
setIsDeleteOpened(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
const pending = update.isPending || remove.isPending;
|
||||
const connected = status.connected;
|
||||
const unavailableMessage = requestError === "TBANK_UNAVAILABLE" ? "tbank.unavailable" : "tbank.requestError";
|
||||
const isPending = update.isPending || remove.isPending;
|
||||
const isConnected = status.connected;
|
||||
useEffect(() => {
|
||||
if (deleteOpened && remove.isError) deleteButton.current?.focus();
|
||||
}, [deleteOpened, remove.isError]);
|
||||
if (isDeleteOpened && remove.isError) removalButtonRef.current?.focus();
|
||||
}, [isDeleteOpened, remove.isError]);
|
||||
|
||||
return (
|
||||
<Stack mt="xl">
|
||||
<Text fw={600}>{t("tbank.title")}</Text>
|
||||
<Text size="sm">
|
||||
{connected
|
||||
{isConnected
|
||||
? t("tbank.connected", {
|
||||
date: new Date(status.connectedAt ?? "").toLocaleDateString(
|
||||
"ru-RU",
|
||||
@@ -77,22 +81,22 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
})
|
||||
: t("tbank.disconnected")}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("tbank.hint")}
|
||||
</Text>
|
||||
{props.refreshing && (
|
||||
<Text role="status" size="sm" c="dimmed">
|
||||
<Text c="dimmed" role="status" size="sm">
|
||||
{t("tbank.refreshing")}
|
||||
</Text>
|
||||
)}
|
||||
{props.refreshError && (
|
||||
<Alert color="orange" role="status" aria-live="polite">
|
||||
<Alert aria-live="polite" color="orange" role="status">
|
||||
<Stack gap="sm">
|
||||
<Text>{t("tbank.refreshError")}</Text>
|
||||
<Button
|
||||
variant="default"
|
||||
disabled={props.refreshing || isPending}
|
||||
onClick={props.retry}
|
||||
disabled={props.refreshing || pending}
|
||||
variant="default"
|
||||
>
|
||||
{t("tbank.retry")}
|
||||
</Button>
|
||||
@@ -105,7 +109,7 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
update.mutate({ body: { token } });
|
||||
})}
|
||||
>
|
||||
<fieldset disabled={pending}>
|
||||
<fieldset disabled={isPending}>
|
||||
<Stack>
|
||||
<PasswordInput
|
||||
label={t("tbank.token")}
|
||||
@@ -117,23 +121,21 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
{t(
|
||||
requestError === "INVALID_TBANK_TOKEN"
|
||||
? "tbank.invalidToken"
|
||||
: requestError === "TBANK_UNAVAILABLE"
|
||||
? "tbank.unavailable"
|
||||
: "tbank.requestError",
|
||||
: unavailableMessage,
|
||||
)}
|
||||
</Alert>
|
||||
)}
|
||||
<Button type="submit" loading={update.isPending}>
|
||||
{t(connected ? "tbank.replace" : "tbank.connect")}
|
||||
<Button loading={update.isPending} type="submit">
|
||||
{t(isConnected ? "tbank.replace" : "tbank.connect")}
|
||||
</Button>
|
||||
{connected && (
|
||||
{isConnected && (
|
||||
<Button
|
||||
variant="outline"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
remove.reset();
|
||||
setDeleteOpened(true);
|
||||
setIsDeleteOpened(true);
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
{t("tbank.delete")}
|
||||
</Button>
|
||||
@@ -142,12 +144,12 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
</fieldset>
|
||||
</form>
|
||||
<Modal
|
||||
opened={deleteOpened}
|
||||
onClose={() => !pending && setDeleteOpened(false)}
|
||||
closeButtonProps={{ "aria-label": t("tbank.close"), "disabled": isPending }}
|
||||
closeOnClickOutside={!isPending}
|
||||
closeOnEscape={!isPending}
|
||||
onClose={() => !isPending && setIsDeleteOpened(false)}
|
||||
opened={isDeleteOpened}
|
||||
title={t("tbank.deleteTitle")}
|
||||
closeOnClickOutside={!pending}
|
||||
closeOnEscape={!pending}
|
||||
closeButtonProps={{ "aria-label": t("tbank.close"), disabled: pending }}
|
||||
>
|
||||
<Stack>
|
||||
<Text>{t("tbank.deleteText")}</Text>
|
||||
@@ -155,11 +157,11 @@ const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
|
||||
<Alert color="red">{t("tbank.requestError")}</Alert>
|
||||
)}
|
||||
<Button
|
||||
ref={deleteButton}
|
||||
color="red"
|
||||
disabled={isPending}
|
||||
loading={remove.isPending}
|
||||
disabled={pending}
|
||||
onClick={() => remove.mutate({})}
|
||||
ref={removalButtonRef}
|
||||
>
|
||||
{t("tbank.deleteConfirm")}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user