[fixed] use context in examples

Author: agundermann

examples/animations/app.js

@@ -1,14 +1,16 @@
-// TODO: animations aren't happening, not sure what the problem is
 var React = require('react');
 var TransitionGroup = require('react/lib/ReactCSSTransitionGroup');
 var Router = require('react-router');
 var { Route, RouteHandler, Link } = Router;
 
 var App = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render: function () {
-    var name = this.getRoutes().slice(0).reverse()[0].name;
+    var name = this.context.router.getCurrentRoutes().slice(0).reverse()[0].name;
 
     return (
       <div>
@@ -48,8 +50,8 @@ var Page2 = React.createClass({
 
 var routes = (
   <Route handler={App}>
-    <Route name="page1" handler={Page1} addHandlerKey={true} />
-    <Route name="page2" handler={Page2} addHandlerKey={true} />
+    <Route name="page1" handler={Page1} />
+    <Route name="page2" handler={Page2} />
   </Route>
 );
 

examples/auth-flow/app.js

@@ -1,6 +1,6 @@
 var React = require('react');
 var Router = require('react-router');
-var { Route, RouteHandler, Link, State } = Router;
+var { Route, RouteHandler, Link } = Router;
 
 var App = React.createClass({
   getInitialState: function () {
@@ -65,7 +65,10 @@ var Dashboard = React.createClass({
 });
 
 var Login = React.createClass({
-  mixins: [ Router.Navigation, State],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   getInitialState: function () {
     return {
@@ -75,17 +78,18 @@ var Login = React.createClass({
 
   handleSubmit: function (event) {
     event.preventDefault();
-    var nextPath = this.getQuery().nextPath;
+    var { router } = this.context;
+    var nextPath = router.getCurrentQuery().nextPath;
     var email = this.refs.email.getDOMNode().value;
     var pass = this.refs.pass.getDOMNode().value;
     auth.login(email, pass, function (loggedIn) {
       if (!loggedIn)
         return this.setState({ error: true });
 
       if (nextPath) {
-        this.replaceWith(nextPath);
+        router.replaceWith(nextPath);
       } else {
-        this.replaceWith('/about');
+        router.replaceWith('/about');
       }
     }.bind(this));
   },
@@ -164,7 +168,7 @@ function pretendRequest(email, pass, cb) {
     if (email === '[email protected]' && pass === 'password1') {
       cb({
         authenticated: true,
-        token: Math.random().toString(36).substring(7),
+        token: Math.random().toString(36).substring(7)
       });
     } else {
       cb({authenticated: false});

examples/data-flow/app.js

@@ -4,7 +4,9 @@ var { Route, RouteHandler, Link } = Router;
 
 var App = React.createClass({
 
-  mixins: [ Router.Navigation ],
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   getInitialState: function () {
     return {
@@ -28,7 +30,7 @@ var App = React.createClass({
       return taco.name != removedTaco;
     });
     this.setState({tacos: tacos});
-    this.transitionTo('/');
+    this.context.router.transitionTo('/');
   },
 
   render: function () {
@@ -54,16 +56,19 @@ var App = React.createClass({
 });
 
 var Taco = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   remove: function () {
-    this.props.onRemoveTaco(this.getParams().name);
+    this.props.onRemoveTaco(this.context.router.getCurrentParams().name);
   },
 
   render: function () {
     return (
       <div className="Taco">
-        <h1>{this.getParams().name}</h1>
+        <h1>{this.context.router.getCurrentParams().name}</h1>
         <button onClick={this.remove}>remove</button>
       </div>
     );

examples/dynamic-segments/app.js

@@ -17,10 +17,13 @@ var App = React.createClass({
 });
 
 var User = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render () {
-    var { userId } = this.getParams();
+    var { userId } = this.context.router.getCurrentParams();
     return (
       <div className="User">
         <h1>User id: {userId}</h1>
@@ -36,10 +39,13 @@ var User = React.createClass({
 
 
 var Task = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render () {
-    var { userId, taskId } = this.getParams();
+    var { userId, taskId } = this.context.router.getCurrentParams();
     return (
       <div className="Task">
         <h2>User id: {userId}</h2>

examples/master-detail/app.js

@@ -68,10 +68,12 @@ var Index = React.createClass({
 
 var Contact = React.createClass({
 
-  mixins: [ Router.Navigation, Router.State ],
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   getStateFromStore: function () {
-    var id = this.getParams().id;
+    var id = this.context.router.getCurrentParams().id;
     return {
       contact: ContactStore.getContact(id)
     };
@@ -101,9 +103,10 @@ var Contact = React.createClass({
   },
 
   destroy: function () {
-    var id = this.getParams().id;
+    var { router } = this.context;
+    var id = router.getCurrentParams().id;
     ContactStore.removeContact(id);
-    this.transitionTo('/');
+    router.transitionTo('/');
   },
 
   render: function () {
@@ -122,15 +125,17 @@ var Contact = React.createClass({
 
 var NewContact = React.createClass({
 
-  mixins: [ Router.Navigation ],
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   createContact: function (event) {
     event.preventDefault();
     ContactStore.addContact({
       first: this.refs.first.getDOMNode().value,
       last: this.refs.last.getDOMNode().value
     }, function (contact) {
-      this.transitionTo('contact', { id: contact.id });
+      this.context.router.transitionTo('contact', { id: contact.id });
     }.bind(this));
   },
 

examples/query-params/app.js

@@ -18,11 +18,15 @@ var App = React.createClass({
 });
 
 var User = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render: function () {
-    var age = this.getQuery().showAge ? '33' : '';
-    var userID = this.getParams().userID;
+    var { router } = this.context;
+    var age = router.getCurrentQuery().showAge ? '33' : '';
+    var userID = router.getCurrentParams().userID;
     return (
       <div className="User">
         <h1>User id: {userID}</h1>

examples/rx/app.js

@@ -18,10 +18,13 @@ var App = React.createClass({
 });
 
 var User = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render () {
-    var { userId } = this.getParams();
+    var { userId } = this.context.router.getCurrentParams();
     return (
       <div className="User">
         <h1>User id: {userId}</h1>

examples/sidebar/app.js

@@ -73,10 +73,13 @@ var Sidebar = React.createClass({
 });
 
 var App = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render: function () {
-    var activeCategory = this.getParams().category;
+    var activeCategory = this.context.router.getCurrentParams().category;
     return (
       <div>
         <Sidebar activeCategory={activeCategory} categories={data.getAll()}/>
@@ -89,10 +92,13 @@ var App = React.createClass({
 });
 
 var Item = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   render: function () {
-    var params = this.getParams();
+    var params = this.context.router.getCurrentParams();
     var category = data.lookupCategory(params.category);
     var item = data.lookupItem(params.category, params.name);
     return (

examples/simple-master-detail/app.js

@@ -38,14 +38,17 @@ var Index = React.createClass({
 });
 
 var State = React.createClass({
-  mixins: [ Router.State ],
+
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   imageUrl: function (name) {
     return "http://www.50states.com/maps/" + underscore(name) + ".gif";
   },
 
   render: function () {
-    var unitedState = findState(this.getParams().abbr);
+    var unitedState = findState(this.context.router.getCurrentParams().abbr);
     return (
       <div className="State">
         <h1>{unitedState.name}</h1>

examples/transitions/app.js

@@ -30,7 +30,9 @@ var Dashboard = React.createClass({
 
 var Form = React.createClass({
 
-  mixins: [ Router.Navigation ],
+  contextTypes: {
+    router: React.PropTypes.func.isRequired
+  },
 
   statics: {
     willTransitionFrom: function (transition, element) {
@@ -45,7 +47,7 @@ var Form = React.createClass({
   handleSubmit: function (event) {
     event.preventDefault();
     this.refs.userInput.getDOMNode().value = '';
-    this.transitionTo('/');
+    this.context.router.transitionTo('/');
   },
 
   render: function () {

examples/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
 
   module: {
     loaders: [
-      { test: /\.js$/, loader: 'babel-loader' }
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
     ]
   },