forked from wesley-hall/wdi-project-3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
userform.js
93 lines (83 loc) · 2.83 KB
/
userform.js
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
import React from 'react'
import UserEditMap from '../common/userEditMap'
const UserForm = ({ currentUser, handleChange, handleSubmit, mapCenter, handleLocation, errors }) => {
return (
<form
onSubmit={handleSubmit}
>
<div className="container">
<div>
<div className="container">
</div>
<label className="label">Profile Picture</label>
<input
className={`input ${errors.profilePicture ? 'is-danger': ''}`}
name="profilePicture"
value={currentUser.profilePicture || ''}
placeholder="Please submit a new Profile Picture (optional)"
onChange={handleChange}
/>
</div>
<br />
<div>
<label className="label">Email</label>
<input
className={`input ${errors.email ? 'is-danger': ''}`}
name="email"
value={currentUser.email || ''}
placeholder="Please enter your Email Address *required)"
onChange={handleChange}
/>
{errors.email && <small className="help is-danger">Email is required</small> }
</div>
<br />
<div>
<label className="label">Click to update location</label>
<UserEditMap
center={mapCenter}
onSelectLocation={handleLocation}
/>
</div>
<br />
<div>
<label className="label">Library Name</label>
<input
className={`input ${errors.libraryName ? 'is-danger': ''}`}
name="libraryName"
value={currentUser.libraryName || ''}
placeholder="Please enter a Library Name *required)"
onChange={handleChange}
/>
{errors.libraryName && <small className="help is-danger">Library Name is required</small> }
</div>
<br />
<div>
<label className="label">Library Description</label>
<textarea
className={`textarea ${errors.libraryDescription ? 'is-danger': ''}`}
name="libraryDescription"
value={currentUser.libraryDescription || ''}
placeholder="Please enter a description of your library (optional)"
onChange={handleChange}
/>
</div>
<br />
<div>
<label className="label">Library Picture</label>
<input
className={`input ${errors.libraryPicture ? 'is-danger': ''}`}
name="libraryPicture"
value={currentUser.libraryPicture || ''}
placeholder="Picture of your library (optional)"
onChange={handleChange}
/>
</div>
<br />
<div>
<button className="button is-success is-pulled-right">Save +</button>
</div>
</div>
</form>
)
}
export default UserForm