Set up basic comment stuff

src/components/Comments.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactMde from "react-mde";
+import ReactMarkdown from 'react-markdown';
+import { useSelector } from "react-redux";
+import { connect } from 'react-redux';
+import 'github-markdown-css'
+import "react-mde/lib/styles/css/react-mde-all.css"
+import { newComment } from '../actions';
+
+const Comment = (props) => {
+  const [content, setContent] = React.useState("");
+  const [selectedTab, setSelectedTab] = React.useState("write");
+  const username = useSelector(state => state.auth.username);
+  const submitComment = () => {
+    const payload = {
+      content: content
+    }
+    props.newComment(username, payload)
+  }
+  return (
+    <div>
+      <div className="comment">
+        <h3><b>Leave a comment!</b></h3>
+      </div>
+      <div className="markdown-body">
+        <ReactMde
+          value={content}
+          onChange={setContent}
+          selectedTab={selectedTab}
+          onTabChange={setSelectedTab}
+          generateMarkdownPreview={(markdown) =>
+            Promise.resolve(<ReactMarkdown source={markdown} />)}
+        />
+      </div>
+    </div>
+  )
+}
+const mapStateToProps = (state) => {
+  return {
+      user: state.auth
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  {  newComment },
+)(Comment);

src/components/Post.js

@@ -4,6 +4,8 @@ import 'github-markdown-css'
 import { connect } from 'react-redux';
 import { fetchPost,newComment } from '../actions';
 import { Link } from 'react-router-dom';
+import Comment from './Comments';
+import { useSelector } from "react-redux";
 
 class Post extends React.Component {
   constructor (props) {
@@ -11,11 +13,12 @@ class Post extends React.Component {
     this.state = {
         isLoading: true
     }
+      console.log(props)
   }
   componentDidMount() {
     const { slug } = this.props.match.params
     this.props.fetchPost(slug)
-      .then(() => this.setState({isLoading: false}))
+      .then(() => this.setState({isLoading: false, slug: slug}))
   }
 
   renderComments(comments, parent_id) {
@@ -50,6 +53,7 @@ class Post extends React.Component {
             </div>
           </div>
         </div>
+        <Comment></Comment>
       </div>
         { this.renderComments(post.comments,post.id) }
       </div>