1
1
import Checkbox from '@material-ui/core/Checkbox'
2
- import FormControlLabel from '@material-ui/core/FormControlLabel' ;
2
+ import FormControlLabel from '@material-ui/core/FormControlLabel'
3
3
import FormGroup from '@material-ui/core/FormGroup'
4
4
import FormHelperText from '@material-ui/core/FormHelperText'
5
5
import TextField from '@material-ui/core/TextField'
@@ -13,7 +13,7 @@ const SectionStyled = styled.section`
13
13
max-width: ${ ( { theme } ) => theme . width . article } ;
14
14
padding: 0 ${ ( { theme } ) => theme . spacing [ 2 ] } px;
15
15
text-align: center;
16
- input[type=submit] {
16
+ input[type=' submit' ] {
17
17
background-color: ${ ( { theme } ) => theme . color . blue } ;
18
18
border: none;
19
19
color: ${ ( { theme } ) => theme . color . white } ;
@@ -38,7 +38,9 @@ const SectionStyled = styled.section`
38
38
width: 100%;
39
39
@media ${ ( { theme } ) => theme . breakpoint . sm } {
40
40
margin: 0 auto;
41
- padding: 0 ${ ( { theme } ) => theme . spacing [ 2 ] } px ${ ( { theme } ) => theme . spacing [ 6 ] } px ${ ( { theme } ) => theme . spacing [ 2 ] } px;
41
+ padding: 0 ${ ( { theme } ) => theme . spacing [ 2 ] } px
42
+ ${ ( { theme } ) => theme . spacing [ 6 ] } px
43
+ ${ ( { theme } ) => theme . spacing [ 2 ] } px;
42
44
}
43
45
label {
44
46
color: ${ ( { theme } ) => theme . color . black } ;
@@ -56,7 +58,9 @@ const SectionStyled = styled.section`
56
58
padding: 0 0 ${ ( { theme } ) => theme . spacing [ 4 ] } px 0;
57
59
width: 100%;
58
60
@media ${ ( { theme } ) => theme . breakpoint . sm } {
59
- padding: 0 ${ ( { theme } ) => theme . spacing [ 2 ] } px ${ ( { theme } ) => theme . spacing [ 6 ] } px ${ ( { theme } ) => theme . spacing [ 2 ] } px;
61
+ padding: 0 ${ ( { theme } ) => theme . spacing [ 2 ] } px
62
+ ${ ( { theme } ) => theme . spacing [ 6 ] } px
63
+ ${ ( { theme } ) => theme . spacing [ 2 ] } px;
60
64
width: 50%;
61
65
}
62
66
label {
@@ -87,24 +91,24 @@ export default function Form() {
87
91
const [ formError , formErrorSet ] = React . useState ( { } )
88
92
89
93
const handleChange = ( event ) => {
90
- formErrorSet ( prevData => ( {
94
+ formErrorSet ( ( prevData ) => ( {
91
95
...prevData ,
92
- ' consent' : ! event . target . checked ,
96
+ consent : ! event . target . checked
93
97
} ) )
94
98
95
99
setChecked ( event . target . checked )
96
100
}
97
101
98
102
const updateInput = ( event , field ) => {
99
- FormDataSet ( prevData => ( {
103
+ FormDataSet ( ( prevData ) => ( {
100
104
...prevData ,
101
- [ field ] : event . target . value ,
105
+ [ field ] : event . target . value
102
106
} ) )
103
107
104
- const fieldError = ( event . target . value . length > 0 ) ? false : true
105
- formErrorSet ( prevData => ( {
108
+ const fieldError = event . target . value . length > 0 ? false : true
109
+ formErrorSet ( ( prevData ) => ( {
106
110
...prevData ,
107
- [ field ] : fieldError ,
111
+ [ field ] : fieldError
108
112
} ) )
109
113
}
110
114
@@ -113,65 +117,69 @@ export default function Form() {
113
117
114
118
const syncErrors = [ ]
115
119
if ( ! formData [ 'first-name' ] || formData [ 'first-name' ] . length < 1 ) {
116
- formErrorSet ( prevData => ( {
120
+ formErrorSet ( ( prevData ) => ( {
117
121
...prevData ,
118
- 'first-name' : true ,
122
+ 'first-name' : true
119
123
} ) )
120
124
syncErrors . push ( 'first-name' )
121
125
}
122
126
123
127
if ( ! formData [ 'last-name' ] || formData [ 'last-name' ] . length < 1 ) {
124
- formErrorSet ( prevData => ( {
128
+ formErrorSet ( ( prevData ) => ( {
125
129
...prevData ,
126
- 'last-name' : true ,
130
+ 'last-name' : true
127
131
} ) )
128
132
syncErrors . push ( 'last-name' )
129
133
}
130
134
131
135
if ( ! formData [ 'company' ] || formData [ 'company' ] . length < 1 ) {
132
- formErrorSet ( prevData => ( {
136
+ formErrorSet ( ( prevData ) => ( {
133
137
...prevData ,
134
- ' company' : true ,
138
+ company : true
135
139
} ) )
136
140
syncErrors . push ( 'company' )
137
141
}
138
142
139
143
if ( ! formData [ 'job-title' ] || formData [ 'job-title' ] . length < 1 ) {
140
- formErrorSet ( prevData => ( {
144
+ formErrorSet ( ( prevData ) => ( {
141
145
...prevData ,
142
- 'job-title' : true ,
146
+ 'job-title' : true
143
147
} ) )
144
148
syncErrors . push ( 'job-title' )
145
149
}
146
150
147
- if ( ! formData [ 'email' ] || formData [ 'email' ] . length < 1 || ! validateEmail ( formData [ 'email' ] ) ) {
148
- formErrorSet ( prevData => ( {
151
+ if (
152
+ ! formData [ 'email' ] ||
153
+ formData [ 'email' ] . length < 1 ||
154
+ ! validateEmail ( formData [ 'email' ] )
155
+ ) {
156
+ formErrorSet ( ( prevData ) => ( {
149
157
...prevData ,
150
- ' email' : true ,
158
+ email : true
151
159
} ) )
152
160
syncErrors . push ( 'email' )
153
161
}
154
162
155
163
if ( ! formData [ 'phone' ] || formData [ 'phone' ] . length < 1 ) {
156
- formErrorSet ( prevData => ( {
164
+ formErrorSet ( ( prevData ) => ( {
157
165
...prevData ,
158
- ' phone' : true ,
166
+ phone : true
159
167
} ) )
160
168
syncErrors . push ( 'phone' )
161
169
}
162
170
163
171
if ( ! formData [ 'message' ] || formData [ 'message' ] . length < 1 ) {
164
- formErrorSet ( prevData => ( {
172
+ formErrorSet ( ( prevData ) => ( {
165
173
...prevData ,
166
- ' message' : true ,
174
+ message : true
167
175
} ) )
168
176
syncErrors . push ( 'message' )
169
177
}
170
178
171
179
if ( ! checked ) {
172
- formErrorSet ( prevData => ( {
180
+ formErrorSet ( ( prevData ) => ( {
173
181
...prevData ,
174
- ' consent' : true ,
182
+ consent : true
175
183
} ) )
176
184
syncErrors . push ( 'consent' )
177
185
}
@@ -181,7 +189,7 @@ export default function Form() {
181
189
url : 'https://formspree.io/f/mqkyorzl' ,
182
190
method : 'post' ,
183
191
headers : {
184
- ' Accept' : 'application/json'
192
+ Accept : 'application/json'
185
193
} ,
186
194
data : {
187
195
first_name : formData [ 'first-name' ] ,
@@ -204,8 +212,8 @@ export default function Form() {
204
212
}
205
213
206
214
function validateEmail ( email ) {
207
- const re = / ^ ( ( [ ^ < > ( ) [ \] \\ . , ; : \s @ " ] + ( \. [ ^ < > ( ) [ \] \\ . , ; : \s @ " ] + ) * ) | ( " .+ " ) ) @ ( ( \[ [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \] ) | ( ( [ a - z A - Z \- 0 - 9 ] + \. ) + [ a - z A - Z ] { 2 , } ) ) $ / ;
208
- return re . test ( String ( email ) . toLowerCase ( ) ) ;
215
+ const re = / ^ ( ( [ ^ < > ( ) [ \] \\ . , ; : \s @ " ] + ( \. [ ^ < > ( ) [ \] \\ . , ; : \s @ " ] + ) * ) | ( " .+ " ) ) @ ( ( \[ [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \. [ 0 - 9 ] { 1 , 3 } \] ) | ( ( [ a - z A - Z \- 0 - 9 ] + \. ) + [ a - z A - Z ] { 2 , } ) ) $ /
216
+ return re . test ( String ( email ) . toLowerCase ( ) )
209
217
}
210
218
211
219
return (
@@ -297,17 +305,17 @@ export default function Form() {
297
305
}
298
306
label = 'I consent to my submitted data being collected and stored.'
299
307
/>
300
- < FormHelperText className = 'check-error-text' error > { ( formError [ 'consent' ] ) ? 'Required field.' : < span > </ span > } </ FormHelperText >
308
+ < FormHelperText className = 'check-error-text' error >
309
+ { formError [ 'consent' ] ? 'Required field.' : < span > </ span > }
310
+ </ FormHelperText >
301
311
302
312
< input onClick = { submitForm } type = 'submit' value = 'send »' />
303
313
</ form >
304
314
305
315
{ status === 'SUCCESS' && (
306
316
< p > Thank you for your message. It has been sent.</ p >
307
317
) }
308
- { status === 'ERROR' && (
309
- < p > Ooops! There was an error. Please try again</ p >
310
- ) }
318
+ { status === 'ERROR' && < p > Ooops! There was an error. Please try again</ p > }
311
319
</ SectionStyled >
312
320
)
313
321
}
0 commit comments