-
Notifications
You must be signed in to change notification settings - Fork 0
/
Register.jsx
134 lines (121 loc) · 3.52 KB
/
Register.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { FaUser } from 'react-icons/fa'
import { useSelector, useDispatch } from 'react-redux'
import { register } from '../features/auth/authSlice'
import Spinner from '../components/Spinner'
function Register() {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
password2: '',
})
const { name, email, password, password2 } = formData
const dispatch = useDispatch()
const navigate = useNavigate()
const { isLoading } = useSelector((state) => state.auth)
const onChange = (e) => {
setFormData((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}))
}
// NOTE: no need for useEffect here as we can catch the
// AsyncThunkAction rejection in our onSubmit or redirect them on the
// resolution
// Side effects shoulld go in event handlers where possible
// source: - https://beta.reactjs.org/learn/keeping-components-pure#where-you-can-cause-side-effects
const onSubmit = (e) => {
e.preventDefault()
if (password !== password2) {
toast.error('Passwords do not match')
} else {
const userData = {
name,
email,
password,
}
dispatch(register(userData))
.unwrap()
.then((user) => {
// NOTE: by unwrapping the AsyncThunkAction we can navigate the user after
// getting a good response from our API or catch the AsyncThunkAction
// rejection to show an error message
toast.success(`Registered new user - ${user.name}`)
navigate('/')
})
.catch(toast.error)
}
}
if (isLoading) {
return <Spinner />
}
return (
<>
<section className='heading'>
<h1 style={{color: "#0CAFFF"}}>
<FaUser /> Register
</h1>
<p>Please create an account</p>
</section>
<section className='form'>
<form onSubmit={onSubmit}>
<div className='form-group'>
<input
type='text'
className='form-control'
id='name'
name='name'
value={name}
onChange={onChange}
placeholder='Enter your name'
required
/>
</div>
<div className='form-group'>
<input
type='email'
className='form-control'
id='email'
name='email'
value={email}
onChange={onChange}
placeholder='Enter your email'
required
/>
</div>
<div className='form-group'>
<input
type='password'
className='form-control'
id='password'
name='password'
value={password}
onChange={onChange}
placeholder='Enter password'
required
/>
</div>
<div className='form-group'>
<input
type='password'
className='form-control'
id='password2'
name='password2'
value={password2}
onChange={onChange}
placeholder='Confirm password'
required
/>
</div>
<div className='form-group'>
<button className='btn btn-block'>Submit</button>
</div>
</form>
</section>
</>
)
}
export default Register