0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

refactor(console): hide error toast in language modal (#3384)

This commit is contained in:
Gao Sun 2023-03-14 19:59:56 +08:00 committed by GitHub
parent 2bb570da4b
commit 96691234ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 16 deletions

View file

@ -13,13 +13,8 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
import { useConfirmModal } from './use-confirm-modal';
export class RequestError extends Error {
status: number;
body?: RequestErrorBody;
constructor(status: number, body: RequestErrorBody) {
constructor(public readonly status: number, public readonly body?: RequestErrorBody) {
super('Request error occurred.');
this.status = status;
this.body = body;
}
}

View file

@ -1,4 +1,3 @@
import type { RequestErrorBody } from '@logto/schemas';
import { HTTPError } from 'ky';
import type { KyInstance } from 'ky/distribution/types/ky';
import { useCallback } from 'react';
@ -41,8 +40,9 @@ const useSwrFetcher: useSwrFetcherHook = <T>(api: KyInstance) => {
} catch (error: unknown) {
if (error instanceof HTTPError) {
const { response } = error;
const metadata = await response.json<RequestErrorBody>();
throw new RequestError(response.status, metadata);
// See https://stackoverflow.com/questions/53511974/javascript-fetch-failed-to-execute-json-on-response-body-stream-is-locked
// for why `.clone()` is needed
throw new RequestError(response.status, await response.clone().json());
}
throw error;
}

View file

@ -20,6 +20,7 @@ import Table from '@/components/Table';
import Textarea from '@/components/Textarea';
import { Tooltip } from '@/components/Tip';
import useApi, { RequestError } from '@/hooks/use-api';
import useSwrFetcher from '@/hooks/use-swr-fetcher';
import useUiLanguages from '@/hooks/use-ui-languages';
import {
createEmptyUiTranslation,
@ -34,18 +35,14 @@ const emptyUiTranslation = createEmptyUiTranslation();
const LanguageDetails = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { data: signInExperience } = useSWR<SignInExperience, RequestError>('api/sign-in-exp');
const { languages } = useUiLanguages();
const { selectedLanguage, setIsDirty, setSelectedLanguage } = useContext(LanguageEditorContext);
const [isDeletionAlertOpen, setIsDeletionAlertOpen] = useState(false);
const isBuiltIn = isBuiltInLanguageTag(selectedLanguage);
const isDefaultLanguage = signInExperience?.languageInfo.fallbackLanguage === selectedLanguage;
const fetchApi = useApi({ hideErrorToast: true });
const fetcher = useSwrFetcher<CustomPhraseResponse>(fetchApi);
const translationEntries = useMemo(
() => Object.entries((isBuiltIn ? resource[selectedLanguage] : en).translation),
@ -55,6 +52,7 @@ const LanguageDetails = () => {
const { data: customPhrase, mutate } = useSWR<CustomPhraseResponse, RequestError>(
`api/custom-phrases/${selectedLanguage}`,
{
fetcher,
shouldRetryOnError: (error: unknown) => {
if (error instanceof RequestError) {
return error.status !== 404;
@ -98,7 +96,6 @@ const LanguageDetails = () => {
]);
const { mutate: globalMutate } = useSWRConfig();
const api = useApi();
const upsertCustomPhrase = useCallback(