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 {
    constructor (props) {
        super(props)
        this.state = {
            isLoading: true
        }
    }
    componentDidMount() {
        const { slug } = this.props.match.params
        this.props.fetchPost(slug)
            .then(() => this.setState({isLoading: false}))
    }

    render () {
        const {posts} = this.props
        const {isLoading} = this.state

        if (isLoading) {
            return <p>Loading</p>
        } else {
            const post = posts.entities[posts.currentId]
            return (
                <div className="item" key={post.id}>
                    <div className="content">
                        <div className="description">
                            <h1><b><u><Link to={"/posts/" + post.slug}>{post.title}</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);