workstand/bikeshop_project/assets/js/components/SignedInList.jsx

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';

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 => (
          <TableRow selectable={false} key={member.id}>
            <TableRowColumn>{member.text}</TableRowColumn>
            <TableRowColumn>{member.purpose}</TableRowColumn>
            <TableRowColumn>{member.at.fromNow()}</TableRowColumn>
            <TableRowColumn><a href={`/members/edit/${member.id}/`}>Profile</a></TableRowColumn>
          </TableRow>
        ));

    return (
      <div className="mdl-cell mdl-cell--12-col">
        <h3>Members signed in</h3>
        <FloatingActionButton href="/members/new/">
          <ContentAdd />
        </FloatingActionButton>
        <Table selectable={false}>
          <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
            <TableRow>
              <TableHeaderColumn>Name</TableHeaderColumn>
              <TableHeaderColumn>Purpose</TableHeaderColumn>
              <TableHeaderColumn>Signed-in At</TableHeaderColumn>
              <TableHeaderColumn/>
            </TableRow>
          </TableHeader>
          <TableBody displayRowCheckbox={false}>
            {memberRows.length ?
              memberRows :
              <TableRow>
                <TableRowColumn>{'No members currently signed in.'}</TableRowColumn>
              </TableRow>
            }
          </TableBody>
        </Table>

      </div>
    );
  }
}