content: /**
   * ProjectListContainer
   *
   */
  import React from 'react'
  import ReactDOM from 'react-dom'
  import { connect } from 'react-redux'
  import { Link, Route } from 'react-router-dom'
  
  import ProjectList from './../components/projectlist'
  
  class ProjectListContainer extends React.Component {
  
  	constructor(props) {
  		super(props);
  
  		this.state = {
  			clientWidth: 0,
  			clientHeight: 0
  		};
  	}
  
  	componentDidMount() {
          this.props.dispatch({ type: 'REQUEST_PROJECTS' });
  
  		this.setState({
  			clientWidth: this.projectlist.clientWidth,
  			clientHeight: document.body.clientHeight
  		});
  	}
  
      render () {
  		// Floating button for adding projects
          let buttStyles = {
  			position: 'absolute',
  			bottom: 25,
  			right: 25
  		};
          // SVG grid
  		let svgStyles = {
  			marginLeft: 5
  		};
          // We need this week
  		let currentWeek = (new Date()).getWeek(),
  			weeks = range((currentWeek - 2), (currentWeek + 16));
          let popWeeks = populateWeekRange(weeks);
          // Unit to calculate width
  		let c = Math.ceil(this.state.clientWidth / popWeeks.length);
  		// Generate the SVG grid
  		let grid = popWeeks.map((w, i) => {
  			let tx = i * c,
  			    lx1 = i * c,
  			    lx2 = i * c;
  			return <g key={ i }>
  					<text x={ (tx) } y="35">{ w }</text>
  					<line x1={ lx1 + 7 } x2={ lx2 + 7 } y1={ this.state.clientHeight }
                          y2="40" strokeWidth="1" stroke="#efefef" />
  				</g>
  		});
          return <div className="mdl-grid projectlistcontainer" ref={(l) => this.projectlist = l}>
  
  					<svg width={ this.state.clientWidth }
  						height={ this.state.clientHeight }
  						style={ svgStyles }>
  						{ grid  }
  					</svg>
  
                  <ProjectList projects={ this.props.projects }
  					weeks={ weeks } unit={ c } />
  
  				<span style={buttStyles}>
  					<Link to="/project/new" className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  						<i className="material-icons">add</i>
  					</Link>
  				</span>
              </div>
      }
  }
  
  const populateWeekRange = (weeks) => {
      let indx = weeks.findIndex((r) => r == 53);
      if (indx > -1) {
          return weeks.slice(0, indx).concat(range(1, weeks.length - indx));
      }
      return weeks;
  }
  
  // Helper function to create a range
  const range = (l, r) => new Array(r - l).fill().map((_,k) => k + l);
  
  const stateProps = (state) => {
      return state;
  }
  
  Date.prototype.getWeek = () => {
  	let d = new Date();
  		d.setHours(0, 0, 0),
  		d.setDate(d.getDate() + 4);
  
      return Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7) - 1;
  };
  
  export default connect(stateProps)(ProjectListContainer)
  