import React, {Component} from 'react'
import {connect} from 'react-refetch'

class Comments extends Component {
  constructor (props) {
    super(props)

    this.state = {
      comments: [],
      page: 0,
      pageCount: 0,
      count: 0
    }
  }

  render () {
    const {commentsFetch} = this.props

    if (commentsFetch.pending) return null

    if (commentsFetch.rejected) {
      return (
        <div className='alert alert-danger' role='alert'>Error</div>
      )
    }

    const onLastPage = this.state.page === this.state.pageCount

    return (
      <div className='topic-comments'>
        <div className='comments-list'>
          {
            commentsFetch.value.map((comment) => {
              return <Comment key={comment.id} {...comment} />
            })
          }
        </div>
        {!onLastPage && <button type='button'>next</button>}
      </div>
    )
  }
}

function Comment (props) {
  return (
    <div className='comments-list-item'>
      {props.text}
    </div>
  )
}

export default connect((props) => ({
  commentsFetch: {
    url: `/api/v2/comments?topicId=${props.topic.id}`,
    then: (body) => ({
      value: body.results.comments
    })
  }
}))(Comments)

@@ -69,16 +69,44 @@
 refetch'
+%0Aimport t from 't-component'
 %0A%0Aclass 
@@ -419,24 +419,74 @@
    return (%0A
+        %3Cdiv className='topic-article-content'%3E%0A  
         %3Cdiv
@@ -534,13 +534,74 @@
 rt'%3E
-Error
+%0A            %7Bt('modals.error.default')%7D%0A          %3C/div%3E%0A        
 %3C/di
@@ -732,16 +732,38 @@
 comments
+ topic-article-content
 '%3E%0A     
@@ -1141,20 +1141,178 @@
     
-%7Bprops.text%7D
+%3Ch1%3E%0A        %3Cimg src=%7Bprops.author.avatar%7D alt=%7Bprops.author.fullName%7D /%3E%0A        %3Csub%3E%7Bprops.author.displayName%7D%3C/sub%3E%0A      %3C/h1%3E%0A      %3Cp%3E%7Bprops.text%7D%3C/p%3E%0A      %3Chr/%3E
 %0A   

add comments info