1
0
Fork 0

Compare commits

...

1 commit

Author SHA1 Message Date
5f352030d4 Breakpoint for breaking changes 2020-01-29 21:22:46 -05:00
3 changed files with 72 additions and 66 deletions

View file

@ -64,3 +64,10 @@ export const newBlogPost = (payload) => async (dispatch) => {
history.push('/posts/' + response.data.slug)
}
};
export const newComment = (payload, parent_id) => async (dispatch) => {
const response = await sudoscientist.post('/blog/comments' + parent_id, payload)
if (response.status === 201) {
window.location.reload()
}
};

Binary file not shown.

View file

@ -2,83 +2,82 @@ import React from 'react';
import ReactMarkdown from 'react-markdown';
import 'github-markdown-css'
import { connect } from 'react-redux';
import { fetchPost } from '../actions';
import { fetchPost,newComment } 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}))
constructor (props) {
super(props)
this.state = {
isLoading: true
}
}
componentDidMount() {
const { slug } = this.props.match.params
this.props.fetchPost(slug)
.then(() => this.setState({isLoading: false}))
}
renderComments(comments) {
if (comments) {
return comments.map(comment => {
return (
<div className="item" key={comment.id}>
<div className="content">
<div className="markdown-body">
<ReactMarkdown source={comment.content} />
</div>
</div>
</div>
);
});
}
}
renderPost() {
const {posts} = this.props
const post = posts.entities[posts.currentId]
return(
<div className="container">
<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>
{ this.renderComments(post.comments) }
</div>
)
}
render () {
const {isLoading} = this.state
if (isLoading) {
return <p>Loading</p>
} else {
return (
<div>
{ this.renderPost() }
renderComments(comments, parent_id) {
if (comments) {
return comments.map(comment => {
return (
<div className="item" key={comment.id}>
<div className="content">
<div className="markdown-body">
<ReactMarkdown source={comment.content} />
</div>
);
}
</div>
</div>
);
});
}
}
renderPost() {
const {posts} = this.props
const post = posts.entities[posts.currentId]
return(
<div className="container">
<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>
{ this.renderComments(post.comments,post.id) }
</div>
)
}
render () {
const {isLoading} = this.state
if (isLoading) {
return <p>Loading</p>
} else {
return (
<div>
{ this.renderPost() }
</div>
);
}
}
}
const mapStateToProps = (state) => {
return {
posts: state.posts,
slug: state.slug
};
return {
posts: state.posts,
slug: state.slug
};
}
export default connect(
mapStateToProps,
{ fetchPost }
mapStateToProps,
{ fetchPost, newComment },
)(Post);