Files
freeCodeCamp/common/app/routes/Jobs/components/NewJob.jsx
Berkeley Martinez 5258145ef6 add validation to all current inputs
validation right now is simply validating that the value is indeed a
string
2015-09-22 13:56:55 -07:00

137 lines
3.6 KiB
JavaScript

import React, { PropTypes } from 'react';
import { contain } from 'thundercats-react';
import {
Col,
Input,
Row,
Well
} from 'react-bootstrap';
const defaults = {
'string': {
value: '',
valid: false,
pristine: true
}
};
function defaultValue(type) {
return defaults[type];
}
function validateString(value) {
if (!value && typeof value !== 'string') {
return false;
}
return true;
}
export default contain({
actions: 'jobActions',
store: 'jobsStore',
map({ form = {} }) {
const {
position = defaultValue('string'),
locale = defaultValue('string'),
description = defaultValue('string')
} = form;
return {
position,
locale,
description
};
}
},
React.createClass({
displayName: 'NewJob',
propTypes: {
jobActions: PropTypes.object,
position: PropTypes.object,
locale: PropTypes.object,
description: PropTypes.object
},
render() {
const {
jobActions,
position,
locale,
description
} = this.props;
return (
<div>
<Row>
<Col>
<Well className='text-center'>
<h1>Create You Job Post</h1>
<form className='form-horizontal'>
<Input
bsStyle={
!position.valid && !position.pristine ?
'error' :
null
}
label='Position'
labelClassName='col-xs-2'
onChange={ ({ target: { value } }) => {
jobActions.handleForm({
name: 'position',
value,
validator: validateString
});
}}
placeholder='Position'
type='text'
value={ position.value }
wrapperClassName='col-xs-10' />
<Input
bsStyle={
!locale.valid && !locale.pristine ?
'error' :
null
}
label='Location'
labelClassName='col-xs-2'
onChange={ ({ target: { value } }) => {
jobActions.handleForm({
name: 'locale',
value,
validator: validateString
});
}}
placeholder='Location'
type='text'
value={ locale.value }
wrapperClassName='col-xs-10' />
<Input
bsStyle={
!description.valid && !description.pristine ?
'error' :
null
}
label='Description'
labelClassName='col-xs-2'
onChange={ ({ target: { value } }) => {
jobActions.handleForm({
name: 'description',
value,
validator: validateString
});
}}
placeholder='Description'
rows='10'
type='textarea'
value={ description.value }
wrapperClassName='col-xs-10' />
</form>
</Well>
</Col>
</Row>
</div>
);
}
})
);