fixed error translation

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<IInputTextProps> = ({
   wrapperClassName,
@@ -36,6 +37,8 @@ const InputText: FC<IInputTextProps> = ({
   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<IInputTextProps> = ({
         </div>
       )}
 
-      {error && (
+      {!!translatedError && (
         <div className={styles.error}>
-          <span>{error}</span>
+          <span>{translatedError}</span>
         </div>
       )}
 

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]: 'Подключение не удалось',
 };

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<IProps> = ({
 
   useCloseOnEscape(onRequestClose);
 
+  const translatedError = useTranslatedError(error);
+
   return (
     <form onSubmit={onSubmit}>
       <div>
         <BetterScrollDialog
           width={300}
-          error={error}
+          error={translatedError}
           onClose={onRequestClose}
           footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
           backdrop={<div className={styles.backdrop} />}

src/redux/auth/sagas.ts

@@ -349,10 +349,14 @@ function* loginWithSocial({ token }: ReturnType<typeof authLoginWithSocial>) {
       return;
     }
   } catch (error) {
-    const data = (error as AxiosError<{ needs_register: boolean }>).response?.data;
+    const { dialog }: ReturnType<typeof selectModal> = 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<typeof authSendR
       password,
     });
 
-    if (data?.errors) {
-      yield put(authSetRegisterSocialErrors(data.errors));
-      return;
-    }
-
     if (data.token) {
       yield put(authSetToken(data.token));
       yield call(refreshUser);
@@ -403,6 +402,16 @@ function* authRegisterSocial({ username, password }: ReturnType<typeof authSendR
       return;
     }
   } catch (error) {
+    const data = (error as AxiosError<{
+      needs_register: boolean;
+      errors: Record<'username' | 'password', string>;
+    }>).response?.data;
+
+    if (data?.errors) {
+      yield put(authSetRegisterSocialErrors(data.errors));
+      return;
+    }
+
     yield put(authSetRegisterSocial({ error: error.message }));
   }
 }

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]);
+};