import React, { Component } from 'react'
import IssueListItem from '../../components/issues/issue-list-item'
import { connect } from 'react-redux'

import { map } from 'lodash'
import { fetchIssues } from '../actions'

class IssueList extends Component {
  componentDidMount() {
    // Sorunları çeken action ı çağırıyorum
    this.props.fetchIssues()
  }

  render() {
    if (!this.props.issues) return null

    return (
      <div>
        <ul className="list-group">
          {map(this.props.issues, issue => {
            return <IssueListItem key={issue._id} issue={issue} />
          })}
        </ul>

        {!this.props.loadingMore ? (
          <button
            style={{ marginTop: '20px', marginBottom: '30px' }}
            className="btn btn-primary btn-block"
            onClick={this.props.fetchMoreIssues}
          >
            Daha Fazla Yükle
          </button>
        ) : null}
      </div>
    )
  }
}

function mapStateToProps({ issues }) {
  // Uygulama state indeki issues kısmını bu componentin props una bağlıyorum
  return { issues }
}

export default connect(
  mapStateToProps,
  { fetchIssues }
)(IssueList)