test out react-mde

package.json

@@ -6,15 +6,16 @@
     "axios": "^0.18.1",
     "github-markdown-css": "^3.0.1",
     "react": "^16.10.2",
-    "react-cookie": "^4.0.1",
     "react-dom": "^16.10.2",
     "react-markdown": "^4.2.2",
+    "react-mde": "^7.6.2",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.0.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "semantic-ui-react": "^0.87.3"
+    "semantic-ui-react": "^0.87.3",
+    "universal-cookie": "^4.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -6,6 +6,7 @@ import PostList from './PostList';
 import Post from './Post';
 import User from './User';
 import About from './About'
+import NewPost from './NewPost'
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
         <Route exact path="/posts/" component={PostList}/>
         <Route path="/posts/:slug" component={Post}/>
         <Route path="/users/:user" component={User}/>
+        <Route path="/newpost/" component={NewPost}/>
       </Switch>
     </Router>
     <Footer/>

src/components/AuthMenu.js

@@ -190,7 +190,7 @@ class AuthMenu extends Component {
           <div className="ui menu dropdown" style={{display: "inline"}}>
             <div className="ui left icon input">
               <i className="edit icon"></i>
-            <button onClick={this.handleMakePost} className="fluid ui positive button">Create Post!</button>
+            <button onClick={() => { document.location.href = "newpost"; }} className="fluid ui positive button">Create Post!</button>
             </div>
           </div>
         )

src/components/NewPost.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactMde from "react-mde";
+import ReactMarkdown from 'react-markdown';
+import 'github-markdown-css'
+
+class NewPost extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+        title: '',
+        content: ''
+    }
+  }
+  handleChange = value => {
+    this.setState({ mdeValue: value });
+  };
+
+
+  render () {
+    return(
+      <div className="container">
+        <ReactMde
+          value={this.state.content}
+          /*
+          onChange={setValue}
+          selectedTab={selectedTab}
+          onTabChange={setSelectedTab}
+          */
+          generateMarkdownPreview={(markdown) => <ReactMarkdown source={markdown} />}
+        />
+      </div>
+    )
+  }
+}
+
+export default NewPost;