Skip to content
Permalink
Browse files

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

…of user's books.
  • Loading branch information...
mattboldt committed Feb 12, 2019
1 parent 063463a commit c833221eb018c8d2894e47af716488fb7d71ccc9
@@ -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
@@ -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>
);
}
@@ -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;
@@ -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;
@@ -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;
@@ -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>

0 comments on commit c833221

Please sign in to comment.
You can’t perform that action at this time.