refactored login dialog

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,7 +1,6 @@
-import React, { FC, FormEvent, useCallback, useEffect, useState, useMemo } from 'react';
+import React, { FC, FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
-import { IDialogProps } from '~/redux/modal/constants';
-import { DIALOGS } from '~/redux/modal/constants';
+import { DIALOGS, IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
@@ -16,8 +15,12 @@ import * as ACTIONS from '~/redux/auth/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { ISocialProvider } from '~/redux/auth/types';
 import { Grid } from '~/components/containers/Grid';
+import pick from 'ramda/es/pick';
+import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 
-const mapStateToProps = selectAuthLogin;
+const mapStateToProps = state => ({
+  ...pick(['error', 'is_registering'], selectAuthLogin(state)),
+});
 
 const mapDispatchToProps = {
   userSendLoginRequest: ACTIONS.userSendLoginRequest,
@@ -29,8 +32,9 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
 
 const LoginDialogUnconnected: FC<IProps> = ({
-  onRequestClose,
   error,
+
+  onRequestClose,
   userSendLoginRequest,
   userSetLoginError,
   authLoginWithSocial,
@@ -88,63 +92,39 @@ const LoginDialogUnconnected: FC<IProps> = ({
     return () => window.removeEventListener('message', onMessage);
   }, [onMessage]);
 
-  const buttons = useMemo(
-    () => (
-      <Group className={styles.footer}>
-        <Button>
-          <span>Войти</span>
-        </Button>
-
-        <Grid columns="repeat(2, 1fr)">
-          <Button
-            color="outline"
-            iconLeft="google"
-            type="button"
-            onClick={openOauthWindow('google')}
-          >
-            <span>Google</span>
-          </Button>
-
-          <Button
-            color="outline"
-            iconLeft="vk"
-            type="button"
-            onClick={openOauthWindow('vkontakte')}
-          >
-            <span>Вконтакте</span>
-          </Button>
-        </Grid>
-      </Group>
-    ),
-    [openOauthWindow]
-  );
-
   useCloseOnEscape(onRequestClose);
 
   return (
     <form onSubmit={onSubmit}>
-      <BetterScrollDialog width={300} error={error} onClose={onRequestClose} footer={buttons}>
-        <Padder>
-          <div className={styles.wrap}>
-            <Group>
-              <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
+      <div>
+        <BetterScrollDialog
+          width={300}
+          error={error}
+          onClose={onRequestClose}
+          footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
+        >
+          <Padder>
+            <div className={styles.wrap}>
+              <Group>
+                <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
 
-              <InputText title="Логин" handler={setUserName} value={username} autoFocus />
+                <InputText title="Логин" handler={setUserName} value={username} autoFocus />
 
-              <InputText title="Пароль" handler={setPassword} value={password} type="password" />
+                <InputText title="Пароль" handler={setPassword} value={password} type="password" />
 
-              <Button
-                color="link"
-                type="button"
-                onClick={onRestoreRequest}
-                className={styles.forgot_button}
-              >
-                Вспомнить пароль
-              </Button>
-            </Group>
-          </div>
-        </Padder>
-      </BetterScrollDialog>
+                <Button
+                  color="link"
+                  type="button"
+                  onClick={onRestoreRequest}
+                  className={styles.forgot_button}
+                >
+                  Вспомнить пароль
+                </Button>
+              </Group>
+            </div>
+          </Padder>
+        </BetterScrollDialog>
+      </div>
     </form>
   );
 };