Implement edit post

elevenpassin · Jan 14, 2018 · 8eec8fe · 8eec8fe
1 parent 291f30d
commit 8eec8fe
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 32 deletions.
diff --git a/app.js b/app.js
@@ -57,14 +57,30 @@ const resolvers = {
         return user;
       })
     },
-    addPost: async (_, { title, userid, content }) => {
-      const newPost = new Post({ title, userid, content })
-      return newPost.save((err, post) => {
-        if (err) {
-          console.error(err);
-        }
-        return post;
-      })
+    submitPost: async (_, { title, userid, content, postid }) => {
+      if (postid) {
+        const editPost = await Post.findById(postid);
+        if (editPost) {
+          editPost.title = title;
+          editPost.content = content;
+          return editPost.save((err, post) => {
+            if (err) {
+              console.error(err);
+            }
+            return post;
+          }) 
+        } 
+      } 
+      else {
+        const newPost = new Post({ title, userid, content });
+
+        return newPost.save((err, post) => {
+          if (err) {
+            console.error(err);
+          }
+          return post;
+        })        
+      }
     },
     deletePost: async (_, { postid }) => {
       await Post.deleteOne({ _id: postid })

diff --git a/client/src/App.js b/client/src/App.js
@@ -40,7 +40,7 @@ class App extends Component {
         </header>
         <Route exact path="/" component={BlogpostsContainer} />
         <Route path="/account" render={(props) => (
-          this.state.auth === false ? <Signin setAuth={this.setAuth} {...props} /> : <Dashboard userid={this.state.userid}/>
+          this.state.auth === false ? <Signin setAuth={this.setAuth} {...props} /> : <Dashboard userid={this.state.userid} {...props} />
         )} />
       </div>
     );

diff --git a/client/src/components/ShortBlogpost.jsx b/client/src/components/ShortBlogpost.jsx
@@ -5,15 +5,17 @@ import gql from 'graphql-tag';
 const Item = List.Item;
 
 
-const Controls = ({ _id, mutate}) => (
+const Controls = ({ mutate, history, item}) => (
   <Row gutter={16}>
-    <Button>
+    <Button
+      onClick={() => history.push('/account/new/post', { post : item, from: 'dashboard' })}
+    >
       <Icon type="edit" />
     </Button>
     <Button
       onClick={() => mutate({
         variables: {
-          postid: _id
+          postid: item._id
         }
       })}
     >
@@ -23,9 +25,9 @@ const Controls = ({ _id, mutate}) => (
 );
 
 
-const ShortBlogpost =  ({ item, mutate }) => (
+const ShortBlogpost =  ({ item, mutate, history }) => (
   <Item actions={[(<Col>
-    <Controls _id={item._id} mutate={mutate}/>
+    <Controls mutate={mutate} history={history} item={item}/>
   </Col>)]}>
     <Row>
       <Item.Meta

diff --git a/client/src/components/ShortBlogpostContainer.jsx b/client/src/components/ShortBlogpostContainer.jsx
@@ -10,6 +10,7 @@ const query = gql`
     allPosts{
       _id,
       title,
+      content,
       truncatedcontent
     }
   }
@@ -19,6 +20,9 @@ const query = gql`
 const loader = <Icon type="loading" style={{ fontSize: 24 }} spin />;
 
 class ShortBlogpostContainer extends Component {
+  constructor(props){
+    super(props);
+  }
   render() {
     const { error, loading, allPosts } = this.props.data;
 
@@ -37,7 +41,7 @@ class ShortBlogpostContainer extends Component {
           itemLayout="horizontal"
           dataSource={allPosts}
           renderItem={item => (
-            <ShortBlogpost item={item} />
+            <ShortBlogpost item={item} history={this.props.history}/>
           )}
         />
       </div>

diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
@@ -7,7 +7,7 @@ import ShortBlogpostContainer from "../components/ShortBlogpostContainer.jsx";
 // Subpages
 import Editor from './Editor';
 
-const UserDashboard = (
+const UserDashboard = ({ history }) => (
   <Fragment>
     <Row style={{ background: "#ECECEC", padding: "30px" }}>
       <Col span={24}>
@@ -27,7 +27,7 @@ const UserDashboard = (
       </Row>
       <Row>
         <Col>
-          <ShortBlogpostContainer />
+          <ShortBlogpostContainer history={history}/>
         </Col>
       </Row>
     </Row>
@@ -43,7 +43,7 @@ export default class Dashboard extends Component {
     return (
       <div>
         <Route path="/account/new/post" render={(props) => <Editor {...props} userid={this.props.userid}/>} />
-        <Route exact path="/account" render={() => UserDashboard} /> 
+        <Route exact path="/account" render={() => <UserDashboard {...this.props}/>} /> 
       </div>
     );
   }

diff --git a/client/src/pages/Editor/Editor.jsx b/client/src/pages/Editor/Editor.jsx
@@ -7,15 +7,43 @@ import "./Editor.css";
 
 const md = new remarkable();
 
+const submitPost = gql`
+  mutation submitPost($title: String!, $userid: String!, $content: String!, $postid: String){
+    submitPost(title: $title, userid: $userid, content: $content, postid: $postid) {
+      _id
+    }
+  }
+`;
+
 class Editor extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      pageTitle: "Add new post",
       title: "Enter your title",
-      content: "Enter your post here!"
+      content: "Enter your post here!",
+      postid: '',
+      editing: false
     };
   }
 
+  componentDidMount() {
+    const routeState = this.props.location.state
+    if (routeState) {
+      const { from, post } = routeState;
+
+      if (from === 'dashboard') {
+        this.setState({
+          pageTitle: 'Edit your post',
+          title: post.title,
+          content: post.content,
+          postid: post._id,
+          editing: true
+        })
+      }
+    }
+  }
+
   onChange = e => {
     switch (e.target.name) {
       case "title":
@@ -31,27 +59,30 @@ class Editor extends Component {
 
   publishPost = async (e) => {
     e.preventDefault();
-    const { title, content } = this.state;
+    const { postid, title, content, editing } = this.state;
     const { userid } = this.props;
 
     const resp = await this.props.mutate({
       variables: {
         title,
         userid,
-        content
+        content,
+        postid 
       }
     })
 
-    if (resp.data.addPost._id) {
+    if (resp.data.submitPost._id) {
       this.props.history.push('/account');
     }
   }
 
   render() {
-    const { title, content } = this.state;
+    const { title, content, pageTitle, editing } = this.state;
+    const { postID } = this.props.location.state;
+
     return (
       <div className="editor-page">
-        <h1> Add new post </h1>
+        <h1> { pageTitle } </h1>
         <form className="editor-main" onSubmit={this.publishPost}>
           <Row gutter={24} className="editor-title">
             <Col span={12}>
@@ -60,6 +91,7 @@ class Editor extends Component {
                 name="title"
                 placeholder="Enter your title"
                 onChange={this.onChange}
+                value={title}
               />
             </Col>
             <Col span={12}>
@@ -74,6 +106,7 @@ class Editor extends Component {
                 rows="10"
                 onChange={this.onChange}
                 placeholder="Enter your post here!"
+                value={content}
               />
             </Col>
             <Col span={12} dangerouslySetInnerHTML={{__html: md.render(content) }}></Col>
@@ -91,12 +124,8 @@ class Editor extends Component {
   }
 }
 
-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/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
+    submitPost(title: String!, userid: String!, content: String!, postid: String): Post
     deletePost(postid: String!): Int
   }
 `;