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

class Post extends React.Component {
    componentDidMount() {
        const { slug } = this.props.match.params
        this.props.fetchPost(slug);
    }

    render () {
        console.log(this.props.posts)
        return (
            <div className="item" key="{post.id}">
                <div className="content">
                    <div className="description">
                        <h1><b><u><Link to={"/posts/"}>""</Link></u></b></h1>
                        <ReactMarkdown source="{post.content}" />
                    </div>
                </div>
            </div>
        );
    }
}

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

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