email/static/js/main.js

72 lines
2.4 KiB
JavaScript

/** @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 {
body: ""
};
},
componentWillReceiveProps: function(nextProps) {
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>
<Addresses headerName="From" values={m.From}/>
<Addresses headerName="To" values={m.To}/>
<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">
<button className="secondary-button pure-button">Reply</button>
<button className="secondary-button pure-button">Forward</button>
<a href={"/raw/"+m.Hash} className="secondary-button pure-button">Original</a>
</div>
</div>
<div className="email-content-body"><pre>{this.state.body}</pre></div>
</div>
</div>
);
}
});