93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
import { Password, User } from '../../types'
|
|
import '../../scss/form.scss'
|
|
import { useUserContext } from '../../contexts/UserContext'
|
|
import { useAppContext } from '../../contexts/AppContext'
|
|
import { useHistory } from 'react-router'
|
|
import { message } from 'antd'
|
|
|
|
export const UserForm = () => {
|
|
const history = useHistory()
|
|
const { api } = useAppContext()
|
|
const { user } = useUserContext()
|
|
|
|
console.log(user)
|
|
|
|
const [name, setName] = useState(user?.name)
|
|
const [email, setEmail] = useState(user?.email)
|
|
const [password, setPassword] = useState('')
|
|
const [passwordConfirm, setPasswordConfirm] = useState('')
|
|
const [valid, setValid] = useState(false)
|
|
|
|
useEffect(() => {
|
|
passwordConfirm.length > 4 && password === passwordConfirm && name && email
|
|
? setValid(true)
|
|
: setValid(false)
|
|
}, [password, passwordConfirm, name, email])
|
|
|
|
// @ts-ignore
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
|
|
if (!name || !email) {
|
|
message.error('Name and email required!')
|
|
return
|
|
}
|
|
|
|
const body: Omit<User, 'id'> & Password = {
|
|
name,
|
|
email,
|
|
password,
|
|
passwordConfirm,
|
|
}
|
|
|
|
try {
|
|
user?.id
|
|
? await api.updateUser(user.id, body)
|
|
: await api.createUser(body)
|
|
|
|
if (!user?.id) history.push('/login')
|
|
} catch (err) {
|
|
message.error('Something went wrong')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h1>{user?.id ? 'Edit' : 'Create'} Profile</h1>
|
|
<form className="dank-form" onSubmit={handleSubmit}>
|
|
<label>
|
|
Name: <input value={name} onChange={(e) => setName(e.target.value)} />
|
|
</label>
|
|
<label>
|
|
Email:
|
|
<input
|
|
value={email}
|
|
type="email"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Password:
|
|
<input
|
|
value={password}
|
|
type="password"
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Confirm Password:
|
|
<input
|
|
type="password"
|
|
onChange={(e) => setPasswordConfirm(e.target.value)}
|
|
/>
|
|
</label>
|
|
<button type="submit" disabled={!valid}>
|
|
Save
|
|
</button>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|