reimplemented AsyncProps

now loads all async props in parallel instead of
the waterfall from before

Author: ryanflorence

examples/async-data/app.js

@@ -17,12 +17,14 @@ var Spinner = React.createClass({
 var App = React.createClass({
   mixins: [ Navigation ],
 
+  getDefaultProps() {
+    return { contacts: [] };
+  },
+
   statics: {
     loadProps(params, cb) {
       loadContacts(cb);
-    },
-
-    Loader: Spinner
+    }
   },
 
   handleSubmit(event) {
@@ -31,22 +33,28 @@ var App = React.createClass({
       first: event.target.elements[0].value,
       last: event.target.elements[1].value
     }, (err, data) => {
-      this.props.onPropsDidChange();
+      this.props.reloadAsyncProps();
       this.transitionTo(`/contact/${data.contact.id}`);
     });
     event.target.reset();
     event.target.elements[0].focus();
   },
 
   render() {
+    // super smooth user feedback
+    var appStyle = {
+      transition: this.props.loading ? 'opacity 500ms ease 250ms' : 'opacity 150ms',
+      opacity: this.props.loading ? 0.5 : 1
+    };
+
     return (
-      <div className="App">
+      <div className="App" style={appStyle}>
         <form onSubmit={this.handleSubmit}>
           <input placeholder="First name"/> <input placeholder="Last name"/>{' '}
           <button type="submit">submit</button>
         </form>
         <div style={{display: 'flex'}}>
-          <ul style={{opacity: this.props.propsAreLoadingLong ? 0.5 : 1, padding: 20}}>
+          <ul style={{opacity: this.props.loadingAsyncProps ? 0.5 : 1, padding: 20}}>
             {this.props.contacts.map((contact, i) => (
               <li key={contact.id}>
                 <Link to={`/contact/${contact.id}`}>{contact.first} {contact.last}</Link>
@@ -64,29 +72,24 @@ var App = React.createClass({
 
 var Contact = React.createClass({
 
+  getDefaultProps() {
+    return { contact: {} };
+  },
+
   statics: {
     loadProps(params, cb) {
-      //console.log('Contact loadProps');
       loadContact(params.id, cb);
-    },
-
-    Loader: Spinner
-  },
-
-  getInitialState() {
-    return {
-      longLoad: false
-    };
+    }
   },
 
   render() {
     var { contact } = this.props;
 
     return (
-      <div style={{opacity: this.props.propsAreLoadingLong ? 0.5 : 1}}>
+      <div style={{opacity: this.props.loadingAsyncProps ? 0.5 : 1}}>
         <p><Link to="/">Back</Link></p>
         <h1>{contact.first} {contact.last}</h1>
-        <img key={contact.avatar} src={contact.avatar} height="200"/>
+        <p><img key={contact.avatar} src={contact.avatar} height="200"/></p>
       </div>
     );
   }
@@ -103,10 +106,12 @@ var Index = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory} createElement={AsyncProps.createElement}>
-    <Route component={App}>
-      <Route path="/" component={Index}/>
-      <Route path="contact/:id" component={Contact}/>
+  <Router history={new HashHistory()} createElement={AsyncProps.createElement}>
+    <Route component={AsyncProps} renderInitialLoad={() => <Spinner/> }>
+      <Route component={App}>
+        <Route path="/" component={Index}/>
+        <Route path="contact/:id" component={Contact}/>
+      </Route>
     </Route>
   </Router>
 ), document.getElementById('example'));

examples/async-data/utils.js

@@ -1,4 +1,5 @@
-var API = 'http://addressbook-api.herokuapp.com';
+//var API = 'http://addressbook-api.herokuapp.com';
+var API = 'http://localhost:3000';
 
 localStorage.token = localStorage.token || (Date.now()*Math.random());
 
@@ -32,6 +33,7 @@ function getJSON(url, cb) {
       cb(new Error('not found'));
     } else {
 
+      var time = 0;
       // fake a spotty server
       var time = Math.random() * 1000;
       // for a really spotty server:

examples/huge-apps/app.js

@@ -5,23 +5,30 @@ import AsyncProps from 'react-router/lib/experimental/AsyncProps';
 import stubbedCourses from './stubs/COURSES';
 
 var rootRoute = {
-  path: '/',
+  component: AsyncProps,
 
-  childRoutes: [
-    require('./routes/Calendar'),
-    require('./routes/Course'),
-    require('./routes/Grades'),
-    require('./routes/Messages'),
-    require('./routes/Profile'),
-  ],
+  // iunno?
+  renderInitialLoad() {
+    return <div>loading...</div>
+  },
 
-  component: require('./components/App'),
+  childRoutes: [{
+    path: '/',
+    component: require('./components/App'),
+    childRoutes: [
+      require('./routes/Calendar'),
+      require('./routes/Course'),
+      require('./routes/Grades'),
+      require('./routes/Messages'),
+      require('./routes/Profile'),
+    ]}
+  ]
 };
 
 React.render((
   <Router
-    children={rootRoute}
-    history={new HashHistory}
+    routes={rootRoute}
+    history={new HashHistory()}
     createElement={AsyncProps.createElement}
   />
 ), document.getElementById('example'));

examples/huge-apps/components/App.js

@@ -4,16 +4,15 @@ import GlobalNav from './GlobalNav';
 
 class App extends React.Component {
 
-  //static loadProps (params, cb) {
-    //console.log('App');
-    //cb(null, { courses: COURSES });
-  //}
+  static loadProps (params, cb) {
+    console.log('App', 'loadProps');
+    cb(null, { courses: COURSES });
+  }
 
   render () {
-    //var { courses } = this.props;
-    var courses = COURSES;
+    var { courses, loading } = this.props;
     return (
-      <div>
+      <div style={{opacity: loading ? 0.66 : 1}}>
         <GlobalNav/>
         <div style={{padding: 20}}>
           {this.props.children || <Dashboard courses={courses}/>}

examples/huge-apps/components/GlobalNav.js

@@ -27,9 +27,9 @@ class GlobalNav extends React.Component {
       <div style={styles.wrapper}>
         <div style={{float: 'left'}}>
           <Link to="/" style={styles.link}>Home</Link>{' '}
-          <Link to="/calendar" style={styles.link}>Calendar</Link>{' '}
-          <Link to="/grades" style={styles.link}>Grades</Link>{' '}
-          <Link to="/messages" style={styles.link}>Messages</Link>{' '}
+          <Link to="/calendar" style={styles.link} activeStyle={styles.activeLink}>Calendar</Link>{' '}
+          <Link to="/grades" style={styles.link} activeStyle={styles.activeLink}>Grades</Link>{' '}
+          <Link to="/messages" style={styles.link} activeStyle={styles.activeLink}>Messages</Link>{' '}
         </div>
         <div style={{float: 'right'}}>
           <Link style={styles.link} to="/profile">{user.name}</Link> <button onClick={this.logOut}>log out</button>
@@ -39,18 +39,28 @@ class GlobalNav extends React.Component {
   }
 }
 
+var dark = 'hsl(200, 20%, 20%)';
+var light = '#fff';
+
 styles.wrapper = {
   padding: '10px 20px',
   overflow: 'hidden',
-  background: 'hsl(200, 20%, 20%)',
-  color: '#fff'
+  background: dark,
+  color: light
 };
 
 styles.link = {
-  padding: 10,
-  color: '#fff',
+  padding: 11,
+  color: light,
   fontWeight: 200
 }
 
+styles.activeLink = Object.assign({}, styles.link, {
+  background: light,
+  color: dark
+});
+
+console.log(styles.link);
+
 export default GlobalNav;
 

examples/huge-apps/routes/Calendar/components/Calendar.js

@@ -2,10 +2,26 @@ import React from 'react';
 
 class Calendar extends React.Component {
 
+  static loadProps(params, cb) {
+    setTimeout(() => {
+      cb(null, {
+        events: [{
+          id: 0, title: 'essay due'
+        }]
+      })
+    }, 1000);
+  }
+
   render () {
+    var { events } = this.props;
     return (
       <div>
         <h2>Calendar</h2>
+        <ul>
+          {events.map(event => (
+            <li key={event.id}>{event.title}</li>
+          ))}
+        </ul>
       </div>
     );
   }

examples/huge-apps/routes/Course/components/Course.js

@@ -14,13 +14,13 @@ styles.sidebar = {
 
 class Course extends React.Component {
 
-  //static loadProps (params, cb) {
-    //cb(null, { course: COURSES[params.courseId] });
-  //}
+  static loadProps (params, cb) {
+    console.log('Course', 'loadProps');
+    setTimeout(() => cb(null, { course: COURSES[params.courseId] }), 1000);
+  }
 
   render () {
-    //var { course } = this.props;
-    var course = COURSES[this.props.params.courseId];
+    var { course } = this.props;
     return (
       <div>
         <h2>{course.name}</h2>

examples/huge-apps/routes/Course/routes/Announcements/components/Sidebar.js

@@ -3,15 +3,16 @@ import { Link } from 'react-router';
 
 export default class AnnouncementsSidebar extends React.Component {
 
-  //static loadProps (params, cb) {
-    //cb(null, {
-      //announcements: COURSES[params.courseId].announcements
-    //});
-  //}
+  static loadProps (params, cb) {
+    console.log('AnnouncementsSidebar', 'loadProps');
+    cb(null, {
+      announcements: COURSES[params.courseId].announcements
+    });
+  }
 
   render () {
-    //var { announcements } = this.props;
-    var announcements = COURSES[this.props.params.courseId].announcements;
+    var { announcements } = this.props;
+    //var announcements = COURSES[this.props.params.courseId].announcements;
     return (
       <div>
         <h3>Sidebar Assignments</h3>

modules/Router.js

@@ -262,7 +262,7 @@ var Router = React.createClass({
   },
 
   render() {
-    var { location, branch, params, components, isTransitioning } = this.state;
+    var { branch, params, components } = this.state;
     var element = null;
 
     if (components) {
@@ -272,7 +272,7 @@ var Router = React.createClass({
 
         var route = branch[index];
         var routeParams = getRouteParams(route, params);
-        var props = { location, params, route, routeParams, isTransitioning };
+        var props = Object.assign({}, this.state, { route, routeParams });
 
         if (isValidElement(element)) {
           props.children = element;