import React from 'react'
import { connect } from 'react-redux'
import { fetchComponents } from '../modules/components'

class Components extends React.Component {
  componentDidMount () {
    this.props.dispatch(fetchComponents)
  }

  render () {
    const { serviceComponents, isFetching } = this.props
    const componentItems = serviceComponents.map((component) => {
      return (
        <div key={component.ID} className='mdl-cell mdl-cell--12-col mdl-grid'>
          <div className='mdl-cell mdl-cell--12-col'>
            <p>{component.name}</p>
            <p>{component.status}</p>
            <p>{component.description}</p>
          </div>
        </div>
      )
    })

    return (<div className='mdl-grid' style={{ opacity: isFetching ? 0.5 : 1 }}>
      <div className='mdl-cell mdl-cell--12-col'>
        <h4>Components</h4>
      </div>
      {componentItems}
    </div>)
  }
}

Components.propTypes = {
  serviceComponents: React.PropTypes.array.isRequired,
  isFetching: React.PropTypes.bool.isRequired,
  dispatch: React.PropTypes.func.isRequired
}

const mapStateToProps = (state) => {
  let serviceComponents
  console.log(state.components.serviceComponents)
  if (Array.isArray(state.components.serviceComponents)) {
    serviceComponents = []
  } else {
    serviceComponents = JSON.parse(state.components.serviceComponents)
  }
  return {
    isFetching: state.components.isFetching || false,
    serviceComponents: serviceComponents
  }
}

export default connect(mapStateToProps)(Components)

@@ -389,19 +389,18 @@
        %3C
-div
+li
  key=%7Bco
@@ -430,38 +430,59 @@
 mdl-
-cell mdl-cell--12-col mdl-grid
+list__item mdl-list__item--two-line mdl-shadow--2dp
 '%3E%0A 
@@ -487,27 +487,28 @@
 %0A          %3C
-div
+span
  className='
@@ -511,38 +511,115 @@
 me='mdl-
-cell mdl-cell--12-col'
+list__item-primary-content'%3E%0A            %3Ci className='material-icons mdl-list__item-avatar'%3Eweb%3C/i
 %3E%0A      
@@ -617,33 +617,36 @@
 i%3E%0A            %3C
-p
+span
 %3E%7Bcomponent.name
@@ -648,17 +648,20 @@
 .name%7D%3C/
-p
+span
 %3E%0A      
@@ -671,75 +671,191 @@
    %3C
-p%3E%7Bcomponent.status%7D%3C/p%3E%0A            %3Cp%3E%7Bcomponent.description%7D%3C/p%3E
+span className='mdl-list__item-sub-title'%3E%7Bcomponent.description%7D%3C/span%3E%0A          %3C/span%3E%0A          %3Cspan className='mdl-list__item-secondary-content'%3E%0A            %7Bcomponent.status%7D
 %0A   
@@ -855,35 +855,36 @@
 us%7D%0A          %3C/
-div
+span
 %3E%0A        %3C/div%3E
@@ -871,35 +871,34 @@
 span%3E%0A        %3C/
-div
+li
 %3E%0A      )%0A    %7D)
@@ -1071,16 +1071,76 @@
  %3C/div%3E%0A
+      %3Cul className='mdl-cell mdl-cell--12-col mdl-list'%3E%0A  
       %7Bc
@@ -1154,16 +1154,28 @@
 tItems%7D%0A
+      %3C/ul%3E%0A
     %3C/di

Use List for component list