text: import React, { Component, PropTypes } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router';
  import { fetchProjects, toggleProject } from 'cms/actions/projects';
  import Item from 'cms/components/projects/indexes/Item/index';
  import NoContent from 'shared/components/NoContent/index';
  import {
    Table,
    TableHeaderColumn,
    TableHeader,
    TableBody,
    TableRow,
  } from 'material-ui/Table';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import ContentAdd from 'material-ui/svg-icons/content/add';
  import inlineStyles from 'shared/styles/MaterialUI/index';
  import styles from './styles';
  
  
  const propTypes = {
    projects: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number.isRequired,
        title: PropTypes.string.isRequired,
        accepted: PropTypes.bool.isRequired,
      }).isRequired
    ).isRequired,
    fetchProjects: PropTypes.func.isRequired,
    toggleProject: PropTypes.func.isRequired,
    finishLoading: PropTypes.func.isRequired,
  };
  
  function mapStateToProps(state) {
    return {
      projects: state.projects.projects,
    };
  }
  class ProjectIndex extends Component {
  
    constructor(props) {
      super(props);
      this.state = { loading: true };
  
      this.handleToggle = this.handleToggle.bind(this);
    }
  
    componentDidMount() {
      this.props.fetchProjects()
        .then(() => {
          this.props.finishLoading();
          this.setState({ loading: false });
        });
    }
  
    handleToggle(sortRank, id) {
      this.props.toggleProject(sortRank, id);
    }
  
  
    render() {
      if (this.state.loading) {
        return <section />;
      }
  
      const newButton = (
        <Link to="/cms/projects/new">
          <FloatingActionButton style={inlineStyles.floatButton} disableTouchRipple primary>
            <ContentAdd />
          </FloatingActionButton>
        </Link>
      );
  
      if (!this.props.projects.length) {
        return (
          <section>
            {newButton}
            <NoContent pageName="projects" />
          </section>
        );
      }
  
      return (
        <section>
          {newButton}
          <h1 className={styles.title}>Project</h1>
          <Table fixedHeader fixedFooter>
            <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
              <TableRow selectable={false}>
                <TableHeaderColumn colSpan="1" style={inlineStyles.headerColumn}>
                  ID
                </TableHeaderColumn>
                <TableHeaderColumn colSpan="6" style={inlineStyles.headerColumn}>
                  Title
                </TableHeaderColumn>
                <TableHeaderColumn colSpan="1" style={inlineStyles.headerColumn}>
                  Status
                </TableHeaderColumn>
                <TableHeaderColumn colSpan="2" style={inlineStyles.headerColumn}>
                  Action
                </TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody displayRowCheckbox={false}>
              {this.props.projects.map((project, index) => (
                <Item
                  {...project}
                  key={project.id}
                  sortRank={index}
                  handleToggle={this.handleToggle}
                />
              ))}
            </TableBody>
          </Table>
        </section>
      );
    }
  }
  
  ProjectIndex.propTypes = propTypes;
  
  export default connect(mapStateToProps, { fetchProjects, toggleProject })(ProjectIndex);
  