Add Create and Delete mutations for Post

elevenpassin · Jan 4, 2018 · 40a657d · 40a657d
1 parent 311ff6c
commit 40a657d
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 7 deletions.
diff --git a/app.js b/app.js
@@ -1,4 +1,4 @@
-const { find, filter } = require('lodash');
+const { find, filter, truncate } = require('lodash');
 const express = require('express');
 const mongoose = require('mongoose');
 const { ObjectID } = require('mongodb');
@@ -35,11 +35,25 @@ const resolvers = {
   },
   Post: {
     comments: (post) => filter(comments, { postid: post._id }),
-    user: async (post) => await User.findOne({ _id: post.userid })
+    user: async (post) => await User.findOne({ _id: post.userid }),
+    truncatedcontent: (post) => truncate(post.content) 
   },
   Query: {
     allPosts: async () => await Post.find({}),
     getPost: async (_, { postid }) => await Post.findOne({ _id: postid })
+  },
+  Mutation: {
+    addPost: async (_, { title, userid, content }) => {
+      const newPost = new Post({ title, userid, content })
+      return newPost.save((err, post) => {
+        if (err) return console.error(err);
+        return post;
+      })
+    },
+    deletePost: async (_, { postid }) => {
+      await Post.deleteOne({ _id: postid })
+      return 0;
+    }
   }
 }
 

diff --git a/client/src/App.js b/client/src/App.js
@@ -6,7 +6,7 @@ import './App.css';
 import { Route } from 'react-router-dom';
 
 // Components
-import Blogposts from './components/Blogposts.jsx';
+import BlogpostsContainer from './components/BlogpostsContainer.jsx';
 import Navbar from './components/Navbar.jsx';
 
 // Pages
@@ -37,7 +37,7 @@ class App extends Component {
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">GraphQL Based blog</h1>
         </header>
-        <Route exact path="/" component={Blogposts} />
+        <Route exact path="/" component={BlogpostsContainer} />
         <Route exact path="/account" render={(props) => (
           this.state.auth === false ? <Signin setAuth={this.setAuth} {...props} /> : <Dashboard />
         )} />

diff --git a/client/src/components/Blogposts.jsx → client/src/components/BlogpostsContainer.jsx b/client/src/components/Blogposts.jsx → client/src/components/BlogpostsContainer.jsx
@@ -9,7 +9,7 @@ import BlogpostContainer from './BlogpostContainer.jsx';
 const query = gql`
   query {
     allPosts{
-      _id
+      _id,
     }
   }
 `;

diff --git a/client/src/components/ShortBlogpost.jsx b/client/src/components/ShortBlogpost.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { List, Row, Button, Icon, Col } from 'antd';
+const Item = List.Item;
+
+const Controls = () => (
+  <Row gutter={16}>
+    <Button>
+      <Icon type="edit" />
+    </Button>
+    <Button>
+      <Icon type="delete" />
+    </Button>
+  </Row>
+);
+
+export default ({ item }) => (
+  <Item actions={[(<Col>
+    <Controls />
+  </Col>)]}>
+    <Row>
+      <Item.Meta
+        title={<a href="#">{item.title}</a>}
+        description={item.truncatedcontent}
+      />
+    </Row>
+  </Item>
+);
diff --git a/client/src/components/ShortBlogpostContainer.jsx b/client/src/components/ShortBlogpostContainer.jsx
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+import { Spin, Icon, Alert, List } from 'antd';
+
+import ShortBlogpost from './ShortBlogpost';
+
+const query = gql`
+  query {
+    allPosts{
+      _id,
+      title,
+      truncatedcontent
+    }
+  }
+`;
+
+
+const loader = <Icon type="loading" style={{ fontSize: 24 }} spin />;
+
+class ShortBlogpostContainer extends Component {
+  render() {
+    const { error, loading, allPosts } = this.props.data;
+
+    if (error) {
+      return <Alert message="Something happened" type="error" />
+    }
+
+    if (loading) {
+      return <Spin indicator={loader} />;
+    }
+
+    return (
+      <div>
+        <List
+          className="list"
+          itemLayout="horizontal"
+          dataSource={allPosts}
+          renderItem={item => (
+            <ShortBlogpost item={item} />
+          )}
+        />
+      </div>
+    )
+  }
+}
+
+export default graphql(query)(props => <ShortBlogpostContainer {...props}/>);
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
@@ -1,10 +1,27 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
+import { Card, Icon, Button, Col, Row, List } from 'antd';
+
+import ShortBlogpostContainer from '../components/ShortBlogpostContainer.jsx';
 
 export default class Dashboard extends Component {
   render() {
     return (
       <div>
-        Dashboard goes here
+        <Row style={{ background: '#ECECEC', padding: '30px' }}>
+          <Col span={24}>
+            <h1>
+              Dashboard goes here
+            </h1>
+          </Col>
+        </Row>
+        <Row style={{ padding: '30px' }}>
+          <h1>Posts</h1>
+          <Row>
+            <Col span={12}>
+              <ShortBlogpostContainer />
+            </Col>
+          </Row>
+        </Row>
       </div>
     )
   }

diff --git a/typeDefs.gql b/typeDefs.gql
@@ -18,11 +18,17 @@ module.exports =  `
     userid: String!
     user: User!
     content: String!
+    truncatedcontent: String
     comments: [Comment]
   }
 
   type Query {
     allPosts: [Post] 
     getPost(postid: String): Post
   }
+
+  type Mutation {
+    addPost(title: String, userid: String!, content: String): Post
+    deletePost(postid: String): Int
+  }
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ import BlogpostContainer from './BlogpostContainer.jsx'; @@
     const query = gql`
       query {
         allPosts{
-          _id
+          _id,
         }
       }
     `;
@@ Expand Down @@