import ContentAdd from 'material-ui/svg-icons/content/add';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import _ from 'lodash';
import React, { PropTypes } from 'react';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import moment from 'moment';
const styles = {
suspended: {
display: 'block',
padding: '10px',
background: 'yellow',
borderRadius: '5px',
textAlign: 'center',
color: 'black',
},
good: {
display: 'block',
padding: '10px',
background: 'green',
borderRadius: '5px',
textAlign: 'center',
color: 'white',
},
banned: {
display: 'block',
padding: '10px',
background: 'red',
borderRadius: '5px',
textAlign: 'center',
color: 'white',
},
};
export default class SignedInList extends React.Component {
static propTypes = {
members: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number,
purpose: PropTypes.string,
at: PropTypes.instanceOf(moment),
})),
}
constructor(props) {
super(props);
this.state = { tick: 0 };
this.componentDidMount = this.componentDidMount.bind(this);
this.componentWillUnmount = this.componentWillUnmount.bind(this);
this.tick = this.tick.bind(this);
}
componentDidMount() {
this.timer = setInterval(this.tick, 50);
}
componentWillUnmount() {
clearInterval(this.timer);
}
sortMembers(members) {
return _.sortBy(members, m => m.at.valueOf()).reverse();
}
tick() {
this.setState({ tick: this.state.tick += 1 });
}
render() {
const memberRows = this.sortMembers(this.props.members)
.map((member) => {
let memberStatus = good;
if (member.banned) {
memberStatus = banned;
} else if (member.suspended) {
memberStatus = suspended;
}
return (