import React, {PropTypes as P} from 'react'
import {Row, Col} from 'react-bootstrap'
import {connect} from 'react-redux'
import {loadServers} from './services/servers/actions'
import Server from './components/Server'

import './styles.styl'


class Servers extends React.Component {
  componentDidMount() {
    this.props.loadServers()
  }
  render() {
    if (!this.props.data || this.props.fetching) {
      return <div>Loading...</div>
    }
    console.log(this.props.data.toJS())
    return (
      <div className="Home-Servers">
        <table className="Home-Servers-list">
          {this.props.data.map((server, idx) => {
            if (!server) {
              return
            }
            const serverInfo = server.get('server_info')
            const gameInfo = server.get('game_info')
            if (serverInfo.get('hidden')) {
              return
            }
            return (
              <Server serverInfo={serverInfo} gameInfo={gameInfo} />
            )
          })}
        </table>
      </div>
    )
  }
}


function mapStateToProps(state) {
  const {fetching, error, data} = state.servers
  return (
    { fetching
    , error
    , data
    })
}


export default connect(
  mapStateToProps,
  {loadServers}
)(Servers)

@@ -574,16 +574,36 @@
 -list%22%3E%0A
+          %3Ctbody%3E%0A  
         
@@ -652,24 +652,26 @@
             
+  
 if (!server)
@@ -669,24 +669,26 @@
 (!server) %7B%0A
+  
             
@@ -700,34 +700,38 @@
 urn%0A            
-%7D%0A
+  %7D%0A  
             cons
@@ -779,24 +779,26 @@
             
+  
 const gameIn
@@ -834,24 +834,26 @@
             
+  
 if (serverIn
@@ -878,32 +878,34 @@
 %7B%0A              
+ 
+ 
 return%0A         
@@ -899,32 +899,34 @@
 urn%0A            
+  
 %7D%0A            re
@@ -919,24 +919,26 @@
             
+ 
+ 
 return (%0A   
@@ -952,15 +952,27 @@
     
+  
 %3CServer
+ key=%7Bidx%7D
  ser
@@ -1027,18 +1027,22 @@
         
-)%0A
+  )%0A  
         
@@ -1047,16 +1047,35 @@
     %7D)%7D%0A
+          %3C/tbody%3E%0A
         

Fix missing tbody tag.