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 {useAppDispatch, useForm} from '../../hooks'
5
import {fetchEditUser} from '../../redux/user/actions'
6
import {userStore} from '../../redux/user/slice'
7
import {THandleSubmitForm} from '../../types'
8
import styles from './profile-user.module.css'
9

10
const ProfileUser = () => {
11
  const dispatch = useAppDispatch()
12
  const {user} = useSelector(userStore)
13

14
  const {values, setValues} = useForm({
15
    name: user?.name || '',
16
    email: user?.email || '',
17
    password: user?.password || '',
18
  })
19

20
  const [editValues, setEditValues] = React.useState(values)
21
  const [visible, setVisible] = React.useState<{button: boolean; icon: string}>({
22
    button: false,
23
    icon: '',
24
  })
25

26
  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
27
    setEditValues({...editValues, [e.target.name]: e.target.value})
28
  }
29

30
  const handleFocusInput = (e: React.FocusEvent<HTMLInputElement>) => {
31
    setVisible({button: true, icon: e.target.name})
32
  }
33

34
  const cancelForm = () => {
35
    setEditValues(values)
36
    setVisible({button: false, icon: ''})
37
  }
38

39
  const handleSubmitProfile = (e: THandleSubmitForm) => {
40
    e.preventDefault()
41
    if (editValues.name && editValues.email && editValues.password) {
42
      dispatch(fetchEditUser(editValues))
43
      setValues(editValues)
44
      setVisible({button: false, icon: ''})
45
    }
46
  }
47

48
  return (
49
    <form className={styles.form} onSubmit={handleSubmitProfile}>
50
      <div className='input'>
51
        <Input
52
          value={editValues.name}
53
          type='text'
54
          name='name'
55
          placeholder='Имя'
56
          icon={visible?.icon === 'name' ? 'CloseIcon' : 'EditIcon'}
57
          onChange={handleChangeInput}
58
          onFocus={handleFocusInput}
59
        />
60
      </div>
61

62
      <div className='input'>
63
        <Input
64
          value={editValues.email}
65
          type='email'
66
          name='email'
67
          placeholder='Login'
68
          icon={visible?.icon === 'email' ? 'CloseIcon' : 'EditIcon'}
69
          onChange={handleChangeInput}
70
          onFocus={handleFocusInput}
71
        />
72
      </div>
73

74
      <div className='input'>
75
        <Input
76
          value={editValues.password}
77
          type='password'
78
          name='password'
79
          placeholder='Пароль'
80
          icon={visible?.icon === 'password' ? 'CloseIcon' : 'EditIcon'}
81
          onChange={handleChangeInput}
82
          onFocus={handleFocusInput}
83
        />
84
      </div>
85
      {visible.button && (
86
        <div className={styles.submit}>
87
          <span
88
            style={{cursor: 'pointer'}}
89
            onClick={cancelForm}
90
            className='text_type_main-default text_color_accent route-link'
91
          >
92
            Отмена
93
          </span>
94
          <Button htmlType='submit'>Сохранить</Button>
95
        </div>
96
      )}
97
    </form>
98
  )
99
}
100

101
export default ProfileUser
102