clearing errors in dialog on input

src/containers/dialogs/LoginSocialRegisterDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { IDialogProps } from '~/redux/modal/constants';
 import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
@@ -8,24 +8,66 @@ import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import styles from './styles.scss';
 import { selectAuthRegisterSocial } from '~/redux/auth/selectors';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { useCloseOnEscape } from '~/utils/hooks';
 
 const mapStateToProps = selectAuthRegisterSocial;
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  authSetRegisterSocialErrors: AUTH_ACTIONS.authSetRegisterSocialErrors,
+  authSetRegisterSocial: AUTH_ACTIONS.authSetRegisterSocial,
+};
 
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
 
-const LoginSocialRegisterDialogUnconnected: FC<Props> = ({ onRequestClose, token }) => {
+const LoginSocialRegisterDialogUnconnected: FC<Props> = ({
+  onRequestClose,
+  token,
+  errors,
+  error,
+
+  authSetRegisterSocialErrors,
+  authSetRegisterSocial,
+}) => {
   const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  useEffect(() => {
+    if (errors.username) authSetRegisterSocialErrors({ username: '' });
+  }, [username]);
+
+  useEffect(() => {
+    if (errors.password) authSetRegisterSocialErrors({ password: '' });
+  }, [password]);
+
+  useEffect(() => {
+    if (error) authSetRegisterSocial({ error: '' });
+  }, [username, password]);
+
+  useCloseOnEscape(onRequestClose);
 
   return (
-    <BetterScrollDialog onClose={onRequestClose} width={300}>
+    <BetterScrollDialog onClose={onRequestClose} width={300} error={error}>
       <Padder>
         <div className={styles.wrap}>
           <Group>
             <DialogTitle>Добро пожаловать в семью!</DialogTitle>
+
             <InputText handler={setUsername} value={token} title="Token" />
-            <InputText handler={setUsername} value={username} title="Юзернэйм" />
-            <InputText handler={setUsername} value={username} title="Пароль" type="password" />
+
+            <InputText
+              handler={setUsername}
+              value={username}
+              title="Юзернэйм"
+              error={errors.username}
+            />
+
+            <InputText
+              handler={setPassword}
+              value={password}
+              title="Пароль"
+              type="password"
+              error={errors.password}
+            />
           </Group>
         </div>
       </Padder>

src/redux/auth/index.ts

@@ -50,11 +50,12 @@ const INITIAL_STATE: IAuthState = {
 
   register_social: {
     errors: {
-      username: '',
-      password: '',
+      username: 'and this',
+      password: 'dislike this',
     },
-    error: '',
-    token: '',
+    error: 'dont like this one',
+    token:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJEYXRhIjp7IlByb3ZpZGVyIjoiZ29vZ2xlIiwiSWQiOiJma2F0dXJvdkBpY2Vyb2NrZGV2LmNvbSIsIkVtYWlsIjoiZmthdHVyb3ZAaWNlcm9ja2Rldi5jb20iLCJUb2tlbiI6InlhMjkuYTBBZkg2U01EeXFGdlRaTExXckhsQm1QdGZIOFNIVGQteWlSYTFKSXNmVXluY2F6MTZ5UGhjRmxydTlDMWFtTEg0aHlHRzNIRkhrVGU0SXFUS09hVVBEREdqR2JQRVFJbGpPME9UbUp2T2RrdEtWNDVoUGpJcTB1cHVLc003UWJLSm1oRWhkMEFVa3YyejVHWlNSMjhaM2VOZVdwTEVYSGV0MW1yNyIsIkZldGNoZWQiOnsiUHJvdmlkZXIiOiJnb29nbGUiLCJJZCI6OTIyMzM3MjAzNjg1NDc3NTgwNywiTmFtZSI6IkZlZG9yIEthdHVyb3YiLCJQaG90byI6Imh0dHBzOi8vbGg2Lmdvb2dsZXVzZXJjb250ZW50LmNvbS8ta1VMYXh0VV9jZTAvQUFBQUFBQUFBQUkvQUFBQUFBQUFBQUEvQU1adXVjbkEycTFReU1WLUN0RUtBclRhQzgydE52NTM2QS9waG90by5qcGcifX0sIlR5cGUiOiJvYXV0aF9jbGFpbSJ9.r1MY994BC_g4qRDoDoyNmwLs0qRzBLx6_Ez-3mHQtwg',
     is_loading: false,
   },
 };

src/redux/auth/sagas.ts

@@ -55,7 +55,7 @@ import { IMessageNotification, IResultWithStatus, OAUTH_EVENT_TYPES, Unwrap } fr
 import { IAuthState, IUser } from './types';
 import { REHYDRATE, RehydrateAction } from 'redux-persist';
 import { selectModal } from '~/redux/modal/selectors';
-import { IModalState } from '~/redux/modal/reducer';
+import { IModalState } from '~/redux/modal';
 import { DIALOGS } from '~/redux/modal/constants';
 import { ERRORS } from '~/constants/errors';
 

src/redux/modal/actions.ts

@@ -1,4 +1,4 @@
-import { IModalState } from '~/redux/modal/reducer';
+import { IModalState } from '~/redux/modal/index';
 import { MODAL_ACTIONS } from '~/redux/modal/constants';
 import { IFile } from '../types';
 

src/redux/modal/index.ts

@@ -13,8 +13,8 @@ export interface IModalState {
 }
 
 const INITIAL_STATE: IModalState = {
-  is_shown: false,
-  dialog: null,
+  is_shown: true,
+  dialog: DIALOGS.LOGIN_SOCIAL_REGISTER,
   photoswipe: {
     images: [],
     index: 0,

src/redux/store.ts

@@ -23,7 +23,7 @@ import uploadSaga from '~/redux/uploads/sagas';
 import player, { IPlayerState } from '~/redux/player/reducer';
 import playerSaga from '~/redux/player/sagas';
 
-import modal, { IModalState } from '~/redux/modal/reducer';
+import modal, { IModalState } from '~/redux/modal';
 import { modalSaga } from './modal/sagas';
 
 import { gotAuthPostMessage, authOpenProfile } from './auth/actions';