Added keys

This commit is contained in:
Chris Blanchard 2015-07-31 12:23:55 +01:00
parent 0bcd67f7a0
commit cd089587bd
2 changed files with 28 additions and 27 deletions

View file

@ -327,7 +327,7 @@ var ServerVoting = React.createClass({
Vote</button>); Vote</button>);
} }
return ( return (
<tr> <tr key={server.id}>
<td className="col-md-6">{server.name}</td> <td className="col-md-6">{server.name}</td>
<td className="col-md-3">{self.votesForServer(server)} Votes</td> <td className="col-md-3">{self.votesForServer(server)} Votes</td>
<td className="col-md-3 text-right"> <td className="col-md-3 text-right">
@ -381,7 +381,7 @@ var MapVoting = React.createClass({
Vote</button>); Vote</button>);
} }
return ( return (
<tr> <tr key={map.id}>
<td className="col-md-6">{map.name}</td> <td className="col-md-6">{map.name}</td>
<td className="col-md-3">{self.votesForMap(map)} Votes</td> <td className="col-md-3">{self.votesForMap(map)} Votes</td>
<td className="col-md-3 text-right"> <td className="col-md-3 text-right">
@ -476,7 +476,8 @@ var Gatherers = React.createClass({
if (self.props.gather.state === 'gathering') { if (self.props.gather.state === 'gathering') {
action = ( action = (
gatherer.user.ability.lifeforms.map(function (lifeform) { gatherer.user.ability.lifeforms.map(function (lifeform) {
return (<span className="label label-default">{lifeform}</span>); return (<span className="label label-default"
key={[lifeform, gatherer.id].join("-")}>{lifeform}</span>);
}) })
); );
} }

View file

@ -327,7 +327,7 @@ var ServerVoting = React.createClass({displayName: "ServerVoting",
"Vote")); "Vote"));
} }
return ( return (
React.createElement("tr", null, React.createElement("tr", {key: server.id},
React.createElement("td", {className: "col-md-6"}, server.name), React.createElement("td", {className: "col-md-6"}, server.name),
React.createElement("td", {className: "col-md-3"}, self.votesForServer(server), " Votes"), React.createElement("td", {className: "col-md-3"}, self.votesForServer(server), " Votes"),
React.createElement("td", {className: "col-md-3 text-right"}, React.createElement("td", {className: "col-md-3 text-right"},
@ -381,7 +381,7 @@ var MapVoting = React.createClass({displayName: "MapVoting",
"Vote")); "Vote"));
} }
return ( return (
React.createElement("tr", null, React.createElement("tr", {key: map.id},
React.createElement("td", {className: "col-md-6"}, map.name), React.createElement("td", {className: "col-md-6"}, map.name),
React.createElement("td", {className: "col-md-3"}, self.votesForMap(map), " Votes"), React.createElement("td", {className: "col-md-3"}, self.votesForMap(map), " Votes"),
React.createElement("td", {className: "col-md-3 text-right"}, React.createElement("td", {className: "col-md-3 text-right"},
@ -476,7 +476,8 @@ var Gatherers = React.createClass({displayName: "Gatherers",
if (self.props.gather.state === 'gathering') { if (self.props.gather.state === 'gathering') {
action = ( action = (
gatherer.user.ability.lifeforms.map(function (lifeform) { gatherer.user.ability.lifeforms.map(function (lifeform) {
return (React.createElement("span", {className: "label label-default"}, lifeform)); return (React.createElement("span", {className: "label label-default",
key: [lifeform, gatherer.id].join("-")}, lifeform));
}) })
); );
} }
@ -620,7 +621,7 @@ var Chatroom = React.createClass({displayName: "Chatroom",
}, },
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;
@ -642,7 +643,7 @@ var Chatroom = React.createClass({displayName: "Chatroom",
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);
}, },
@ -660,11 +661,8 @@ var Chatroom = React.createClass({displayName: "Chatroom",
var messages = this.props.history.map(function (message) { var messages = this.props.history.map(function (message) {
return ( return (
React.createElement(ChatMessage, { React.createElement(ChatMessage, {
avatar: message.author.avatar, message: message,
username: message.author.username, key: message.id})
content: message.content,
ref: "messages",
createdAt: message.createdAt})
); );
}); });
return ( return (
@ -683,16 +681,19 @@ var Chatroom = React.createClass({displayName: "Chatroom",
} }
}); });
var updateMessageCallbacks = [];
var timer = setInterval(function () {
updateMessageCallbacks.forEach(function (callback) {
callback();
});
}, 60000);
var ChatMessage = React.createClass({displayName: "ChatMessage", var ChatMessage = React.createClass({displayName: "ChatMessage",
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 () {
@ -700,7 +701,7 @@ var ChatMessage = React.createClass({displayName: "ChatMessage",
React.createElement("li", {className: "left clearfix"}, React.createElement("li", {className: "left clearfix"},
React.createElement("span", {className: "chat-img pull-left"}, React.createElement("span", {className: "chat-img pull-left"},
React.createElement("img", { React.createElement("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",
@ -708,12 +709,12 @@ var ChatMessage = React.createClass({displayName: "ChatMessage",
), ),
React.createElement("div", {className: "chat-body clearfix"}, React.createElement("div", {className: "chat-body clearfix"},
React.createElement("div", {className: "header"}, React.createElement("div", {className: "header"},
React.createElement("strong", {className: "primary-font"}, this.props.username), React.createElement("strong", {className: "primary-font"}, this.props.message.author.username),
React.createElement("small", {className: "pull-right text-muted"}, React.createElement("small", {className: "pull-right text-muted"},
React.createElement("i", {className: "fa fa-clock-o fa-fw"}), " ", this.state.timeAgo React.createElement("i", {className: "fa fa-clock-o fa-fw"}), " ", $.timeago(this.props.message.createdAt)
) )
), ),
React.createElement("p", null, this.props.content) React.createElement("p", null, this.props.message.content)
) )
) )
); );
@ -761,9 +762,8 @@ var MessageBar = React.createClass({displayName: "MessageBar",
var UserLogin = React.createClass({displayName: "UserLogin", var UserLogin = React.createClass({displayName: "UserLogin",
authorizeId: function (id) { authorizeId: function (id) {
id = parseInt(id, 10);
socket.emit("users:authorize", { socket.emit("users:authorize", {
id: id id: parseInt(id, 10)
}); });
setTimeout(function () { setTimeout(function () {
socket.emit("gather:refresh"); socket.emit("gather:refresh");