Fix timer for updating createdAt

This commit is contained in:
Chris Blanchard 2015-07-31 12:21:07 +01:00
parent 3cb1e600ee
commit dfd2e885f8

View file

@ -8,7 +8,7 @@ var Chatroom = React.createClass({
}, },
componentDidMount: function () { componentDidMount: function () {
var self = this; var self = this;
var TIMER_INTERVAL = 60000; // Every minute var TIMER_INTERVAL = 5000; // Every minute
socket.on("message:new", function (data) { socket.on("message:new", function (data) {
var history = self.props.history; var history = self.props.history;
@ -30,7 +30,7 @@ var Chatroom = React.createClass({
socket.emit("message:refresh", {}); socket.emit("message:refresh", {});
self.timer = setInterval(function () { self.timer = setInterval(function () {
if (self.refs.messages) self.refs.messages.refreshTime(); self.forceUpdate();
}, TIMER_INTERVAL); }, TIMER_INTERVAL);
}, },
@ -48,11 +48,8 @@ var Chatroom = React.createClass({
var messages = this.props.history.map(function (message) { var messages = this.props.history.map(function (message) {
return ( return (
<ChatMessage <ChatMessage
avatar={message.author.avatar} message={message}
username={message.author.username} key={message.id} />
content={message.content}
ref="messages"
createdAt={message.createdAt} />
); );
}); });
return ( return (
@ -71,16 +68,19 @@ var Chatroom = React.createClass({
} }
}); });
var updateMessageCallbacks = [];
var timer = setInterval(function () {
updateMessageCallbacks.forEach(function (callback) {
callback();
});
}, 60000);
var ChatMessage = React.createClass({ var ChatMessage = React.createClass({
getInitialState: function () { componentDidMount: function () {
return {
timeAgo: $.timeago(this.props.createdAt)
}
},
refreshTime: function () {
var self = this; var self = this;
self.setState({ updateMessageCallbacks.push(function () {
timeAgo: $.timeago(self.props.createdAt) self.forceUpdate();
}); });
}, },
render: function () { render: function () {
@ -88,7 +88,7 @@ var ChatMessage = React.createClass({
<li className="left clearfix"> <li className="left clearfix">
<span className="chat-img pull-left"> <span className="chat-img pull-left">
<img <img
src={this.props.avatar} src={this.props.message.author.avatar}
alt="User Avatar" alt="User Avatar"
height="40" height="40"
width="40" width="40"
@ -96,12 +96,12 @@ var ChatMessage = React.createClass({
</span> </span>
<div className="chat-body clearfix"> <div className="chat-body clearfix">
<div className="header"> <div className="header">
<strong className="primary-font">{this.props.username}</strong> <strong className="primary-font">{this.props.message.author.username}</strong>
<small className="pull-right text-muted"> <small className="pull-right text-muted">
<i className="fa fa-clock-o fa-fw"></i> {this.state.timeAgo} <i className="fa fa-clock-o fa-fw"></i> {$.timeago(this.props.message.createdAt)}
</small> </small>
</div> </div>
<p>{this.props.content}</p> <p>{this.props.message.content}</p>
</div> </div>
</li> </li>
); );