{"size": 1239, "ext": "js", "max_stars_repo_path": "client/src/components/BookDetails.js", "max_stars_repo_name": "DemonsGalore/freeCodeCamp-GraphQL", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/BookDetails.js", "max_issues_repo_name": "DemonsGalore/freeCodeCamp-GraphQL", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/BookDetails.js", "max_forks_repo_name": "DemonsGalore/freeCodeCamp-GraphQL", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.9347826087, "max_line_length": 67, "alphanum_fraction": 0.3914447135}
import React, { Fragment } from 'react';
import { Query } from 'react-apollo';

import { GET_BOOK_QUERY } from '../queries/queries';

const BookDetails = props => {
  const { bookId } = props;
  return(
    <Fragment>
      { bookId !== null ? (
        <div id="book_details">
          <Query query={GET_BOOK_QUERY} variables={{ id: bookId }}>
            {
              ({ loading, error, data }) => {
                if (loading) return <h4>Loading</h4>;
                if (error) console.log(error);
                const { name, genre, author } = data.book;

                return (
                  <div>
                    <p>{name}</p>
                    <p>{genre}</p>
                    <p>{author.name}</p>
                    <p>All books by this Autor:</p>
                    <ul>
                      { author.books.map(book => {
                        return <li key={book.id}>{book.name}</li>;
                      })}
                    </ul>
                  </div>
                );
              }
            }
          </Query>
        </div>
      ) : (
        <div id="book-details">
          <p>No book selected...</p>
        </div>
      )}
    </Fragment>
  );
};

export default BookDetails;
