iamshaunjp · zakariamehbi · Mar 6, 2018 · Mar 6, 2018 · Mar 6, 2018 · Mar 8, 2018
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# 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/client/README.md b/client/README.md
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "apollo-boost": "^0.1.2",
+    "graphql": "^0.13.1",
+    "react": "^16.2.0",
+    "react-apollo": "^2.0.4",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/src/App.js b/client/src/App.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import ApolloClient from 'apollo-boost';
+import { ApolloProvider } from 'react-apollo';
+
+// components
+import BookList from './components/BookList';
+import AddBook from './components/AddBook';
+
+// apollo client setup
+const client = new ApolloClient({
+    uri: 'http://localhost:4000/graphql'
+});
+
+class App extends Component {
+  render() {
+    return (
+        <ApolloProvider client={client}>
+            <div id="main">
+                <h1>Ninja's Reading List</h1>
+                <BookList />
+                <AddBook />
+            </div>
+        </ApolloProvider>
+    );
+  }
+}
+
+export default App;
diff --git a/client/src/components/AddBook.js b/client/src/components/AddBook.js
@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { getAuthorsQuery, addBookMutation, getBooksQuery } from '../queries/queries';
+
+class AddBook extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            name: '',
+            genre: '',
+            authorId: ''
+        };
+    }
+    displayAuthors(){
+        var data = this.props.getAuthorsQuery;
+        if(data.loading){
+            return( <option disabled>Loading authors</option> );
+        } else {
+            return data.authors.map(author => {
+                return( <option key={ author.id } value={author.id}>{ author.name }</option> );
+            });
+        }
+    }
+    submitForm(e){
+        e.preventDefault()
+        // use the addBookMutation
+        this.props.addBookMutation({
+            variables: {
+                name: this.state.name,
+                genre: this.state.genre,
+                authorId: this.state.authorId
+            },
+            refetchQueries: [{ query: getBooksQuery }]
+        });
+    }
+    render(){
+        return(
+            <form id="add-book" onSubmit={ this.submitForm.bind(this) } >
+                <div className="field">
+                    <label>Book name:</label>
+                    <input type="text" onChange={ (e) => this.setState({ name: e.target.value }) } />
+                </div>
+                <div className="field">
+                    <label>Genre:</label>
+                    <input type="text" onChange={ (e) => this.setState({ genre: e.target.value }) } />
+                </div>
+                <div className="field">
+                    <label>Author:</label>
+                    <select onChange={ (e) => this.setState({ authorId: e.target.value }) } >
+                        <option>Select author</option>
+                        { this.displayAuthors() }
+                    </select>
+                </div>
+                <button>+</button>
+            </form>
+        );
+    }
+}
+
+export default compose(
+    graphql(getAuthorsQuery, { name: "getAuthorsQuery" }),
+    graphql(addBookMutation, { name: "addBookMutation" })
+)(AddBook);
diff --git a/client/src/components/BookDetails.js b/client/src/components/BookDetails.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { graphql } from 'react-apollo';
+import { getBookQuery } from '../queries/queries';
+
+class BookDetails extends Component {
+    displayBookDetails(){
+        const { book } = this.props.data;
+        if(book){
+            return(
+                <div>
+                    <h2>{ book.name }</h2>
+                    <p>{ book.genre }</p>
+                    <p>{ book.author.name }</p>
+                    <p>All books by this author:</p>
+                    <ul className="other-books">
+                        { book.author.books.map(item => {
+                            return <li key={item.id}>{ item.name }</li>
+                        })}
+                    </ul>
+                </div>
+            );
+        } else {
+            return( <div>No book selected...</div> );
+        }
+    }
+    render(){
+        return(
+            <div id="book-details">
+                { this.displayBookDetails() }
+            </div>
+        );
+    }
+}
+
+export default graphql(getBookQuery, {
+    options: (props) => {
+        return {
+            variables: {
+                id: props.bookId
+            }
+        }
+    }
+})(BookDetails);
diff --git a/client/src/components/BookList.js b/client/src/components/BookList.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { graphql } from 'react-apollo';
+import { getBooksQuery } from '../queries/queries';
+
+// components
+import BookDetails from './BookDetails';
+
+class BookList extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            selected: null
+        }
+    }
+    displayBooks(){
+        var data = this.props.data;
+        if(data.loading){
+            return( <div>Loading books...</div> );
+        } else {
+            return data.books.map(book => {
+                return(
+                    <li key={ book.id } onClick={ (e) => this.setState({ selected: book.id }) }>{ book.name }</li>
+                );
+            })
+        }
+    }
+    render(){
+        return(
+            <div>
+                <ul id="book-list">
+                    { this.displayBooks() }
+                </ul>
+                <BookDetails bookId={ this.state.selected } />
+            </div>
+        );
+    }
+}
+
+export default graphql(getBooksQuery)(BookList);
diff --git a/client/src/index.css b/client/src/index.css
@@ -0,0 +1,84 @@
+body{
+    background: #eee;
+    font-family: 'Nunito SemiBold';
+}
+
+#main h1{
+    color: #444;
+    text-align: center;
+}
+
+#main{
+    padding: 0px;
+    box-sizing: border-box;
+    width: 60%;
+    height: 100%;
+}
+
+#book-list{
+    padding: 0;
+}
+
+#book-list li{
+    display: inline-block;
+    margin: 12px;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #880E4F;
+    box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
+    cursor: pointer;
+    color: #880E4F;
+}
+
+form{
+    background: #fff;
+    padding: 20px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 400px;
+}
+
+form .field{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+}
+
+form label{
+    text-align: right;
+    padding: 6px;
+}
+
+form input, form select{
+    margin: 4px 0;
+    padding: 6px;
+    box-sizing: border-box;
+}
+
+form button{
+    color: #fff;
+    font-size: 2em;
+    background: #AD1457;
+    border: 0;
+    padding: 0 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+
+#book-details{
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 40%;
+    height: 100%;
+    background: #AD1457;
+    padding: 30px;
+    overflow: auto;
+    box-shadow: -2px -3px 5px rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    color: #fff;
+}
diff --git a/client/src/index.js b/client/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));