Permalink
Browse files

Stage 1: filtering

  • Loading branch information...
juhofriman committed Jul 19, 2016
1 parent 2a3b77d commit 3cad440678caa92a3fc64a2c3950ba0fa28d2046
Showing with 36 additions and 3 deletions.
  1. +5 −1 src/FilterInput.jsx
  2. +31 −2 src/PhoneBook.jsx
View
@@ -1,14 +1,18 @@
'use strict'
var React = require('react');
+var eb = require('./eventbus.js');
module.exports = React.createClass({
+ filterChange: function() {
+ eb.publish('UPDATE_FILTER', this.refs.searchInput.value);
+ },
render: function() {
return (
<div className="ink-form">
<div className="control-group column-group">
<div className="control all-100">
- <input ref="searchInput" type="text" name="filter" id="filter"/>
+ <input ref="searchInput" value={this.props.value} type="text" name="filter" id="filter" onChange={this.filterChange}/>
</div>
</div>
</div>
View
@@ -5,17 +5,46 @@ var ContactListing = require('./ContactListing.jsx');
var NewContactForm = require('./NewContactForm.jsx');
var ContactCounts = require('./ContactCounts.jsx');
var FilterInput = require('./FilterInput.jsx');
+var eb = require('./eventbus.js');
+
module.exports = React.createClass({
+ getInitialState: function() {
+ return {
+ contacts: [
+ {firstname: 'Günther', lastname: 'Haapanen', phone: '045-422452525'},
+ {firstname: 'Mock', lastname: 'Mockelson', phone: '045-2409209284'},
+ {firstname: 'Guybrush', lastname: 'Threepwood', phone: '045-467467467'},
+ {firstname: 'Ada', lastname: 'Lovelace', phone: '045-43746776'},
+ {firstname: 'Jane', lastname: 'Doe', phone: '045-34646347'}
+ ],
+ nameFilter: ''
+ };
+ },
+ componentDidMount: function() {
+ eb.on(this, 'UPDATE_FILTER', function(newFilterValue) {
+ console.log('UPDATE_FILTER received, updating state to nameFilter: ' + newFilterValue);
+ this.setState({nameFilter: newFilterValue});
+ });
+ },
+ getContacts: function() {
+ if(this.state.nameFilter === '') {
+ return this.state.contacts;
+ }
+ return this.state.contacts.filter(function(contact) {
+ return contact.lastname.indexOf(this.state.nameFilter) > -1 ||
+ contact.firstname.indexOf(this.state.nameFilter) > -1;
+ }.bind(this));
+ },
render: function() {
return (
<div>
<h1>Awesome react datastream address book</h1>
<div className="ink-grid">
<div className="column-group horizontal-gutters">
<div className="all-50">
- <FilterInput />
- <ContactListing />
+ <FilterInput value={this.state.nameFilter}/>
+ <ContactListing contacts={this.getContacts()}/>
<ContactCounts contactCount="1000" />
</div>
<div className="all-50">

0 comments on commit 3cad440

Please sign in to comment.