burger-online

1
import {Button, Input} from '@ya.praktikum/react-developer-burger-ui-components'
2
import React from 'react'
3
import {useSelector} from 'react-redux'
4
import {Link, Navigate} from 'react-router-dom'
5
import {useAppDispatch, useForm} from '../../hooks'
6
import {fetchForgotPassword} from '../../redux/user/actions'
7
import {catchError, userStore} from '../../redux/user/slice'
8

9
const ForgotPassword = () => {
10
  const dispatch = useAppDispatch()
11
  const {resetPasswordStatus, errorStatus} = useSelector(userStore)
12

13
  const {values, handleChanges} = useForm({
14
    email: sessionStorage.getItem('email') || '',
15
  })
16

17
  const handleSubmitForgotPassword = (e: {preventDefault: () => void}) => {
18
    e.preventDefault()
19
    dispatch(fetchForgotPassword(values))
20
  }
21

22
  React.useEffect(() => {
23
    setTimeout(() => {
24
      dispatch(catchError(null))
25
    }, 6000)
26
  }, [errorStatus, dispatch])
27

28
  if (resetPasswordStatus) return <Navigate to='/reset-password' replace />
29
  return (
30
    <section className='wrapper'>
31
      <form className='content-route' onSubmit={handleSubmitForgotPassword}>
32
        <h2 className='text text_type_main-medium'>Восстановление пароля</h2>
33
        <Input
34
          autoFocus
35
          value={values.email}
36
          type='email'
37
          name='email'
38
          placeholder='Укажите E-mail'
39
          onChange={handleChanges}
40
        />
41
        <Button disabled={!values.email} htmlType='submit'>
42
          Восстановить
43
        </Button>
44
        <span
45
          className={`text text_type_main-default ${errorStatus ? 'text-error-active' : 'text-error'}`}
46
        >
47
          {errorStatus?.message}
48
        </span>
49
      </form>
50

51
      <p className='text text_type_main-default text_color_inactive'>
52
        Вспомнили пароль?{' '}
53
        <Link to='/login' className='route-link text_color_accent'>
54
          Войти
55
        </Link>
56
      </p>
57
    </section>
58
  )
59
}
60

61
export default ForgotPassword
62