diff --git a/src/actions/index.js b/src/actions/index.js index fe98b11..f0fa858 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -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() + } +}; diff --git a/src/components/.NewPost.js.swp b/src/components/.NewPost.js.swp new file mode 100644 index 0000000..4744378 Binary files /dev/null and b/src/components/.NewPost.js.swp differ diff --git a/src/components/Post.js b/src/components/Post.js index 645a2c3..d7af679 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -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 ( -
-
-
- -
-
-
- ); - }); - } - } - - renderPost() { - const {posts} = this.props - const post = posts.entities[posts.currentId] - return( -
-
-
-
-

{post.title}

-

By {post.author}

-

Posted {post.time_published}

-
- -
-
-
-
- { this.renderComments(post.comments) } -
- ) - } - - render () { - const {isLoading} = this.state - - if (isLoading) { - return

Loading

- } else { - return ( -
- { this.renderPost() } + renderComments(comments, parent_id) { + if (comments) { + return comments.map(comment => { + return ( +
+
+
+
- ); - } +
+
+ ); + }); } + } + + renderPost() { + const {posts} = this.props + const post = posts.entities[posts.currentId] + return( +
+
+
+
+

{post.title}

+

By {post.author}

+

Posted {post.time_published}

+
+ +
+
+
+
+ { this.renderComments(post.comments,post.id) } +
+ ) + } + + render () { + const {isLoading} = this.state + if (isLoading) { + return

Loading

+ } else { + return ( +
+ { this.renderPost() } +
+ ); + } + } } 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);