Created
July 23, 2018 04:57
-
-
Save MarbilleJuntado/b4cc46f993d6f34bd68595afc2c95d8f to your computer and use it in GitHub Desktop.
Original Education Form
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' | |
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' | |
} | |
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 | |
} | |
} | |
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> | |
<Flatpickr | |
className='form-control' | |
name='startDate' | |
value={attributes.startDate} | |
required='required' | |
onChange={(_, str) => { | |
this.updateAttribute(str, 'startDate') | |
}} | |
options={this.flatOptions} | |
/> | |
</div> | |
</div> | |
<div className='col-sm-6'> | |
<div className='form-group'> | |
<label>End Date</label> | |
<Flatpickr | |
className='form-control' | |
name='endDate' | |
value={attributes.endDate} | |
required='required' | |
onChange={(_, str) => { | |
this.updateAttribute(str, 'endDate') | |
}} | |
options={this.flatOptions} | |
/> | |
</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