From 8123b0d65f2d60d7fb23a2a29acc4676fde647c7 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Wed, 29 Jan 2020 23:06:31 -0500
Subject: [PATCH] Set up basic comment stuff

---
 src/components/Comments.js | 47 ++++++++++++++++++++++++++++++++++++++
 src/components/Post.js     |  6 ++++-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Comments.js

diff --git a/src/components/Comments.js b/src/components/Comments.js
new file mode 100644
index 0000000..8410f6a
--- /dev/null
+++ b/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);
diff --git a/src/components/Post.js b/src/components/Post.js
index d7af679..42c8f54 100644
--- a/src/components/Post.js
+++ b/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>