Routed Email Application, using onEnter for route page loading and state clearing

actions/index.js

@@ -0,0 +1,30 @@
+import uid from 'uid';
+import emailApp from '../emailApp';
+
+export const OPEN_EMAIL = 'OPEN_EMAIL';
+export const REMOVED_EMAIL = 'REMOVED_EMAIL';
+export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
+export const INITIALIZE_COUNTER = 'INITIALIZE_COUNTER';
+
+export function openEmail(emailId) {
+  return { type: OPEN_EMAIL, id: uid(), emailId: emailId };
+}
+
+export function removedEmail(emailId) {
+  return { type: REMOVED_EMAIL, emailId: emailId };
+}
+
+export function removeEmail(emailId) {
+  return (dispatch, getState) => {
+    dispatch(emailApp.actions.email.removeEmail(emailId));
+    // dispatch(removedEmail(emailId));
+  }
+}
+
+export function incrementCounter() {
+  return { type: INCREMENT_COUNTER };
+}
+
+export function initializeCounter() {
+  return { type: INITIALIZE_COUNTER };
+}

components/AddFolder.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import emailApp from '../emailApp'
+
+class AddFolder extends Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = { folderName: '' };
+  }
+
+  updateFolderName(folderName) {
+    this.setState({ folderName: folderName });
+  }
+
+  submit(e) {
+    e.preventDefault();
+    this.props.addFolder(this.state.folderName);
+    this.setState({ folderName: '' });
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Add Folder</h2>
+        <form onSubmit={(e) => this.submit(e)}>
+          <input type="text" value={this.state.folderName} onChange={(e) => this.updateFolderName(e.target.value)}/>
+          <button type="submit">Add</button>
+        </form>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    addFolder: (folderName) => dispatch(emailApp.actions.folder.addFolder(folderName))
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(AddFolder);

components/Counter.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import * as actions from '../actions'
+
+class Counter extends Component {
+
+  render() {
+    return (
+      <div>
+        counter is {this.props.counter}
+        <button onClick={this.props.increment}>Increment</button>
+      </div>
+    )
+  }
+
+
+}
+
+const mapStateToProps = function(state) {
+  return {
+    counter: state.counter
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    increment: () => dispatch(actions.incrementCounter())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter);

components/EmailPreview.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class EmailPreview extends Component {
+
+  render() {
+    console.log("Rendering email preview");
+    const { email } = this.props;
+    console.log(email);
+    if(email) {
+      return (
+        <div>
+          <h4>{email.subject}</h4>
+          <div>
+            {email.body}
+          </div>
+        </div>
+      )
+    }
+    else {
+      return <div/>;
+    }
+  }
+}
+
+const mapStateToProps = function(state, existingProps) {
+  return {
+    email: state.emailApp.emails.emails.find((email) => email.id == existingProps.params.emailId)
+  }
+}
+
+export default connect(mapStateToProps)(EmailPreview);

components/Emails.js

@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import MoveEmail from './MoveEmail'
+
+class Emails extends Component {
+
+  render() {
+    const { emails, fetchedAt } = this.props;
+    return (
+      <div>
+        <h1>Emails (fetched at {fetchedAt}</h1><button onClick={this.props.fetchEmails}>Fetch</button>
+        <table>
+          <thead>
+            <tr>
+              <th>Subject</th>
+              <th>Sender</th>
+              <th>Folder</th>
+              <th>Delete</th>
+              <th>Move</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              emails.map((email) => {
+                return (
+                  <tr key={email.id}>
+                    <td>{email.subject}</td>
+                    <td>{email.sender}</td>
+                    <td>{email.folderName}</td>
+                    <td><button onClick={() => this.props.removeEmail(email.id)}>Delete</button></td>
+                    <td><MoveEmail emailId={email.id}/></td>
+                  </tr>
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    emails: state.emailApp.emails.emails.map((email) => {
+      return Object.assign({}, email, { folderName: state.emailApp.folders.folders.find((folder) => folder.id === email.folderId).name });
+    }),
+    fetchedAt: state.emailApp.emails.fetchedAt
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    fetchEmails: () => dispatch(emailApp.actions.email.fetchEmails()),
+    removeEmail: (emailId) => dispatch(emailApp.actions.email.removeEmail(emailId))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Emails);

components/Folder.js

@@ -0,0 +1,64 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import emailApp from '../emailApp'
+import * as actions from '../actions'
+import MoveEmail from './MoveEmail'
+
+
+class Folder extends Component {
+
+  render() {
+    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>
+    )
+  }
+}
+
+const mapStateToProps = function(state, existingProps) {
+  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),
+    fetchedAt: state.emailApp.emails.fetchedAt
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    fetchEmails: () => dispatch(emailApp.actions.email.fetchEmails()),
+    removeEmail: (emailId) => dispatch(actions.removeEmail(emailId)),
+    openEmail: (emailId) => dispatch(actions.openEmail(emailId))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Folder);

components/Folders.js

@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import AddFolder from './AddFolder'
+import emailApp from '../emailApp'
+
+class Folders extends Component {
+
+  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>
+    )
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    folders: state.emailApp.folders.folders,
+    fetchedAt: state.emailApp.folders.fetchedAt
+  }
+}
+
+const mapDispatchToProps = function(dispatch) {
+  return {
+    removeFolder: (folderId) => dispatch(emailApp.actions.folder.removeFolder(folderId))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Folders);

components/MoveEmail.js

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import emailApp from '../emailApp'
+
+class MoveEmail extends Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = { selectedFolderId: props.email.folderId };
+  }
+
+  submit(e) {
+    e.preventDefault();
+    this.props.moveToFolder(this.state.selectedFolderId);
+  }
+
+  updateSelectedFolder(folderId) {
+    this.setState({ selectedFolderId: folderId });
+  }
+
+  render() {
+    const { folders, email } = this.props;
+
+    return (
+      <form onSubmit={(e) => this.submit(e)}>
+        <select onChange={(e) => this.updateSelectedFolder(e.target.value)} value={this.state.selectedFolderId}>
+          { folders.map((folder) => <option key={folder.id} value={folder.id}>{folder.name}</option> )}
+        </select>
+        <button type="submit">Move</button>
+      </form>
+    )
+  }
+}
+
+const mapStateToProps = function(state, existingProps) {
+  const email = state.emailApp.emails.emails.find((email) => email.id === existingProps.emailId);
+  return {
+    email: email,
+    folders: state.emailApp.folders.folders
+  }
+}
+
+const mapDispatchToProps = function(dispatch, existingProps) {
+  return {
+    moveToFolder: (folderId) => dispatch(emailApp.actions.email.moveEmailToFolder(existingProps.emailId, folderId))
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MoveEmail);

components/OpenEmail.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+class OpenEmail extends Component {
+
+  render() {
+    const { openEmail, email } = this.props;
+    return (
+      <div className="openEmail">
+        <h4>{email.subject}</h4>
+        <p>{email.body}</p>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = function(state, existingProps) {
+  return {
+    email: state.emailApp.emails.emails.find((email) => email.id === existingProps.openEmail.emailId)
+  }
+}
+
+export default connect(mapStateToProps)(OpenEmail);