Add editor functionality!

elevenpassin · Jan 9, 2018 · 4e6c8fa · 4e6c8fa
1 parent b353c7c
commit 4e6c8fa
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 40 deletions.
diff --git a/app.js b/app.js
@@ -91,7 +91,8 @@ app.post('/login', async (req, res) => {
     const hashedPassword = await pverify(userData.password, password);
     if (hashedPassword) {
       res.send(JSON.stringify({
-        auth: true
+        auth: true,
+        userid: userData._id
       }));
     } else {
       res.send(JSON.stringify({

diff --git a/client/src/App.js b/client/src/App.js
@@ -17,14 +17,15 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      auth: false
+      auth: false,
+      userid: ''
     }
 
     this.setAuth = this.setAuth.bind(this);
   }
 
-  setAuth(auth) {
-    this.setState({ auth })
+  setAuth(auth, userid) {
+    this.setState({ auth, userid })
   }
 
   render() {
@@ -38,8 +39,8 @@ class App extends Component {
           <h1 className="App-title">GraphQL Based blog</h1>
         </header>
         <Route exact path="/" component={BlogpostsContainer} />
-        <Route exact path="/account" render={(props) => (
-          this.state.auth === false ? <Signin setAuth={this.setAuth} {...props} /> : <Dashboard />
+        <Route path="/account" render={(props) => (
+          this.state.auth === false ? <Signin setAuth={this.setAuth} {...props} /> : <Dashboard userid={this.state.userid}/>
         )} />
       </div>
     );

diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
@@ -5,7 +5,7 @@ import { Link, Route } from "react-router-dom";
 import ShortBlogpostContainer from "../components/ShortBlogpostContainer.jsx";
 
 // Subpages
-import Editor from './Editor.jsx';
+import Editor from './Editor';
 
 const UserDashboard = (
   <Fragment>
@@ -20,7 +20,7 @@ const UserDashboard = (
           <h1>Posts</h1>
         </Col>
         <Col offset={10} span={2}>
-          <Link to="/new/post">
+          <Link to="/account/new/post">
             <Button>Add Post</Button>
           </Link>
         </Col>
@@ -35,11 +35,15 @@ const UserDashboard = (
 );
 
 export default class Dashboard extends Component {
+  constructor(props){
+    super(props);
+  }
+
   render() {
     return (
       <div>
-        <Route path="/new/post" component={Editor} />
-        <Route path="/" render={() => UserDashboard} /> 
+        <Route path="/account/new/post" render={(props) => <Editor {...props} userid={this.props.userid}/>} />
+        <Route exact path="/account" render={() => UserDashboard} /> 
       </div>
     );
   }

diff --git a/client/src/pages/Editor.jsx b/client/src/pages/Editor.jsx
diff --git a/client/src/pages/Editor/Editor.css b/client/src/pages/Editor/Editor.css
@@ -0,0 +1,38 @@
+.editor-page {
+    margin: 25px 50px;
+}
+
+.editor-main {
+    height: 500px;
+    width: 90vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.editor-content {
+    margin: 50px auto;
+}
+
+input {
+    border: none;
+    width: 100%;
+    min-height: 60px;
+    font-size: 25px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    border-bottom: 1px solid lightgrey;
+}
+
+textarea {
+    border: none;
+    width: 100%;
+    min-height: 200px;
+}
+
+.greybackground {
+    min-height: 100px;
+    background: rgb(247, 247, 247);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
diff --git a/client/src/pages/Editor/Editor.jsx b/client/src/pages/Editor/Editor.jsx
@@ -0,0 +1,101 @@
+import React, { Component, Fragment } from "react";
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+
+import { Col, Row, Button } from "antd";
+
+import "./Editor.css";
+
+class Editor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      title: "Enter your title",
+      content: "Enter your post here!"
+    };
+  }
+
+  onChange = e => {
+    switch (e.target.name) {
+      case "title":
+        this.setState({ title: e.target.value });
+        break;
+      case "content":
+        this.setState({ content: e.target.value });
+        break;
+      default:
+        break;
+    }
+  };
+
+  publishPost = async (e) => {
+    e.preventDefault();
+    const { title, content } = this.state;
+    const { userid } = this.props;
+
+    const resp = await this.props.mutate({
+      variables: {
+        title,
+        userid,
+        content
+      }
+    })
+
+    if (resp.data.addPost._id) {
+      this.props.history.push('/account');
+    }
+  }
+
+  render() {
+    const { title, content } = this.state;
+    return (
+      <div className="editor-page">
+        <h1> Add new post </h1>
+        <form className="editor-main" onSubmit={this.publishPost}>
+          <Row gutter={24} className="editor-title">
+            <Col span={12}>
+              <input
+                type="text"
+                name="title"
+                placeholder="Enter your title"
+                onChange={this.onChange}
+              />
+            </Col>
+            <Col span={12}>
+              <h1>{title}</h1>
+            </Col>
+          </Row>
+          <Row gutter={24} className="editor-content">
+            <Col span={12}>
+              <textarea
+                name="content"
+                cols="30"
+                rows="10"
+                onChange={this.onChange}
+                placeholder="Enter your post here!"
+              />
+            </Col>
+            <Col span={12}>{content}</Col>
+          </Row>
+          <Row gutter={24} className="greybackground">
+            <Col span={2} offset={22}>
+              <Button type="primary" htmlType="submit" className="login-form-button">
+                Publish
+              </Button>
+            </Col>
+          </Row>
+        </form>
+      </div>
+    );
+  }
+}
+
+const submitPost = gql`
+  mutation addPost($title: String!, $userid: String!, $content: String!){
+    addPost(title: $title, userid: $userid, content: $content) {
+      _id
+    }
+  }
+`;
+
+export default graphql(submitPost)(Editor);
diff --git a/client/src/pages/Editor/index.js b/client/src/pages/Editor/index.js
@@ -0,0 +1,3 @@
+import Editor from './Editor.jsx';
+
+export default Editor;
diff --git a/client/src/pages/Signin.jsx b/client/src/pages/Signin.jsx
@@ -27,7 +27,7 @@ class NormalLoginForm extends React.Component {
         const data = await resp.json();
 
         if (data.auth === true) {
-          this.props.setAuth(true);
+          this.props.setAuth(true, data.userid);
         }
       }
     });

diff --git a/typeDefs.gql b/typeDefs.gql
@@ -29,7 +29,7 @@ module.exports =  `
 
   type Mutation {
     addUser(name: String!, password: String!): User
-    addPost(title: String, userid: String!, content: String): Post
+    addPost(title: String!, userid: String!, content: String!): Post
     deletePost(postid: String): Int
   }
 `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Editor from './Editor.jsx';

		export default Editor;