Breakpoint for breaking changes

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()
+    }
+};

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) {
+  constructor (props) {
-        super(props)
+    super(props)
-        this.state = {
+    this.state = {
-            isLoading: true
+        isLoading: true
-        }
-    }
-    componentDidMount() {
-        const { slug } = this.props.match.params
-        this.props.fetchPost(slug)
-            .then(() => this.setState({isLoading: false}))
     }
+  }
+  componentDidMount() {
+    const { slug } = this.props.match.params
+    this.props.fetchPost(slug)
+      .then(() => this.setState({isLoading: false}))
+  }
 
-    renderComments(comments) {
+  renderComments(comments, parent_id) {
-        if (comments) {
+    if (comments) {
-          return comments.map(comment => {
+      return comments.map(comment => {
-              return (
+        return (
-                  <div className="item" key={comment.id}>
+          <div className="item" key={comment.id}>
-                      <div className="content">
+            <div className="content">
-                          <div className="markdown-body">
+              <div className="markdown-body">
-                            <ReactMarkdown source={comment.content} />
+                <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() }
               </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 {
+  return {
-        posts: state.posts,
+    posts: state.posts,
-        slug: state.slug
+    slug: state.slug
-    };
+  };
 }
 
 export default connect(
-    mapStateToProps,
+  mapStateToProps,
-    { fetchPost }
+  { fetchPost, newComment },
 )(Post);