12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import { useState } from "react"
- import { connect } from "react-redux"
- import { actionFullChangeUserAvatar, actionFullChangeUserNick, actionFullChangeUserPassword } from "../actions"
- import { ConnectDropzone } from "./dropzone"
- const ProfileEdit = ({ userID, onChangeAvatar, onChangeNick, onChangePassword }) => {
- let [avatar, setAvatar] = useState(false)
- let [avatarData, setAvatarData] = useState([])
- let [nick, setNick] = useState(false)
- let [nickData, setNickData] = useState("")
- let [password, setPassword] = useState(false)
- let [passwordData, setPasswordData] = useState("")
- let [passwordValidation, setPasswordValidation] = useState("")
- const validation = new RegExp(`^(?=.*[0-9]).{${4},}$`)
- let applyHandler = (type) => {
- if (type === "avatar") {
- onChangeAvatar(userID, avatarData[0]._id)
- setAvatar(!avatar)
- setAvatarData([])
- }
- if (type === "nick") {
- onChangeNick(userID, nickData)
- setNick(!nick)
- }
- if (type === "password") {
- onChangePassword(userID, passwordData)
- setPassword(!password)
- setPasswordData("")
- }
- }
- return (
- <div>
- <div>
- <button onClick={() => setAvatar(!avatar)}>Аватар</button>
- {avatar &&
- <>
- <ConnectDropzone maxFiles={1} onSet={setAvatarData} />
- <button onClick={() => applyHandler("avatar")}>Установить</button>
- </>}
- </div>
- <div>
- <button onClick={() => setNick(!nick)}>Ник</button>
- {nick &&
- <>
- <input onChange={(e) => setNickData(e.target.value)} value={nickData} placeholder="введите новый ник" />
- <button onClick={() => applyHandler("nick")}>Установить</button>
- </>}
- </div>
- <div>
- <button onClick={() => setPassword(!password)}>Пароль</button>
- {password &&
- <>
- <input type='password' value={passwordData}
- onChange={(e) => setPasswordData(e.target.value)} placeholder="введите новый пароль" />
- <input type='password' value={passwordValidation}
- onChange={e => setPasswordValidation(e.target.value)} placeholder="повторите новый пароль" />
- <button disabled={!(passwordData === passwordValidation && validation.test(passwordData))}
- onClick={() => applyHandler("password")}>Установить</button>
- </>}
- </div>
- <a href="/chat">Вернуться на главную</a>
- </div>
- )
- }
- export const ConnectProfileEdit = connect(state => ({ userID: state.auth.payload.sub.id }),
- {
- onChangeAvatar: actionFullChangeUserAvatar,
- onChangeNick: actionFullChangeUserNick,
- onChangePassword: actionFullChangeUserPassword
- })(ProfileEdit)
|