removed redux completely

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -1,137 +1,77 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
-import { BetterScrollDialog } from '../BetterScrollDialog';
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import styles from './styles.module.scss';
 
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import { pick } from 'ramda';
-import { selectAuthRestore } from '~/redux/auth/selectors';
-import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
-import { Icon } from '~/components/input/Icon';
 import { useCloseOnEscape } from '~/hooks';
 import { DialogComponentProps } from '~/types/modal';
+import { useRestoreCode } from '~/hooks/auth/useRestoreCode';
+import { RestoreInvalidCode } from '~/components/auth/restore/RestoreInvalidCode';
+import { RestoreSuccess } from '~/components/auth/restore/RestoreSuccess';
+import { useRestorePasswordForm } from '~/hooks/auth/useRestorePasswordForm';
+import { apiRestoreCode } from '~/api/auth';
 
-const mapStateToProps = state => ({
-  restore: selectAuthRestore(state),
-});
+type RestorePasswordDialogProps = DialogComponentProps & {
+  code: string;
+};
 
-const mapDispatchToProps = pick(['authRestorePassword', 'authSetRestore'], AUTH_ACTIONS);
+const RestorePasswordDialog: FC<RestorePasswordDialogProps> = ({ onRequestClose, code }) => {
+  useCloseOnEscape(onRequestClose);
 
-type IProps = DialogComponentProps &
-  ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {};
+  const { codeUser, isLoading, error } = useRestoreCode(code);
 
-const RestorePasswordDialogUnconnected: FC<IProps> = ({
-  restore: { error, is_loading, is_succesfull, user },
-  authSetRestore,
-  onRequestClose,
-  authRestorePassword,
-}) => {
-  const [password, setPassword] = useState('');
-  const [password_again, setPasswordAgain] = useState('');
+  const [isSent, setIsSent] = useState(false);
+  const onSent = useCallback(() => setIsSent(true), [setIsSent]);
 
-  const doesnt_match = useMemo(
-    () => !password || !password_again || password.trim() !== password_again.trim(),
-    [password_again, password]
+  const { handleChange, handleSubmit, values, errors } = useRestorePasswordForm(
+    code,
+    apiRestoreCode,
+    onSent
   );
 
-  const onSubmit = useCallback(
-    event => {
-      event.preventDefault();
-
-      if (doesnt_match) return;
-
-      authRestorePassword(password);
-    },
-    [doesnt_match, authRestorePassword, password]
-  );
-
-  useEffect(() => {
-    if (error || is_succesfull) {
-      authSetRestore({ error: '', is_succesfull: false });
-    }
-  }, [authSetRestore, error, is_succesfull, password, password_again]);
-
   const buttons = useMemo(
     () => (
       <Group className={styles.buttons}>
-        <Button color={doesnt_match ? 'outline' : 'primary'}>Восстановить</Button>
+        <Button color="primary">Восстановить</Button>
       </Group>
     ),
-    [doesnt_match]
+    []
   );
 
-  const overlay = useMemo(
-    () =>
-      is_succesfull ? (
-        <Group className={styles.shade}>
-          <Icon icon="check" size={64} />
+  const overlay = useMemo(() => {
+    if (isSent) {
+      return <RestoreSuccess username={codeUser?.username} onClick={onRequestClose} />;
+    }
 
-          <div>Пароль обновлен</div>
-          <div>Добро пожаловать домой, ~{user?.username}!</div>
+    if (error) {
+      return <RestoreInvalidCode onClose={onRequestClose} error={error} />;
+    }
 
-          <div />
-
-          <Button color="secondary" onClick={onRequestClose}>
-            Ура!
-          </Button>
-        </Group>
-      ) : (
-        undefined
-      ),
-    [is_succesfull, onRequestClose, user]
-  );
-
-  const not_ready = useMemo(
-    () => (is_loading && !user ? <div className={styles.shade} /> : undefined),
-    [is_loading, user]
-  );
-
-  const invalid_code = useMemo(
-    () =>
-      !is_loading && !user ? (
-        <Group className={styles.error_shade}>
-          <Icon icon="close" size={64} />
-
-          <div>{ERROR_LITERAL[error || ERRORS.CODE_IS_INVALID]}</div>
-
-          <div className={styles.spacer} />
-
-          <Button color="primary" onClick={onRequestClose}>
-            Очень жаль
-          </Button>
-        </Group>
-      ) : (
-        undefined
-      ),
-    [is_loading, user, error, onRequestClose]
-  );
-
-  useCloseOnEscape(onRequestClose);
+    if (isLoading) {
+      return <div className={styles.shade} />;
+    }
+  }, [isLoading, error, isSent, codeUser, onRequestClose]);
 
   return (
-    <form onSubmit={onSubmit}>
+    <form onSubmit={handleSubmit}>
       <BetterScrollDialog
         footer={buttons}
+        overlay={overlay}
         width={300}
         onClose={onRequestClose}
-        is_loading={is_loading}
-        error={error && ERROR_LITERAL[error]}
-        overlay={overlay || not_ready || invalid_code}
+        is_loading={isLoading}
       >
         <div className={styles.wrap}>
           <Group>
-            <div className={styles.header}>
-              Пришло время сменить пароль{user && user.username && `, ~${user.username}`}
-            </div>
+            <div className={styles.header}>Пришло время сменить пароль, {codeUser?.username}</div>
 
             <InputText
               title="Новый пароль"
-              value={password}
-              handler={setPassword}
+              value={values.newPassword}
+              handler={handleChange('newPassword')}
+              error={errors.newPassword}
               autoFocus
               type="password"
             />
@@ -139,9 +79,9 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
             <InputText
               title="Ещё раз"
               type="password"
-              value={password_again}
-              handler={setPasswordAgain}
-              error={password_again && doesnt_match ? ERROR_LITERAL[ERRORS.DOESNT_MATCH] : ''}
+              value={values.newPasswordAgain}
+              handler={handleChange('newPasswordAgain')}
+              error={errors.newPasswordAgain}
             />
 
             <Group className={styles.text}>
@@ -158,9 +98,4 @@ const RestorePasswordDialogUnconnected: FC<IProps> = ({
   );
 };
 
-const RestorePasswordDialog = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(RestorePasswordDialogUnconnected);
-
 export { RestorePasswordDialog };