Added new User profile component. Refactored user avatar. Added list …

…of user's books.

app/graphql/types/book_type.rb

@@ -1,5 +1,6 @@
 module Types
   class BookType < Types::BaseObject
+    field :id, Integer, null: false
     field :title, String, null: false
     field :cover_url, String, null: true
     field :average_rating, Integer, null: true

frontend/src/components/App.js

@@ -1,11 +1,22 @@
 import React, { Component } from 'react';
 import Users from './Users';
+import User from './User';
 
 class App extends Component {
+  state = {
+    selectedUser: null
+  };
+
+  selectUser = (user) => {
+    this.setState({ selectedUser: user })
+  }
+
   render() {
     return (
       <div className="container mx-auto px-4">
-        <Users />
+        {this.state.selectedUser ?
+          <User user={this.state.selectedUser} selectUser={this.selectUser} /> :
+          <Users selectUser={this.selectUser} />}
       </div>
     );
   }

frontend/src/components/Books.js

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react';
+
+const Books = ({ books }) => (
+  <Fragment>
+    {books.map((book) =>
+      <div key={book.id} className="flex border-b border-solid border-grey-light">
+        <div className="w-3/4 p-4">
+          <h3>{book.title}</h3>
+          <p className="text-grey-darker">
+            {[...Array(book.averageRating).keys()].map((s) =>
+              <span key={s}>&#9733;</span>
+            )}
+          </p>
+        </div>
+        <div className="w-1/4 p-4">
+          <img src={book.coverUrl} className="w-full" alt={book.title} />
+        </div>
+      </div>
+    )}
+  </Fragment>
+);
+
+export default Books;

frontend/src/components/User.js

@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+import UserAvatar from './UserAvatar';
+import Books from './Books';
+
+const USER_QUERY = gql`
+  query User($id: ID!) {
+    user(id: $id) {
+      books {
+        id
+        title
+        coverUrl
+        averageRating
+      }
+    }
+  }
+`;
+
+const Users = ({ user, selectUser }) => (
+  <Query query={USER_QUERY} variables={{ id: user.id }}>
+    {({ loading, error, data }) => {
+      if (loading) return <div>Fetching..</div>
+      if (error) return <div>Error!</div>
+
+      return (
+        <Fragment>
+          <div className="flex my-4">
+            <button
+              className="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded"
+              onClick={selectUser.bind(this, null)}>
+              Back
+            </button>
+          </div>
+          <div className="flex mb-4">
+            <div className="my-4 w-1/4 rounded overflow-hidden">
+              <UserAvatar user={user} />
+            </div>
+            <div className="my-4 px-4 w-3/4">
+              <Books books={data.user.books} />
+            </div>
+          </div>
+        </Fragment>
+      )
+    }}
+  </Query>
+);
+
+export default Users;

frontend/src/components/UserAvatar.js

@@ -0,0 +1,15 @@
+import React, { Fragment } from 'react';
+import Gravatar from 'react-gravatar';
+
+const UserAvatar = ({ user }) => (
+  <Fragment>
+    <Gravatar email={user.email} size={150} className="w-full" />
+    <div className="px-6 py-4">
+      <div className="font-bold text-xl mb-2">{user.name}</div>
+      <p className="text-grey-darker text-sm">{user.email}</p>
+      <p className="text-grey-darker text-base">{user.booksCount} books</p>
+    </div>
+  </Fragment>
+)
+
+export default UserAvatar;

frontend/src/components/Users.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
-import Gravatar from 'react-gravatar';
+import UserAvatar from './UserAvatar';
 
 const USERS_QUERY = gql`
   query {
@@ -25,13 +25,10 @@ class Users extends Component {
           return (
             <div className="flex flex-wrap mb-4">
               {data.users.map((user) => {
-                return <div key={user.id} className="m-4 w-1/4 rounded overflow-hidden shadow-lg">
-                  <Gravatar email={user.email} size={150} className="w-full" />
-                  <div className="px-6 py-4">
-                    <div className="font-bold text-xl mb-2">{user.name}</div>
-                    <p className="text-grey-darker text-base">{user.email}</p>
-                    <p className="text-grey-darker text-base">{user.booksCount} books</p>
-                  </div>
+                return <div key={user.id}
+                            className="m-4 w-1/4 rounded overflow-hidden shadow-lg"
+                            onClick={this.props.selectUser.bind(this, user)}>
+                  <UserAvatar user={user} />
                 </div>
               })}
             </div>