aldendaniels · August 29, 2015 14:16 · Feb 25, 2015 · Feb 25, 2015 · Feb 25, 2015
diff --git a/index.js b/index.js
@@ -33,6 +33,7 @@ var store = (function() {
       store.emit('change');
     }
   });
+
   return store;
 })();
 
@@ -88,7 +89,7 @@ var App = React.createClass({
     var people         = this.state.get('people');
     var cat            = this.state.get('cat');
     var catOwner       = findById(people, cat.get('ownerId'));
-    var catOwnerParent = findById(people, catOwner.get('parentId'));    
+    var catOwnerParent = findById(people, catOwner.get('parentId'));
     return React.createElement('div', null,
       cat.get('name') + ' is owned by ' + catOwner.get('name') + ', child of ' + catOwnerParent.get('name')
     );

diff --git a/index.js b/index.js
@@ -1,5 +1,6 @@
+// See http://stackoverflow.com/questions/27446960/immutable-js-relationships?nah=1#28730230
 var Immutable = require('immutable');
-var React     = require('react');
+var React     = require('react/addons');
 var emitter   = require('event-emitter');
 
 var store = (function() {
@@ -35,12 +36,28 @@ var store = (function() {
   return store;
 })();
 
-function findPersonById(people, id) {
-  return people.find(function(person) {
-    return person.get('id') === id;
+function findById(list, id) {
+  return list.find(function(item) {
+    return item.get('id') === id;
   });
 }
 
+var Person = React.createClass({
+  mixins: [React.addons.PureRenderMixin],
+
+  props: {
+    person: React.PropTypes.instanceOf(Immutable.Map),
+    parent: React.PropTypes.instanceOf(Immutable.Map)
+  },
+
+  render: function() {
+      return React.createElement('li', null, 
+        this.props.person.get('name') + 
+        (this.props.parent ? ' is a child of ' + this.props.parent.get('name') : '')
+      );
+  }
+});
+
 var App = React.createClass({
   getInitialState: function() {
     return store.getState();
@@ -63,18 +80,16 @@ var App = React.createClass({
   },
 
   renderPerson: function(person) {
-      var parent = findPersonById(this.state.get('people'), person.get('parentId'));
-      return React.createElement('li', null, 
-        person.get('name') + (parent ? ' is a child of ' + parent.get('name') : '')
-      );
+      var parent = findById(this.state.get('people'), person.get('parentId'));
+      return React.createElement(Person, {person: person, parent: parent});
   },
 
   renderCat: function() {
     var people         = this.state.get('people');
     var cat            = this.state.get('cat');
-    var catOwner       = findPersonById(people, cat.get('ownerId'));
-    var catOwnerParent = findPersonById(people, catOwner.get('parentId'));    
-    return React.createElement('div', null, 
+    var catOwner       = findById(people, cat.get('ownerId'));
+    var catOwnerParent = findById(people, catOwner.get('parentId'));    
+    return React.createElement('div', null,
       cat.get('name') + ' is owned by ' + catOwner.get('name') + ', child of ' + catOwnerParent.get('name')
     );
   },

diff --git a/minified.js b/minified.js
diff --git a/index.js b/index.js
@@ -0,0 +1,96 @@
+var Immutable = require('immutable');
+var React     = require('react');
+var emitter   = require('event-emitter');
+
+var store = (function() {
+  // John has two children named Alice and Bob.
+  // John's child Bob has a cat named Orion.
+  var state = new Immutable.fromJS({
+    people: [
+      { id: 1, name: 'John' },
+      { id: 2, name: 'Alice', parentId: 1 },
+      { id: 3, name: 'Bob',   parentId: 1 }
+    ],
+    cat: { 
+      name: 'Orion', 
+      ownerId: 3 
+    }
+  });
+
+  var store = emitter({
+    getState: function() {
+      return state;
+    },
+
+    renameJohn: function() {
+      var curName = state.getIn(['people', 0, 'name']);
+      state = state.setIn(['people', 0, 'name'], curName === 'John' ? 'Jane' : 'John');
+      store._emitChange();
+    },
+
+    _emitChange: function() {
+      store.emit('change');
+    }
+  });
+  return store;
+})();
+
+function findPersonById(people, id) {
+  return people.find(function(person) {
+    return person.get('id') === id;
+  });
+}
+
+var App = React.createClass({
+  getInitialState: function() {
+    return store.getState();
+  },
+
+  componentDidMount: function() {
+    store.on('change', this.onStoreChange);
+  },
+
+  componentWillUnmount: function() {
+    store.off('change', this.onStoreChange);
+  },
+
+  onStoreChange: function() {
+    this.replaceState(store.getState());
+  },
+
+  changeName: function() {
+    store.renameJohn();
+  },
+
+  renderPerson: function(person) {
+      var parent = findPersonById(this.state.get('people'), person.get('parentId'));
+      return React.createElement('li', null, 
+        person.get('name') + (parent ? ' is a child of ' + parent.get('name') : '')
+      );
+  },
+
+  renderCat: function() {
+    var people         = this.state.get('people');
+    var cat            = this.state.get('cat');
+    var catOwner       = findPersonById(people, cat.get('ownerId'));
+    var catOwnerParent = findPersonById(people, catOwner.get('parentId'));    
+    return React.createElement('div', null, 
+      cat.get('name') + ' is owned by ' + catOwner.get('name') + ', child of ' + catOwnerParent.get('name')
+    );
+  },
+
+  render: function() {
+    var peopleElems = this.state.get('people').toArray().map(this.renderPerson);
+    var catElem = this.renderCat();
+    return React.createElement('div', {style: {fontFamily: 'arial', padding: '30px'}}, [
+      React.createElement('h4',  null, 'People'),
+      React.createElement('ul',  null, peopleElems),
+      React.createElement('h4',  null, 'The Cat'),
+      React.createElement('div', null, catElem),
+      React.createElement('br'),
+      React.createElement('button', {onClick: this.changeName}, 'Toggle Name')
+    ]);
+  }
+});
+
+React.render(React.createElement(App), document.body);
diff --git a/minified.js b/minified.js
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "requirebin-sketch",
+  "version": "1.0.0",
+  "dependencies": {
+    "immutable": "3.6.2",
+    "react": "0.12.2",
+    "event-emitter": "0.3.3"
+  }
+}
diff --git a/page-head.html b/page-head.html
@@ -0,0 +1,2 @@
+<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
+body, html { height: 100%; width: 100%; }</style>
diff --git a/requirebin.md b/requirebin.md
@@ -0,0 +1 @@
+made with [requirebin](http://requirebin.com)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
		body, html { height: 100%; width: 100%; }</style>