import React from 'react'
import ReactDOM from 'react-dom'
import Comment from './comment.js'
import _ from 'lodash'

class Comments extends React.Component {

  static propTypes = {
    records: React.PropTypes.array,
    empty: React.PropTypes.string.isRequired
  }

  static defaultProps = {
    empty: "No records found."
  }

  render() {
    if(_.isEmpty(this.props.records)) {
      return <p>{this.props.empty}</p>
    } else {
      return (
        <div className="ui comments">
          { this.props.records.map((record) => {
            return <Comment {...record} />
          })}
        </div>
      )
    }
  }

}

export default Comments

@@ -98,22 +98,86 @@
 ort 
-_ from 'lodash
+LoadingContainer, %7BPresentState, EmptyState%7D from 'snax/lib/containers/loading
 '%0A%0Ac
@@ -409,111 +409,185 @@
     
-if(_.isEmpty(this.props.records)) %7B%0A      return %3Cp%3E%7Bthis.props.empty%7D%3C/p%3E%0A    %7D else %7B%0A      return (%0A
+return (%0A      %3CLoadingContainer content=%7Bthis.props.records%7D useLoader%3E%0A        %3CEmptyState%3E%0A          %3Cp%3E%7Bthis.props.empty%7D%3C/p%3E%0A        %3C/EmptyState%3E%0A        %3CPresentState%3E%0A  
     
@@ -613,16 +613,12 @@
 %22ui 
-comments
+feed
 %22%3E%0A 
@@ -626,16 +626,18 @@
         
+  
 %7B this.p
@@ -664,15 +664,24 @@
 cord
+, index
 ) =%3E %7B%0A
+  
     
@@ -715,16 +715,39 @@
 .record%7D
+ key=%7B%60event_$%7Bindex%7D%60%7D
  /%3E%0A    
@@ -756,12 +756,16 @@
     
+ 
+ 
 %7D)%7D%0A
+  
     
@@ -785,15 +785,57 @@
     
-)%0A    %7D
+  %3C/PresentState%3E%0A      %3C/LoadingContainer%3E%0A    )
 %0A  %7D

use loading container