diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index 5495c068..1d4f4153 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -4,6 +4,7 @@ import styles from '~/styles/common/inputs.module.scss'; import { Icon } from '~/components/input/Icon'; import { IInputTextProps } from '~/redux/types'; import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { useTranslatedError } from '~/utils/hooks/useTranslatedError'; const InputText: FC = ({ wrapperClassName, @@ -36,6 +37,8 @@ const InputText: FC = ({ const onFocus = useCallback(() => setFocused(true), []); const onBlur = useCallback(() => setFocused(false), []); + const translatedError = useTranslatedError(error); + useEffect(() => { if (onRef) onRef(inner_ref); }, [inner_ref, onRef]); @@ -86,9 +89,9 @@ const InputText: FC = ({ )} - {error && ( + {!!translatedError && (
- {error} + {translatedError}
)} diff --git a/src/constants/errors.ts b/src/constants/errors.ts index fbb68c4e..bf88f347 100644 --- a/src/constants/errors.ts +++ b/src/constants/errors.ts @@ -42,6 +42,7 @@ export const ERRORS = { CANT_RESTORE_COMMENT: 'CantRestoreComment', MESSAGE_NOT_FOUND: 'MessageNotFound', COMMENT_TOO_LONG: 'CommentTooLong', + NETWORK_ERROR: 'Network Error', }; export const ERROR_LITERAL = { @@ -89,4 +90,5 @@ export const ERROR_LITERAL = { [ERRORS.CANT_RESTORE_COMMENT]: 'Не удалось восстановить комментарий', [ERRORS.MESSAGE_NOT_FOUND]: 'Сообщение не найдено', [ERRORS.COMMENT_TOO_LONG]: 'Комментарий слишком длинный', + [ERRORS.NETWORK_ERROR]: 'Подключение не удалось', }; diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index 23792200..9aa7d12b 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react'; +import React, { FC, FormEvent, useCallback, useEffect, useMemo, useState } from 'react'; import { connect } from 'react-redux'; import { DIALOGS, IDialogProps } from '~/redux/modal/constants'; import { useCloseOnEscape } from '~/utils/hooks'; @@ -18,6 +18,8 @@ import { pick } from 'ramda'; import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons'; import { OAUTH_EVENT_TYPES } from '~/redux/types'; import { DialogTitle } from '~/components/dialogs/DialogTitle'; +import { ERROR_LITERAL } from '~/constants/errors'; +import { useTranslatedError } from '~/utils/hooks/useTranslatedError'; const mapStateToProps = state => ({ ...pick(['error', 'is_registering'], selectAuthLogin(state)), @@ -90,12 +92,14 @@ const LoginDialogUnconnected: FC = ({ useCloseOnEscape(onRequestClose); + const translatedError = useTranslatedError(error); + return (
} backdrop={
} diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 8f029a01..40d8912b 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -349,10 +349,14 @@ function* loginWithSocial({ token }: ReturnType) { return; } } catch (error) { - const data = (error as AxiosError<{ needs_register: boolean }>).response?.data; + const { dialog }: ReturnType = yield select(selectModal); + const data = (error as AxiosError<{ + needs_register: boolean; + errors: Record<'username' | 'password', string>; + }>).response?.data; // Backend asks us for account registration - if (data?.needs_register) { + if (dialog !== DIALOGS.LOGIN_SOCIAL_REGISTER && data?.needs_register) { yield put(authSetRegisterSocial({ token })); yield put(modalShowDialog(DIALOGS.LOGIN_SOCIAL_REGISTER)); return; @@ -391,11 +395,6 @@ function* authRegisterSocial({ username, password }: ReturnType; + }>).response?.data; + + if (data?.errors) { + yield put(authSetRegisterSocialErrors(data.errors)); + return; + } + yield put(authSetRegisterSocial({ error: error.message })); } } diff --git a/src/utils/hooks/useTranslatedError.ts b/src/utils/hooks/useTranslatedError.ts new file mode 100644 index 00000000..22ef367f --- /dev/null +++ b/src/utils/hooks/useTranslatedError.ts @@ -0,0 +1,17 @@ +import { ERROR_LITERAL } from '~/constants/errors'; +import { has } from 'ramda'; +import { useMemo } from 'react'; + +export const useTranslatedError = (error: string | undefined) => { + return useMemo(() => { + if (!error) { + return ''; + } + + if (!has(error, ERROR_LITERAL)) { + return error; + } + + return ERROR_LITERAL[error]; + }, [error]); +};