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

src/containers/dialogs/LoginDialog/styles.scss

@@ -1,6 +1,8 @@
 $secondary_color: darken(desaturate($blue, 100%), 30%);
 $vk_color: $secondary_color;
 
+.dialog {}
+
 .wrap {
   display: flex;
   align-items: flex-start;
@@ -37,14 +39,6 @@ $vk_color: $secondary_color;
   border-top: 1px solid black;
 }
 
-.footer {
-  padding: $gap;
-
-  button {
-    // text-align: left;
-  }
-}
-
 .links {
   font: $font_14_regular;
   text-align: center;

src/containers/dialogs/LoginDialogButtons/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC, MouseEventHandler } from 'react';
+import { Button } from '~/components/input/Button';
+import { Grid } from '~/components/containers/Grid';
+import { Group } from '~/components/containers/Group';
+import styles from './styles.scss';
+
+interface IProps {
+  openOauthWindow: (provider: string) => MouseEventHandler;
+}
+
+const LoginDialogButtons: FC<IProps> = ({ openOauthWindow }) => (
+  <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>
+);
+
+export { LoginDialogButtons };

src/containers/dialogs/LoginDialogButtons/styles.scss

@@ -0,0 +1,3 @@
+.footer {
+  padding: $gap;
+}

src/redux/auth/reducer.ts

@@ -20,6 +20,7 @@ const INITIAL_STATE: IAuthState = {
   login: {
     error: null,
     is_loading: false,
+    is_registering: true,
   },
 
   profile: {

src/redux/auth/types.ts

@@ -46,6 +46,7 @@ export type IAuthState = Readonly<{
   login: {
     error: string;
     is_loading: boolean;
+    is_registering: boolean;
   };
 
   profile: {