diff --git a/frontend/app/components/auth/auth.hooks.ts b/frontend/app/components/auth/auth.hooks.ts index 49da72b9..40a5b505 100644 --- a/frontend/app/components/auth/auth.hooks.ts +++ b/frontend/app/components/auth/auth.hooks.ts @@ -1,5 +1,9 @@ -import { useEffect, useRef, useState } from 'preact/hooks'; +import { useEffect, useRef, useState, useMemo } from 'preact/hooks'; +import { useIntl } from 'react-intl'; + +import { errorMessages, RequestError } from 'utils/errorUtils'; import { parseMessage, postMessageToParent } from 'utils/post-message'; +import { messages } from './auth.messsages'; function handleChangeIframeSize(element: HTMLElement) { const { top } = element.getBoundingClientRect(); @@ -80,3 +84,38 @@ export function useDropdown(disableClosing?: boolean) { return [rootRef, showDropdown, toggleDropdownState] as const; } + +export function useErrorMessage(): [string | null, (e: unknown) => void] { + const intl = useIntl(); + const [invalidReason, setInvalidReason] = useState(null); + + return useMemo(() => { + let errorMessage = invalidReason; + + if (invalidReason && messages[invalidReason]) { + errorMessage = intl.formatMessage(messages[invalidReason]); + } + + if (invalidReason && errorMessages[invalidReason]) { + errorMessage = intl.formatMessage(errorMessages[invalidReason]); + } + + function setError(err: unknown): void { + if (err === null) { + setInvalidReason(null); + return; + } + + if (typeof err === 'string') { + setInvalidReason(err); + return; + } + + const errorReason = err instanceof RequestError ? err.error : err instanceof Error ? err.message : 'error.0'; + + setInvalidReason(errorReason); + } + + return [errorMessage, setError]; + }, [intl, invalidReason]); +} diff --git a/frontend/app/components/auth/auth.tsx b/frontend/app/components/auth/auth.tsx index 8a1db599..75bd66b5 100644 --- a/frontend/app/components/auth/auth.tsx +++ b/frontend/app/components/auth/auth.tsx @@ -15,8 +15,8 @@ import { ArrowIcon } from 'components/icons/arrow'; import { Button } from './components/button'; import { OAuth } from './components/oauth'; import { messages } from './auth.messsages'; -import { useDropdown } from './auth.hooks'; -import { getProviders, getTokenInvalidReason, useErrorMessage } from './auth.utils'; +import { useDropdown, useErrorMessage } from './auth.hooks'; +import { getProviders, getTokenInvalidReason } from './auth.utils'; import { oauthSignin, emailSignin, diff --git a/frontend/app/components/auth/auth.utils.ts b/frontend/app/components/auth/auth.utils.ts index 6dee0307..1e3c7dbd 100644 --- a/frontend/app/components/auth/auth.utils.ts +++ b/frontend/app/components/auth/auth.utils.ts @@ -1,8 +1,4 @@ -import { useMemo, useState } from 'preact/hooks'; -import { useIntl } from 'react-intl'; - import { isJwtExpired } from 'utils/jwt'; -import { errorMessages, RequestError } from 'utils/errorUtils'; import { StaticStore } from 'common/static-store'; import type { FormProvider, OAuthProvider } from 'common/types'; @@ -31,38 +27,3 @@ export function getTokenInvalidReason(token: string): null | keyof typeof messag return null; } - -export function useErrorMessage(): [string | null, (e: unknown) => void] { - const intl = useIntl(); - const [invalidReason, setInvalidReason] = useState(null); - - return useMemo(() => { - let errorMessage = invalidReason; - - if (invalidReason && messages[invalidReason]) { - errorMessage = intl.formatMessage(messages[invalidReason]); - } - - if (invalidReason && errorMessages[invalidReason]) { - errorMessage = intl.formatMessage(errorMessages[invalidReason]); - } - - function setError(err: unknown): void { - if (err === null) { - setInvalidReason(null); - return; - } - - if (typeof err === 'string') { - setInvalidReason(err); - return; - } - - const errorReason = err instanceof RequestError ? err.error : err instanceof Error ? err.message : 'error.0'; - - setInvalidReason(errorReason); - } - - return [errorMessage, setError]; - }, [intl, invalidReason]); -}