Added lots of features now

elevenpassin · Dec 21, 2017 · 8154eef · 8154eef
1 parent 2e543e7
commit 8154eef
Show file tree

Hide file tree

Showing 12 changed files with 322 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,27 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
 node_modules
 */node_modules
 .vscode
 yarn.lock
+
+/db
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/app.js b/app.js
@@ -1,11 +1,89 @@
 const { find, filter } = require('lodash');
 const express = require('express');
+const MongoClient = require('mongodb').MongoClient;
+const assert = require('assert');
 const bodyParser = require('body-parser');
 const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
 const { makeExecutableSchema } = require('graphql-tools');
 
 const typeDefs = require('./typeDefs.gql');
 
+const dbUrl = 'mongodb://localhost:27017';
+const dbName = 'blog';
+
+const app = express();
+
+
+
+
+
+MongoClient.connect(dbUrl, (err, client) => {
+  assert.equal(null, err);
+  console.log(`
+      =====
+      Successfully connected to the DB
+      =====
+  `);
+
+  const db = client.db(dbName);
+  const usersCollection = db.collection('users');
+  const postsCollection = db.collection('posts');
+  const commentsCollection = db.collection('comments');
+
+  function getAllDocuments(col) {
+    col.find({}).toArray((err, docs) => {
+      assert.equal(err, null);
+      console.log("Found the following records");
+      console.log(docs);
+      return docs;
+    })
+  }
+
+  const resolvers = {
+    User: {
+      posts: (user) => filter(posts, { userid: user.userid }),
+      comments: (user) => filter(comments, { userid: user.userid })
+    },
+    Comment: {
+      user: (comment) => find(users, { userid: comment.userid })
+    },
+    Post: {
+      user: (post) => find(users, { userid: post.userid }),
+      comments: (post) => filter(comments, { postid: post.postid })
+    },
+    Query: {
+      allPosts: () => posts,
+      getPost: (_, { postid }) => {
+        return find(posts, { postid })
+      }
+    }
+  }
+
+  const schema = makeExecutableSchema({
+    typeDefs,
+    resolvers
+  });
+
+  app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
+
+  app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));
+
+  app.get('/ja', (req, res) => {
+    res.send('JA JA JA');
+  });
+
+  app.listen(3001, () => {
+    console.log(`
+      =====
+      Server running at http://localhost:3001/
+      GraphiQL running at http://localhost:3001/graphiql/
+      =====
+    `)
+  })
+
+  client.close();
+})
+
 const users = [
   {
     userid: 0,
@@ -45,49 +123,64 @@ const posts = [
     title: "Post title",
     userid: 0,
     postid: 0,
+    content: `
+    Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla, 
+    massa scelerisque mus quam nulla lobortis litora, 
+    nostra placerat felis potenti lacus dictumst bibendum. 
+    Aliquam venenatis sollicitudin fusce quis congue id rhoncus ac nunc, 
+    vivamus feugiat mauris lectus ridiculus nulla libero sagittis primis, 
+    natoque leo suspendisse proin at curabitur suscipit cras. 
+    Mus at curae tempor blandit suspendisse molestie tortor eget ornare aliquam, 
+    aliquet eros luctus nisi suscipit venenatis platea senectus posuere, 
+    interdum proin a in primis rhoncus tellus dapibus litora.
+    `
   },
   {
     title: "Another title",
     userid: 0,
     postid: 1,
-  }
-];
-
-const resolvers = {
-  User: {
-    posts: (user) => filter(posts, { userid: user.userid }),
-    comments: (user) => filter(comments, { userid: user.userid })
-  },
-  Comment: {
-    user: (comment) => find(users, { userid: comment.userid })
+    content: `
+    Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla, 
+    massa scelerisque mus quam nulla lobortis litora, 
+    nostra placerat felis potenti lacus dictumst bibendum. 
+    Aliquam venenatis sollicitudin fusce quis congue id rhoncus ac nunc, 
+    vivamus feugiat mauris lectus ridiculus nulla libero sagittis primis, 
+    natoque leo suspendisse proin at curabitur suscipit cras. 
+    Mus at curae tempor blandit suspendisse molestie tortor eget ornare aliquam, 
+    aliquet eros luctus nisi suscipit venenatis platea senectus posuere, 
+    interdum proin a in primis rhoncus tellus dapibus litora.
+    `
   },
-  Post: {
-    user: (post) => find(users, { userid: post.userid }),
-    comments: (post) => filter(comments, { postid: post.postid })
+  {
+    title: "Save the web",
+    userid: 0,
+    postid: 2,
+    content: `
+    Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla, 
+    massa scelerisque mus quam nulla lobortis litora, 
+    nostra placerat felis potenti lacus dictumst bibendum. 
+    Aliquam venenatis sollicitudin fusce quis congue id rhoncus ac nunc, 
+    vivamus feugiat mauris lectus ridiculus nulla libero sagittis primis, 
+    natoque leo suspendisse proin at curabitur suscipit cras. 
+    Mus at curae tempor blandit suspendisse molestie tortor eget ornare aliquam, 
+    aliquet eros luctus nisi suscipit venenatis platea senectus posuere, 
+    interdum proin a in primis rhoncus tellus dapibus litora.
+    `
   },
-  Query: {
-    allPosts: () => posts
+  {
+    title: "Decentralized web is the way",
+    userid: 0,
+    postid: 3,
+    content: `
+    Lorem ipsum dolor sit amet consectetur adipiscing elit fringilla, 
+    massa scelerisque mus quam nulla lobortis litora, 
+    nostra placerat felis potenti lacus dictumst bibendum. 
+    Aliquam venenatis sollicitudin fusce quis congue id rhoncus ac nunc, 
+    vivamus feugiat mauris lectus ridiculus nulla libero sagittis primis, 
+    natoque leo suspendisse proin at curabitur suscipit cras. 
+    Mus at curae tempor blandit suspendisse molestie tortor eget ornare aliquam, 
+    aliquet eros luctus nisi suscipit venenatis platea senectus posuere, 
+    interdum proin a in primis rhoncus tellus dapibus litora.
+    `
   }
-}
-
-const schema = makeExecutableSchema({
-  typeDefs,
-  resolvers
-});
-
-const app = express();
-
-app.get('/ja', (req, res) => {
-  res.send('JA JA JA');
-})
-
-app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
-
-app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));
-
-app.listen(3001, () => {
-  console.log(`
-    Server running at http://localhost:3001/
-    GraphiQL running at http://localhost:3001/graphiql/
-  `)
-})
+];
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^3.0.2",
+    "apollo-client-preset": "^1.0.5",
+    "graphql": "^0.12.3",
+    "graphql-tag": "^2.6.1",
     "react": "^16.2.0",
