removed redux completely

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,62 +1,29 @@
-import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import React, { FC, useCallback } from 'react';
 import { useCloseOnEscape } from '~/hooks';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
-import { selectAuthLogin } from '~/redux/auth/selectors';
-import { API } from '~/constants/api';
-import { BetterScrollDialog } from '../BetterScrollDialog';
+import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
 
 import styles from './styles.module.scss';
-import * as ACTIONS from '~/redux/auth/actions';
-import { ISocialProvider } from '~/redux/auth/types';
-import { pick } from 'ramda';
-import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
-import { OAUTH_EVENT_TYPES } from '~/redux/types';
+import { LoginDialogButtons } from '~/components/auth/login/LoginDialogButtons';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
-import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 import { DialogComponentProps } from '~/types/modal';
 import { useShowModal } from '~/hooks/modal/useShowModal';
 import { Dialog } from '~/constants/modal';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useLoginForm } from '~/hooks/auth/useLoginForm';
+import { useOAuth } from '~/hooks/auth/useOAuth';
 
-const mapStateToProps = state => ({
-  ...pick(['error', 'is_registering'], selectAuthLogin(state)),
-});
+type LoginDialogProps = DialogComponentProps & {};
 
-const mapDispatchToProps = {
-  userSendLoginRequest: ACTIONS.userSendLoginRequest,
-  userSetLoginError: ACTIONS.userSetLoginError,
-  authLoginWithSocial: ACTIONS.authLoginWithSocial,
-  authGotOauthLoginEvent: ACTIONS.authGotOauthLoginEvent,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  DialogComponentProps & {};
-
-const LoginDialogUnconnected: FC<IProps> = ({
-  error,
-
-  onRequestClose,
-  userSendLoginRequest,
-  userSetLoginError,
-  authGotOauthLoginEvent,
-}) => {
-  const [username, setUserName] = useState('');
-  const [password, setPassword] = useState('');
+const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
+  useCloseOnEscape(onRequestClose);
 
+  const { login } = useAuth();
+  const { openOauthWindow } = useOAuth();
   const showRestoreDialog = useShowModal(Dialog.RestoreRequest);
-
-  const onSubmit = useCallback(
-    (event: FormEvent) => {
-      event.preventDefault();
-      userSendLoginRequest({ username, password });
-    },
-    [userSendLoginRequest, username, password]
-  );
-
   const onRestoreRequest = useCallback(
     event => {
       event.preventDefault();
@@ -65,44 +32,13 @@ const LoginDialogUnconnected: FC<IProps> = ({
     [showRestoreDialog]
   );
 
-  const openOauthWindow = useCallback(
-    (provider: ISocialProvider) => () => {
-      window.open(API.USER.OAUTH_WINDOW(provider), '', 'width=600,height=400');
-    },
-    []
-  );
-
-  const onMessage = useCallback(
-    (event: MessageEvent) => {
-      if (!event?.data?.type || !Object.values(OAUTH_EVENT_TYPES).includes(event.data.type)) {
-        return;
-      }
-
-      authGotOauthLoginEvent(event.data);
-    },
-    [authGotOauthLoginEvent]
-  );
-
-  useEffect(() => {
-    if (error) userSetLoginError('');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [username, password]);
-
-  useEffect(() => {
-    window.addEventListener('message', onMessage);
-    return () => window.removeEventListener('message', onMessage);
-  }, [onMessage]);
-
-  useCloseOnEscape(onRequestClose);
-
-  const translatedError = useTranslatedError(error);
+  const { values, errors, handleSubmit, handleChange } = useLoginForm(login, onRequestClose);
 
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={handleSubmit}>
       <div>
         <BetterScrollDialog
           width={300}
-          error={translatedError}
           onClose={onRequestClose}
           footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
           backdrop={<div className={styles.backdrop} />}
@@ -112,9 +48,21 @@ const LoginDialogUnconnected: FC<IProps> = ({
               <Group>
                 <DialogTitle>Решительно войти</DialogTitle>
 
-                <InputText title="Логин" handler={setUserName} value={username} autoFocus />
+                <InputText
+                  title="Логин"
+                  handler={handleChange('username')}
+                  value={values.username}
+                  error={errors.username}
+                  autoFocus
+                />
 
-                <InputText title="Пароль" handler={setPassword} value={password} type="password" />
+                <InputText
+                  title="Пароль"
+                  handler={handleChange('password')}
+                  value={values.password}
+                  error={errors.password}
+                  type="password"
+                />
 
                 <Button
                   color="link"
@@ -133,6 +81,4 @@ const LoginDialogUnconnected: FC<IProps> = ({
   );
 };
 
-const LoginDialog = connect(mapStateToProps, mapDispatchToProps)(LoginDialogUnconnected);
-
 export { LoginDialog };