import React, { Component, PropTypes } from 'react' import Header from './Header' import MapperCard from './MapperCard' import MapCard from './MapCard' const MAP_WIDTH = 252 const MAX_COLUMNS = 4 class Maps extends Component { constructor(props) { super(props) this.state = { mapsWidth: 0 } } componentDidMount() { window && window.addEventListener('resize', this.resize) this.resize() } componentDidUpdate() { this.resize() } componentWillUnmount() { window && window.removeEventListener('resize', this.resize) } resize = () => { const { maps, user, currentUser } = this.props const numCards = maps.length + (user || currentUser ? 1 : 0) const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH) const mapsWidth = Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH this.setState({ mapsWidth }) } render = () => { const { maps, currentUser, section, user, moreToLoad, loadMore } = this.props const style = { width: this.state.mapsWidth + 'px' } return (