+    "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17"
   },
@@ -14,4 +19,4 @@
     "eject": "react-scripts eject"
   },
   "proxy": "http://localhost:3001/"
-}
+}
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,7 +1,3 @@
-.App {
-  text-align: center;
-}
-
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
@@ -11,11 +7,12 @@
   background-color: #222;
   height: 150px;
   padding: 20px;
-  color: white;
+  text-align: center;
 }
 
 .App-title {
   font-size: 1.5em;
+  color: white;
 }
 
 .App-intro {

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,22 +1,24 @@
 import React, { Component } from 'react';
+import 'antd/dist/antd.css';
 import logo from './logo.svg';
 import './App.css';
 
-fetch('/ja')
-.then(resp=> resp.text())
-.then(txt => console.log(txt));
+import { Row, Col } from 'antd';
+
+
+import Blogposts from './components/Blogposts';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+          <h1 className="App-title">GraphQL Based blog</h1>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <main>
+          <Blogposts/>
+        </main>
       </div>
     );
   }

diff --git a/client/src/components/Blogpost.js b/client/src/components/Blogpost.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Alert, Card } from 'antd';
+
+import { get } from 'lodash';
+
+class Blogpost extends Component {
+  render() {
+    const { 
+      title,
+      content,
+      error,
+      loading
+    } = this.props;
+
+    const name = get(this.props, 'user.name');
+
+    if (error) {
+      return <Alert message="Something happened" type="error" />
+    }
+
+    return (
+      <div style={{ background: '#ECECEC', padding: '30px' }}>
+        <Card loading={loading} title={title} bordered={false} style={{ width: '90vw', margin: '0 auto' }}>
+          <p
+            style={{
+              fontSize: 14,
+              color: 'rgba(0, 0, 0, 0.85)',
+              marginBottom: 16,
+              fontWeight: 500,
+            }}
+          >
+            Author: { name }
+          </p>
+          <p>
+            {
+              content
+            }
+          </p>
+        </Card>
+      </div>
+    )
+  }
+}
+
+export default Blogpost;
diff --git a/client/src/components/BlogpostContainer.js b/client/src/components/BlogpostContainer.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+import { Alert, Card } from 'antd';
+
+import Blogpost from './Blogpost';
+
+class BlogpostContainer extends Component {
+  render() {
+    return (
+      <Blogpost { ...this.props.data.getPost } error={this.props.data.error} loading={this.props.data.loading}/>
+    )
+  }
+}
+
+export default graphql(gql`
+query ($postid: Int){
+  getPost(postid: $postid) {
+    title,
+    user{
+      name
+    }
+    content
+    comments{
+      commentid
+    }
+  }
+}
+`)(BlogpostContainer);