Conditionally show To/Cc when present.

static/js/app.js

@@ -11,7 +11,7 @@ var App = React.createClass({
   },
 
   componentWillMount: function() {
-      $.get(this.state.source, function(result) {
+      $.getJSON(this.state.source, function(result) {
           this.setState({folderContent: result});
           this.setMessage(result[0]);
       }.bind(this));

static/js/main.js

@@ -1,5 +1,20 @@
 /** @jsx React.DOM */
 
+var Addresses = React.createClass({
+    render: function() {
+        var addrs = this.props.values || null;
+        var value;
+        if (addrs == null) {
+            return (<span></span>);
+        } else if (Array.isArray(addrs)) {
+            value = addrs.map(function(t) { return t.Address; }).join(", ");
+        } else {
+            value = addrs.Address;
+        }
+        return (<p className="email-content-subtitle">{this.props.headerName}: <a>{value}</a></p>)
+    }
+});
+
 var MainView = React.createClass({
     getInitialState: function() {
         return {
@@ -7,24 +22,38 @@ var MainView = React.createClass({
         };
     },
 
-  render: function() {
+    componentWillReceiveProps: function(nextProps) {
-      $.get("/raw/" + this.props.message.Hash, function(data) {
+        this.setMessageHash(nextProps.message.Hash);
+    },
+
+    componentDidMount: function() {
+        this.setMessageHash(this.props.message.Hash);
+    },
+
+    setMessageHash: function(hash) {
+        $.get("/raw/" + hash , function(data) {
             var body = data.substring(data.indexOf('\n\n')+2);
             this.setState({body: body});
         }.bind(this));
+    },
 
+    render: function() {
         // TODO:
         // - trim 'Re:' from messages and group/thread them.
         var m = this.props.message;
+        var tos = (m.To||[]).map(function(t) { return t.Address; }).join(', ');
+        var ccs = (m.Cc||[]).map(function(t) { return t.Address; }).join(', ');
         return (
 <div id="main" className="pure-u-1">
     <div className="email-content">
         <div className="email-content-header pure-g">
             <div className="pure-u-1">
                 <h1 className="email-content-title">{m.Subject}</h1>
-                <p className="email-content-subtitle">
+                <Addresses headerName="From" values={m.From}/>
-                    From <a>{m.From}</a> at <span className="date">{m.Date.toLocaleString()}</span>
+                <Addresses headerName="To" values={m.To}/>
-                </p>
+                <Addresses headerName="Cc" values={m.Cc}/>
+                <p className="email-content-subtitle">Date: {m.Date.toLocaleString()}</p>
+                <p className="email-content-subtitle">X-Xinu-Hash: {m.Hash}</p>
             </div>
 
             <div className="email-content-controls pure-u-1">