example using createElement to call static populateStore

components/EmailPreview.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 class EmailPreview extends Component {
+  static populateStore(store, props) {
+    console.log("populating store for email preview");
+    // store.dispatch(emailApp.actions.folder.fetchFolders());
+  }
 
   render() {
     console.log("Rendering email preview");

components/Emails.js

@@ -4,6 +4,11 @@ import { connect } from 'react-redux'
 import MoveEmail from './MoveEmail'
 
 class Emails extends Component {
+  static populateStore(store, props) {
+    console.log("populating store for emails");
+    // store.dispatch(emailApp.actions.folder.fetchFolders());
+  }
+
 
   render() {
     const { emails, fetchedAt } = this.props;

components/Folder.js

@@ -8,47 +8,59 @@ import MoveEmail from './MoveEmail'
 
 class Folder extends Component {
 
+  static populateStore(store, props) {
+    console.log("populating store for folder");
+    store.dispatch(emailApp.actions.email.fetchEmails());
+  }
+
   render() {
+    console.log("Rendering Folder");
     const { emails, folder, fetchedAt } = this.props;
     return (
-      <div>
-        <h1>{folder.name} (fetched at {fetchedAt}</h1><button onClick={this.props.fetchEmails}>Fetch</button>
-        <table>
-          <thead>
-            <tr>
-              <th>Subject</th>
-              <th>Sender</th>
-              <th>Delete</th>
-              <th>Move</th>
-              <th>Open</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              emails.map((email) => {
-                return (
-                  <tr key={email.id}>
-                    <td><Link to={'/folder/' + folder.id + '/email/' + email.id}>{email.subject}</Link></td>
-                    <td>{email.sender}</td>
-                    <td><button onClick={() => this.props.removeEmail(email.id)}>Delete</button></td>
-                    <td><MoveEmail emailId={email.id}/></td>
-                    <td><button onClick={() => this.props.openEmail(email.id)}>Open</button></td>
-                  </tr>
-                )
-              })
-            }
-          </tbody>
-        </table>
-        {this.props.children}
-      </div>
+      folder !== undefined && emails !== undefined ? (
+        <div>
+          <h1>{folder.name} (fetched at {fetchedAt}</h1><button onClick={this.props.fetchEmails}>Fetch</button>
+          <table>
+            <thead>
+              <tr>
+                <th>Subject</th>
+                <th>Sender</th>
+                <th>Delete</th>
+                <th>Move</th>
+                <th>Open</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                emails.map((email) => {
+                  return (
+                    <tr key={email.id}>
+                      <td><Link to={'/folder/' + folder.id + '/email/' + email.id}>{email.subject}</Link></td>
+                      <td>{email.sender}</td>
+                      <td><button onClick={() => this.props.removeEmail(email.id)}>Delete</button></td>
+                      <td><MoveEmail emailId={email.id}/></td>
+                      <td><button onClick={() => this.props.openEmail(email.id)}>Open</button></td>
+                    </tr>
+                  )
+                })
+              }
+            </tbody>
+          </table>
+          {this.props.children}
+        </div>
+      ) : <p>Loading...</p>
     )
   }
 }
 
 const mapStateToProps = function(state, existingProps) {
+  const folder = state.emailApp.folders.folders ? state.emailApp.folders.folders.find((folder) => folder.id === existingProps.params.folderId) : undefined;
+  const emails = state.emailApp && state.emailApp.emails && state.emailApp.emails.emails ? state.emailApp.emails.emails.filter((email) => email.folderId === existingProps.params.folderId) : undefined;
+  console.log(folder);
+  console.log(emails);
   return {
-    folder: state.emailApp.folders.folders.find((folder) => folder.id === existingProps.params.folderId),
-    emails: state.emailApp.emails.emails.filter((email) => email.folderId === existingProps.params.folderId),
+    folder: folder,
+    emails: emails,
     fetchedAt: state.emailApp.emails.fetchedAt
   }
 }

components/Folders.js

@@ -6,16 +6,23 @@ import emailApp from '../emailApp'
 
 class Folders extends Component {
 
+  static populateStore(store, props) {
+    console.log("populating store for folders");
+    // store.dispatch(emailApp.actions.folder.fetchFolders());
+  }
+
   render() {
     const { folders  } = this.props;
     return (
-      <div>
-        <h1>Folders</h1>
-        <ul>
-          { folders.map((folder) => <li key={folder.id}>{folder.name} - <button onClick={() => this.props.removeFolder(folder.id)}>Delete</button></li>) }
-        </ul>
-        <AddFolder/>
-      </div>
+      folders ? (
+        <div>
+          <h1>Folders</h1>
+          <ul>
+            { folders.map((folder) => <li key={folder.id}>{folder.name} - <button onClick={() => this.props.removeFolder(folder.id)}>Delete</button></li>) }
+          </ul>
+          <AddFolder/>
+        </div>
+      ) : <p>Loading...</p>
     )
   }
 }

components/OpenEmails.js

@@ -6,7 +6,9 @@ class OpenEmails extends Component {
 
   render() {
     const { openEmails } = this.props;
+    console.log("Rendering openEmails")
     return (
+
       <div className="openEmails">
         {
           openEmails.map((openEmail) => {

containers/App.js

@@ -4,9 +4,24 @@ import Folders from '../components/Folders'
 import OpenEmails from '../components/OpenEmails.js';
 import { Link } from 'react-router'
 
+import emailApp from '../emailApp';
+
 
 class App extends Component {
+  static populateStore(store, props) {
+    console.log("populating store for app");
+    store.dispatch(emailApp.actions.folder.fetchFolders());
+  }
+  componentDidMount() {
+    console.log("component did mount for app")
+  }
+
+  componentDidUpdate() {
+    console.log("component did update for app")
+  }
+
   render() {
+    console.log("rendering app");
     const { dispatch, folders } = this.props
     return (
       <div>
@@ -17,11 +32,13 @@ class App extends Component {
               <Link to="/folders">Folders</Link>
               <ul>
                 {
-                  folders.map((folder) => {
-                    return (
-                      <li key={folder.id}><Link to={'/folder/' + folder.id}>{folder.name}</Link></li>
-                    )
-                  })
+                  folders ? (
+                    folders.map((folder) => {
+                      return (
+                        <li key={folder.id}><Link to={'/folder/' + folder.id}>{folder.name}</Link></li>
+                      )
+                    })
+                  ) : <li>Loading Folders...</li>
                 }
               </ul>
             </li>
@@ -37,6 +54,7 @@ class App extends Component {
           {this.props.children}
         </div>
         <OpenEmails/>
+
       </div>
     )
   }

emailApp/actions/emailActions.js

@@ -13,7 +13,7 @@ const fetchedEmails = function(emails, fetchedAt) {
 export function fetchEmails() {
   return (dispatch) => {
     const [emails, fetchedAt] = api.fetchEmails();
-    dispatch(fetchedEmails(emails, fetchedAt));
+    setTimeout(() => dispatch(fetchedEmails(emails, fetchedAt)), 1000);
   }
 }
 

emailApp/actions/folderActions.js

@@ -13,7 +13,8 @@ const fetchedFolders = function(folders, fetchedAt) {
 export const fetchFolders = function() {
   return (dispatch) => {
     const [folders, fetchedAt] = api.fetchFolders();
-    dispatch(fetchedFolders(folders, fetchedAt));
+    console.log("dispatching fetched folders");
+    setTimeout(() => dispatch(fetchedFolders(folders, fetchedAt)), 1000);
   }
 }
 

emailApp/reducers/emailsReducer.js

@@ -3,6 +3,8 @@ import { FETCHED_EMAILS } from '../actions/emailActions.js';
 const emailsReducer = function(state = [], action) {
   switch(action.type) {
     case FETCHED_EMAILS:
+      console.log("In reducer for fetched folders");
+      console.log(action);
       return { emails: action.emails, fetchedAt: action.fetchedAt }
     default:
       return state;

emailApp/reducers/foldersReducer.js

@@ -3,6 +3,8 @@ import { FETCHED_FOLDERS } from '../actions/folderActions.js';
 const foldersReducer = function(state = [], action) {
   switch(action.type) {
     case FETCHED_FOLDERS:
+      console.log("In reducer for fetched folders");
+      console.log(action);
       return { folders: action.folders, fetchedAt: action.fetchedAt };
     default:
       return state;

index.js

@@ -5,14 +5,8 @@ import { DevTools, LogMonitor, DebugPanel } from 'redux-devtools/lib/react';
 import App from './containers/App'
 import configureStore, { USE_DEV_TOOLS } from './store/configureStore'
 import { Route, Router as RealRouter } from 'react-router'
+
 import * as actions from './actions/';
-import emailApp from './emailApp'
-import Folders from './components/Folders'
-import Folder from './components/Folder'
-import Emails from './components/Emails'
-import EmailPreview from './components/EmailPreview'
-import Counter from './components/Counter'
-import generatePageLoaders from './pageLoaders'
 
 class Router extends RealRouter {
   render() {
@@ -25,30 +19,49 @@ class Router extends RealRouter {
   }
   componentDidUpdate() {
     console.log("Router did update")
+
   }
+
 }
 
+
+
+import emailApp from './emailApp'
+
+import Folders from './components/Folders'
+import Folder from './components/Folder'
+import Emails from './components/Emails'
+import EmailPreview from './components/EmailPreview'
+import Counter from './components/Counter'
+
+import createBrowserHistory from 'history/lib/createBrowserHistory'
 window.emailApp = emailApp;
 const store = configureStore();
 
-const pageLoaders = generatePageLoaders(store.dispatch);
-
 const debugPanel = USE_DEV_TOOLS ? (
   <DebugPanel top right bottom>
     <DevTools store={store} monitor={LogMonitor} />
   </DebugPanel>) : null;
 
 let rootElement = document.getElementById('root')
 
+
+const customCreateElement = function(Component, props) {
+  if(Component.populateStore) {
+    Component.populateStore(store, props);
+  }
+  return React.createElement(Component, props);
+}
+
 render(
   <div>
     <Provider store={store}>
-      <Router>
-        <Route path="/" component={App} onEnter={pageLoaders.appShow}>
-          <Route path="folders" component={Folders} onEnter={pageLoaders.foldersIndex}/>
-          <Route path="emails" component={Emails} onEnter={pageLoaders.emailsIndex}/>
-          <Route path="folder/:folderId" component={Folder} onEnter={pageLoaders.folderShow}>
-            <Route path="email/:emailId" component={EmailPreview}/>
+      <Router history={createBrowserHistory()} createElement={customCreateElement}>
+        <Route path="/" component={App} onEnter={() => console.log("onEnter for App")}>
+          <Route path="folders" component={Folders} onEnter={() => console.log("onEnter for Folders")}/>
+          <Route path="emails" component={Emails} onEnter={() => console.log("onEnter for emails")}/>
+          <Route path="folder/:folderId" component={Folder} onEnter={() => console.log("onEnter for folder")}>
+            <Route path="email/:emailId" component={EmailPreview} onEnter={() => console.log("onEnter for EmailPreview")}/>
           </Route>
           <Route path="counter" component={Counter} onEnter={() => store.dispatch(actions.initializeCounter())}/>
         </Route>

pageLoaders/index.js

@@ -1,23 +0,0 @@
-import emailApp from '../emailApp'
-
-export default function generatePageLoaders(dispatch) {
-
-  return {
-
-    appShow: function() {
-      dispatch(emailApp.actions.folder.fetchFolders());
-    },
-
-    emailsIndex: function() {
-      dispatch(emailApp.actions.email.fetchEmails());
-    },
-
-    foldersIndex: function() {
-      dispatch(emailApp.actions.folder.fetchFolders());
-    },
-
-    folderShow: function() {
-      dispatch(emailApp.actions.email.fetchEmails());
-    }
-  }
-}

store/configureStore.js

@@ -3,7 +3,7 @@ import rootReducer from '../reducers'
 import { devTools } from 'redux-devtools';
 import thunk from 'redux-thunk';
 
-export const USE_DEV_TOOLS = true;
+export const USE_DEV_TOOLS = false;
 
 export default function configureStore(initialState) {
   let composed = compose(applyMiddleware(thunk));