58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import 'github-markdown-css'
|
|
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>
|
|
<h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
|
|
<h4>Posted {post.time_published}</h4>
|
|
<div className="markdown-body">
|
|
<ReactMarkdown source={post.content} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
posts: state.posts,
|
|
slug: state.slug
|
|
};
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
{ fetchPost }
|
|
)(Post);
|