updating examples

Author: ryanflorence

examples/auth-flow/app.js

@@ -34,7 +34,7 @@ var App = React.createClass({
           <li><Link to="about">About</Link></li>
           <li><Link to="dashboard">Dashboard</Link> (authenticated)</li>
         </ul>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }

examples/data-flow/app.js

@@ -45,7 +45,7 @@ var App = React.createClass({
           {links}
         </ul>
         <div className="Detail">
-          {this.props.activeRouteHandler({onRemoveTaco: this.handleRemoveTaco})}
+          <this.props.activeRouteHandler onRemoveTaco={this.handleRemoveTaco} />
         </div>
       </div>
     );

examples/dynamic-segments/app.js

@@ -14,7 +14,7 @@ var App = React.createClass({
           <li><Link to="user" params={{userId: "123"}}>Bob</Link></li>
           <li><Link to="user" params={{userId: "abc"}}>Sally</Link></li>
         </ul>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }
@@ -29,7 +29,7 @@ var User = React.createClass({
           <li><Link to="task" params={{userId: this.props.params.userId, taskId: "foo"}}>foo task</Link></li>
           <li><Link to="task" params={{userId: this.props.params.userId, taskId: "bar"}}>bar task</Link></li>
         </ul>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }

examples/master-detail/ContactStore.js

@@ -0,0 +1,98 @@
+var API = 'http://addressbook-api.herokuapp.com/contacts';
+var _contacts = {};
+var _changeListeners = [];
+var _initCalled = false;
+
+var ContactStore = module.exports = {
+
+  init: function () {
+    if (_initCalled)
+      return;
+
+    _initCalled = true;
+
+    getJSON(API, function (err, res) {
+      res.contacts.forEach(function (contact) {
+        _contacts[contact.id] = contact;
+      });
+
+      ContactStore.notifyChange();
+    });
+  },
+
+  addContact: function (contact, cb) {
+    postJSON(API, { contact: contact }, function (res) {
+      _contacts[res.contact.id] = res.contact;
+      ContactStore.notifyChange();
+      if (cb) cb(res.contact);
+    });
+  },
+
+  removeContact: function (id, cb) {
+    deleteJSON(API + '/' + id, cb);
+    delete _contacts[id];
+    ContactStore.notifyChange();
+  },
+
+  getContacts: function () {
+    var array = [];
+
+    for (var id in _contacts)
+      array.push(_contacts[id]);
+
+    return array;
+  },
+
+  getContact: function (id) {
+    return _contacts[id];
+  },
+
+  notifyChange: function () {
+    _changeListeners.forEach(function (listener) {
+      listener();
+    });
+  },
+
+  addChangeListener: function (listener) {
+    _changeListeners.push(listener);
+  },
+
+  removeChangeListener: function (listener) {
+    _changeListeners = _changeListeners.filter(function (l) {
+      return listener !== l;
+    });
+  }
+
+};
+
+function getJSON(url, cb) {
+  var req = new XMLHttpRequest();
+  req.onload = function() {
+    if (req.status === 404) {
+      cb(new Error('not found'));
+    } else {
+      cb(null, JSON.parse(req.response));
+    }
+  };
+  req.open('GET', url);
+  req.send();
+}
+
+function postJSON(url, obj, cb) {
+  var req = new XMLHttpRequest();
+  req.onload = function() {
+    cb(JSON.parse(req.response));
+  };
+  req.open('POST', url);
+  req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+  req.send(JSON.stringify(obj));
+}
+
+function deleteJSON(url, cb) {
+  var req = new XMLHttpRequest();
+  req.onload = cb;
+  req.open('DELETE', url);
+  req.send();
+}
+
+

examples/master-detail/app.js

@@ -6,73 +6,7 @@ var DefaultRoute = Router.DefaultRoute;
 var Routes = Router.Routes;
 var Link = Router.Link;
 var NotFoundRoute = Router.NotFoundRoute;
-
-var api = 'http://addressbook-api.herokuapp.com/contacts';
-var _contacts = {};
-var _changeListeners = [];
-var _initCalled = false;
-
-var ContactStore = {
-
-  init: function () {
-    if (_initCalled)
-      return;
-
-    _initCalled = true;
-
-    getJSON(api, function (err, res) {
-      res.contacts.forEach(function (contact) {
-        _contacts[contact.id] = contact;
-      });
-
-      ContactStore.notifyChange();
-    });
-  },
-
-  addContact: function (contact, cb) {
-    postJSON(api, { contact: contact }, function (res) {
-      _contacts[res.contact.id] = res.contact;
-      ContactStore.notifyChange();
-      if (cb) cb(res.contact);
-    });
-  },
-
-  removeContact: function (id, cb) {
-    deleteJSON(api + '/' + id, cb);
-    delete _contacts[id];
-    ContactStore.notifyChange();
-  },
-
-  getContacts: function () {
-    var array = [];
-
-    for (var id in _contacts)
-      array.push(_contacts[id]);
-
-    return array;
-  },
-
-  getContact: function (id) {
-    return _contacts[id];
-  },
-
-  notifyChange: function () {
-    _changeListeners.forEach(function (listener) {
-      listener();
-    });
-  },
-
-  addChangeListener: function (listener) {
-    _changeListeners.push(listener);
-  },
-
-  removeChangeListener: function (listener) {
-    _changeListeners = _changeListeners.filter(function (l) {
-      return listener !== l;
-    });
-  }
-
-};
+var ContactStore = require('./ContactStore');
 
 var App = React.createClass({
   getInitialState: function() {
@@ -219,38 +153,6 @@ var NotFound = React.createClass({
   }
 });
 
-// Request utils.
-
-function getJSON(url, cb) {
-  var req = new XMLHttpRequest();
-  req.onload = function() {
-    if (req.status === 404) {
-      cb(new Error('not found'));
-    } else {
-      cb(null, JSON.parse(req.response));
-    }
-  };
-  req.open('GET', url);
-  req.send();
-}
-
-function postJSON(url, obj, cb) {
-  var req = new XMLHttpRequest();
-  req.onload = function() {
-    cb(JSON.parse(req.response));
-  };
-  req.open('POST', url);
-  req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-  req.send(JSON.stringify(obj));
-}
-
-function deleteJSON(url, cb) {
-  var req = new XMLHttpRequest();
-  req.onload = cb;
-  req.open('DELETE', url);
-  req.send();
-}
-
 var routes = (
   <Route handler={App}>
     <DefaultRoute handler={Index}/>

examples/query-params/app.js

@@ -14,7 +14,7 @@ var App = React.createClass({
           <li><Link to="user" params={{userId: "123"}} query={{showAge: true}}>Bob With Query Params</Link></li>
           <li><Link to="user" params={{userId: "abc"}}>Sally</Link></li>
         </ul>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }

examples/shared-root/app.js

@@ -14,7 +14,7 @@ var App = React.createClass({
           <li><Link to="signin">Sign in</Link></li>
           <li><Link to="forgot-password">Forgot Password</Link></li>
         </ol>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }
@@ -25,7 +25,7 @@ var SignedIn = React.createClass({
     return (
       <div>
         <h2>Signed In</h2>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }
@@ -44,7 +44,7 @@ var SignedOut = React.createClass({
     return (
       <div>
         <h2>Signed Out</h2>
-        {this.props.activeRouteHandler()}
+        <this.props.activeRouteHandler />
       </div>
     );
   }