Skip to content

Instantly share code, notes, and snippets.

@aj07mm
Created May 27, 2015 17:18
Show Gist options
  • Save aj07mm/299f97d47b29cda6bc30 to your computer and use it in GitHub Desktop.
Save aj07mm/299f97d47b29cda6bc30 to your computer and use it in GitHub Desktop.
treta react
var socket = io.connect('http://' + document.domain + ':' + location.port + '/profile');
var CommentList = React.createClass({
render: function() {
var data = this.props.data;
var foo = data.map(function(row){
console.log(row)
return <tr data-reactid={row.id}>
<td>{row.place}</td>
<td>{row.time}</td>
</tr>
})
console.log(foo.length)
return <tr>{foo}</tr>;
}
});
var CommentBox = React.createClass({
getInitialState: function() {
return {
data: [
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b351",
place: "Conference Room - Clayton Utz - Level 24",
time: "9:30 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b352",
place: "Clayton Utz Entrance- Level 24",
time: "9:12 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b354",
place: "Clayton Utz Entrance- Level 24",
time: "9:12 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b355",
place: "Elevator B",
time: "9:11 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b356",
place: "Elevator Bank - Right Side",
time: "9:10 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b357",
place: "E-Gate 1",
time: "9:09 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b358",
place: "Janus Cafe",
time: "9:03 AM"
},
{
id: "f24bb074-f9aa-454b-897c-f9f1d9e3b359",
place: "Front Entrance",
time: "9:01 AM"
}
]
};
},
componentDidMount: function() {
var that = this
socket.on('profile', function(msg) {
console.log(msg.data)
that.setState({ data: msg.data });
});
},
render: function() {
var auxArr = this.getInitialState().data;
if(!Array.isArray(this.state.data)){
auxArr.push(this.state.data)
}
return (
<CommentList data={auxArr} />
);
}
});
React.render(
<CommentBox />,
document.getElementById('live-places')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment