Permalink
Browse files

Stage 3: adding new contact

  • Loading branch information...
juhofriman committed Jul 19, 2016
1 parent dbeae05 commit 4820f9ad0eda7ca27d0311ac2af1f442495705f7
Showing with 44 additions and 7 deletions.
  1. +16 −5 src/NewContactForm.jsx
  2. +28 −2 src/PhoneBook.jsx
View
@@ -2,36 +2,47 @@ var React = require('react');
var eb = require('./eventbus.js');
var FormInput = React.createClass({
fireChangeEvent: function() {
eb.publish('UPDATE_FORM_FIELD', this.props.id, this.refs.fieldValue.value);
},
render: function() {
return (
<input ref="fieldValue" type={this.props.type} name={this.props.id} id={this.props.id}/>
<input ref="fieldValue"
value={this.props.value}
type={this.props.type}
name={this.props.id}
id={this.props.id}
onChange={this.fireChangeEvent}/>
);
}
});
module.exports = React.createClass({
commitForm: function() {
eb.publish('COMMIT_FORM');
},
render: function() {
return (
<div>
<div className="control-group column-group">
<label htmlFor="first-name" className="all-20">First name</label>
<div className="control all-80">
<FormInput type="text" id="firstname"/>
<FormInput type="text" id="firstname" value={this.props.data.firstname}/>
</div>
</div>
<div className="control-group column-group">
<label htmlFor="first-name" className="all-20">Last name</label>
<div className="control all-80">
<FormInput type="text" id="lastname"/>
<FormInput type="text" id="lastname" value={this.props.data.lastname}/>
</div>
</div>
<div className="control-group column-group">
<label htmlFor="phone" className="all-20">Phone</label>
<div className="control all-80">
<FormInput type="text" id="phone"/>
<FormInput type="text" id="phone" value={this.props.data.phone}/>
</div>
</div>
<button className="ink-button push-right">Add</button>
<button className="ink-button push-right" onClick={this.commitForm}>Add</button>
</div>
);
}
View
@@ -18,14 +18,40 @@ module.exports = React.createClass({
{firstname: 'Ada', lastname: 'Lovelace', phone: '045-43746776'},
{firstname: 'Jane', lastname: 'Doe', phone: '045-34646347'}
],
nameFilter: ''
nameFilter: '',
forms: {
newContact: {
firstname: '',
lastname: '',
phone: ''
}
}
};
},
componentDidMount: function() {
eb.on(this, 'UPDATE_FILTER', function(newFilterValue) {
console.log('UPDATE_FILTER received, updating state to nameFilter: ' + newFilterValue);
this.setState({nameFilter: newFilterValue});
});
eb.on(this, 'UPDATE_FORM_FIELD', function(fieldKey, fieldValue) {
console.log("UPDATE_FORM_FIELD received, updating " + fieldKey + ": " + fieldValue);
var newState = this.state;
newState.forms.newContact[fieldKey] = fieldValue;
this.setState(newState);
});
eb.on(this, 'COMMIT_FORM', function() {
// Look, no arguments! App db already contains everything we need.
// Remember the single point of truth principle!
this.setState({
contacts: this.state.contacts.concat([this.state.forms.newContact]),
forms: {
newContact: {
firstname: '',
lastname: '',
phone: ''
}
}});
});
},
getContacts: function() {
if(this.state.nameFilter === '') {
@@ -53,7 +79,7 @@ module.exports = React.createClass({
<div className="all-50">
<div className="ink-form">
<h4>Add new contact</h4>
<NewContactForm />
<NewContactForm data={this.state.forms.newContact}/>
</div>
</div>
</div>

0 comments on commit 4820f9a

Please sign in to comment.