fixed cyclic dependencies for dialogs

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,37 +1,43 @@
-import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { ScrollDialog } from "../ScrollDialog";
-import { IDialogProps } from "~/redux/modal/constants";
-import { useCloseOnEscape } from "~/utils/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 * as styles from "./styles.scss";
-import { selectAuthLogin } from "~/redux/auth/selectors";
-import * as ACTIONS from "~/redux/auth/actions";
-import { API } from "~/constants/api";
-import { BetterScrollDialog } from "../BetterScrollDialog";
+import React, { FC, FormEvent, useCallback, useEffect, useState, useMemo } from 'react';
+import { connect } from 'react-redux';
+import { IDialogProps } from '~/redux/modal/constants';
+import { DIALOGS } from '~/redux/modal/constants';
+import { useCloseOnEscape } from '~/utils/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 * as styles from './styles.scss';
+import * as ACTIONS from '~/redux/auth/actions';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
 const mapStateToProps = selectAuthLogin;
 
 const mapDispatchToProps = {
   userSendLoginRequest: ACTIONS.userSendLoginRequest,
-  userSetLoginError: ACTIONS.userSetLoginError
+  userSetLoginError: ACTIONS.userSetLoginError,
+  modalShowDialog: MODAL_ACTIONS.modalShowDialog,
 };
 
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  IDialogProps & {};
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
+
+console.log('initial', MODAL_ACTIONS);
 
 const LoginDialogUnconnected: FC<IProps> = ({
   onRequestClose,
   error,
   userSendLoginRequest,
-  userSetLoginError
+  userSetLoginError,
+  modalShowDialog,
 }) => {
-  const [username, setUserName] = useState("");
-  const [password, setPassword] = useState("");
+  console.log({ modalShowDialog, MODAL_ACTIONS });
+
+  const [username, setUserName] = useState('');
+  const [password, setPassword] = useState('');
 
   const onSubmit = useCallback(
     (event: FormEvent) => {
@@ -41,61 +47,60 @@ const LoginDialogUnconnected: FC<IProps> = ({
     [userSendLoginRequest, username, password]
   );
 
+  const onRestoreRequest = useCallback(
+    event => {
+      console.log('a', { MODAL_ACTIONS, modalShowDialog, userSetLoginError });
+      event.preventDefault();
+      modalShowDialog(DIALOGS.RESTORE_REQUEST);
+    },
+    [modalShowDialog, userSetLoginError]
+  );
+
   const onSocialLogin = useCallback(() => {
-    window.open(API.USER.VKONTAKTE_LOGIN, "", "width=600,height=400");
+    window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400');
   }, []);
 
   useEffect(() => {
     if (error) userSetLoginError(null);
   }, [username, password]);
 
-  const buttons = (
-    <Group horizontal className={styles.footer}>
-      <Button stretchy>
-        <span>Войти</span>
-      </Button>
-    </Group>
+  const buttons = useMemo(
+    () => (
+      <Group className={styles.footer}>
+        <Button
+          className={styles.secondary_button}
+          iconLeft="vk"
+          type="button"
+          onClick={onSocialLogin}
+        >
+          <span>Вконтакте</span>
+        </Button>
+
+        <Button>
+          <span>Войти</span>
+        </Button>
+      </Group>
+    ),
+    [onSocialLogin]
   );
 
   useCloseOnEscape(onRequestClose);
 
   return (
     <form onSubmit={onSubmit}>
-      <BetterScrollDialog
-        width={260}
-        error={error}
-        onClose={onRequestClose}
-        footer={buttons}
-      >
+      <BetterScrollDialog width={260} error={error} onClose={onRequestClose} footer={buttons}>
         <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" />
 
-              <Group className={styles.buttons}>
-                <Button
-                  className={styles.vk}
-                  iconLeft="vk"
-                  type="button"
-                  onClick={onSocialLogin}
-                >
-                  <span>Вконтакте</span>
-                </Button>
-              </Group>
+              <Button className={styles.forgot_button} type="button" onClick={onRestoreRequest}>
+                Вспомнить пароль
+              </Button>
             </Group>
           </div>
         </Padder>

src/containers/dialogs/LoginDialog/styles.scss

@@ -1,4 +1,5 @@
-$vk_color: darken(desaturate($blue, 100%), 30%);
+$secondary_color: darken(desaturate($blue, 100%), 30%);
+$vk_color: $secondary_color;
 
 .wrap {
   display: flex;
@@ -15,7 +16,7 @@ $vk_color: darken(desaturate($blue, 100%), 30%);
   }
 }
 
-.vk {
+.secondary_button {
   background: $content_bg;
   box-shadow: inset $vk_color 0 0 0 2px;
   color: $vk_color;
@@ -23,11 +24,15 @@ $vk_color: darken(desaturate($blue, 100%), 30%);
   svg {
     fill: $vk_color;
     margin-right: $gap;
-    // width: 24px;
-    // height: 24px;
   }
 }
 
+.forgot_button {
+  background: $content_bg;
+  box-shadow: none;
+  color: $secondary_color;
+}
+
 .buttons {
   margin: $gap * 2 0 0 0 !important;
   padding: $gap * 2 0 0 0;
@@ -41,3 +46,12 @@ $vk_color: darken(desaturate($blue, 100%), 30%);
     // text-align: left;
   }
 }
+
+.links {
+  font: $font_14_regular;
+  text-align: center;
+
+  a {
+    color: lighten($content_bg, 40%);
+  }
+}

src/containers/dialogs/Modal/index.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import * as styles from './styles.scss';
 import { IState } from '~/redux/store';
 import * as ACTIONS from '~/redux/modal/actions';
-import { DIALOG_CONTENT } from '~/redux/modal/constants';
+import { DIALOG_CONTENT } from '~/constants/dialogs';
 
 const mapStateToProps = ({ modal }: IState) => ({ ...modal });
 const mapDispatchToProps = {

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -0,0 +1,41 @@
+import React, { FC, useState, useMemo, useCallback } from 'react';
+import { IDialogProps } from '~/redux/types';
+import { connect } from 'react-redux';
+import { BetterScrollDialog } from '../BetterScrollDialog';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '~/components/input/Button';
+
+const mapStateToProps = () => ({});
+const mapDispatchToProps = {};
+
+type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const RestoreRequestDialogUnconnected: FC<IProps> = ({}) => {
+  const [field, setField] = useState();
+
+  const onSubmit = useCallback(event => {
+    event.preventDefault();
+  }, []);
+
+  const buttons = useMemo(() => <Button>Восстановить</Button>, []);
+
+  return (
+    <form onSubmit={onSubmit}>
+      <BetterScrollDialog footer={buttons}>
+        <Group>
+          <InputText title="Имя или email" value={field} handler={setField} />
+
+          <div>Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.</div>
+        </Group>
+      </BetterScrollDialog>
+    </form>
+  );
+};
+
+const RestoreRequestDialog = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RestoreRequestDialogUnconnected);
+
+export { RestoreRequestDialog };