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>
);
const mapStateToProps = (state) => {
return {
posts: state.posts,
slug: state.slug
};
export default connect(
mapStateToProps,
{ fetchPost }
)(Post);