Created
July 23, 2018 03:49
-
-
Save MarbilleJuntado/447e6e839253d5945f2992f38d7b3f29 to your computer and use it in GitHub Desktop.
Trying to submit a form automatically
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @flow */ | |
import React from 'react' | |
import isEqual from 'lodash/isEqual' | |
import validator from 'is-my-json-valid' | |
import Flatpickr from 'react-flatpickr' | |
import Select from 'react-select' | |
import moment from 'moment' | |
const debounce = require('throttle-debounce/debounce') | |
type ReactEvent = { preventDefault: Function, target: { value: ?string } } | |
type Educ = { | |
id: ?string, | |
uid: ?string, | |
school: ?string, | |
degree: ?string, | |
fieldOfStudy: ?string, | |
startDate: ?string, | |
endDate: ?string | |
} | |
type Props = { | |
educ: Educ, | |
onSave: Function, | |
onRemove: Function | |
} | |
type State = { | |
attributes: Educ | |
} | |
class EducationForm extends React.Component<Props, State> { | |
flatOptions = { | |
altInput: true, | |
altFormat: 'd/m/Y' | |
} | |
options = Array(moment().year() - 1929).fill() | |
.map((_, index) => { | |
const value = moment().year() - index | |
return { | |
value: value, | |
label: value | |
} | |
}) | |
validate = validator({ | |
required: true, | |
type: 'object', | |
properties: { | |
id: { | |
type: 'string' | |
}, | |
uid: { | |
type: 'string' | |
}, | |
school: { | |
type: 'string', | |
required: true, | |
minLength: 1 | |
}, | |
degree: { | |
type: 'string', | |
required: true, | |
minLength: 1 | |
}, | |
fieldOfStudy: { | |
type: 'string', | |
required: true, | |
minLength: 1 | |
}, | |
startDate: { | |
type: 'string', | |
required: true, | |
minLength: 1 | |
}, | |
endDate: { | |
type: 'string', | |
required: true, | |
minLength: 1 | |
} | |
} | |
}) | |
constructor (props: Props) { | |
super(props) | |
this.submitForm = debounce(1000, this.submitForm) | |
this.state = { | |
attributes: props.educ | |
} | |
this.state.attributes.startDate = '' | |
this.state.attributes.endDate = '' | |
} | |
componentWillUpdate (nextProps: Props) { | |
if (!isEqual(this.props.educ, nextProps.educ)) { | |
this.setState({ | |
attributes: nextProps.educ | |
}) | |
} | |
} | |
updateAttribute = (e: ReactEvent, attribute: string) => { | |
e.preventDefault && e.preventDefault() | |
const attributes = { | |
...this.state.attributes, | |
[attribute]: e.target ? e.target.value : e | |
} | |
this.setState({ attributes: attributes }, () => this.submitForm()) | |
} | |
onRemove = (e: ReactEvent) => { | |
e.preventDefault() | |
this.props.onRemove(this.state.attributes) | |
} | |
onSave = _ => { | |
this.validate(this.state.attributes) && | |
this.props.onSave(this.state.attributes) | |
} | |
formValid = () => { | |
return ( | |
this.validate(this.state.attributes) && | |
!isEqual(this.props.educ, this.state.attributes) | |
) | |
} | |
submitForm = _ => { | |
if (this.formValid()) { | |
this.onSave() | |
} | |
} | |
render () { | |
const attributes = this.state.attributes | |
return ( | |
<form | |
key={attributes.id || attributes.uid} | |
className='form' | |
onSubmit={this.onSave} | |
> | |
<div className='row'> | |
<div className='col-sm-11'> | |
<div className='form-group'> | |
<input | |
type='text' | |
className='form-control' | |
name='school' | |
value={attributes.school} | |
required='required' | |
placeholder='University' | |
onChange={e => { | |
this.updateAttribute(e, 'school') | |
}} | |
/> | |
</div> | |
<div className='form-group'> | |
<input | |
type='text' | |
className='form-control' | |
name='degree' | |
value={attributes.degree} | |
required='required' | |
placeholder='Degree' | |
onChange={e => { | |
this.updateAttribute(e, 'degree') | |
}} | |
/> | |
</div> | |
<div className='form-group'> | |
<input | |
type='text' | |
className='form-control' | |
name='fieldOfStudy' | |
value={attributes.fieldOfStudy} | |
required='required' | |
placeholder='Field of Study' | |
onChange={e => { | |
this.updateAttribute(e, 'fieldOfStudy') | |
}} | |
/> | |
</div> | |
<div className='row'> | |
<div className='col-sm-6'> | |
<div className='form-group'> | |
<label>Start Date</label> | |
<Select | |
className='form-control' | |
name='startDate' | |
value={attributes.startDate} | |
required={true} | |
onChange={e => { | |
this.updateAttribute(e, 'startDate') | |
}} | |
options={this.options} | |
/> | |
</div> | |
</div> | |
<div className='col-sm-6'> | |
<div className='form-group'> | |
<label>End Date</label> | |
<Select | |
className='form-control' | |
name='endDate' | |
value={attributes.endDate} | |
required={true} | |
onChange={e => { | |
this.updateAttribute(e, 'endDate') | |
}} | |
options={this.options} | |
/> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div className='col-sm-1'> | |
<button | |
href='#' | |
className='btn btn-minim -danger pl-0' | |
onClick={this.onRemove} | |
> | |
<i className='nc-icon-glyph ui-1_circle-delete' /> | |
Remove | |
</button> | |
</div> | |
</div> | |
</form> | |
) | |
} | |
} | |
export default EducationForm |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment