import _ from 'lodash';
import React , { Component } from 'react';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux';
import { fetchPosts} from "../actions/index"


class PostIndex extends Component {

    componentDidMount() {
        this.props.fetchPosts();
    }

    renderPosts() {
        return _.map(this.props.posts, post => {
            if (post.title == null) return;
            return (
              <li className="list-group-item" key={post.id} >
                  {post.title}
              </li>
            );
        });
    }


    render() {
        console.log(this.props.posts);
        return (
            <div>
                <div className="text-xs-right">
                    <Link className="btn btn-primary" to="/posts/new" >
                        Add a Post
                    </Link>
                </div>
                <h3>Posts</h3>
                <ul className="list-group" >
                    { this.renderPosts() }
                </ul>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts
    }
};



export default connect(mapStateToProps, { fetchPosts })(PostIndex);