import React from 'react';
import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux';
import { fetchPost } from '../actions';

class Post extends React.Component {
    componentDidMount() {
        this.props.fetchPost();
    }


    renderList() {
        return this.props.posts.map(post => {
            return (
                <div className="item" key={post.id}>
                    <div className="content">
                        <div className="description">
                            <h1>{post.title}</h1>
                            <ReactMarkdown source={post.content} />
                        </div>
                    </div>
                </div>
            );
        });
    }


    render () {
        console.log(this.props.posts)
        return (
            <div className="ui relaxed divided list">
                {this.renderList()}
            </div>
        );
    }
}

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

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