{"size": 3040, "ext": "js", "max_stars_repo_path": "src/Shelfs.js", "max_stars_repo_name": "bruno-gurgel/MyReads", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Shelfs.js", "max_issues_repo_name": "bruno-gurgel/MyReads", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Shelfs.js", "max_forks_repo_name": "bruno-gurgel/MyReads", "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": 29.8039215686, "max_line_length": 118, "alphanum_fraction": 0.4276315789}
import React from "react";
import Book from "./Book";
import PropTypes from "prop-types";

/**
 * Component that handles all of the shelfs and renders it.
 *
 * @component
 */
function Shelfs(props) {
  const { booksArray, updateShelf } = props;
  return (
    <div>
      <div className="bookshelf">
        <h2 className="bookshelf-title">Currently Reading</h2>
        <div className="bookshelf-books">
          <ol className="books-grid">
            {booksArray.map(
              (book) =>
                book.shelf === "currentlyReading" && (
                  <li key={book.id}>
                    <Book
                      backgroundURL={
                        book.imageLinks ? book.imageLinks.thumbnail : ""
                      }
                      bookTitle={book.title}
                      bookAuthor={book.authors}
                      shelf={book.shelf}
                      book={book}
                      updateShelf={updateShelf}
                    />
                  </li>
                )
            )}
          </ol>
        </div>
      </div>
      <div className="bookshelf">
        <h2 className="bookshelf-title">Want to Read</h2>
        <div className="bookshelf-books">
          <ol className="books-grid">
            {booksArray.map(
              (book) =>
                book.shelf === "wantToRead" && (
                  <li key={book.id}>
                    <Book
                      backgroundURL={
                        book.imageLinks ? book.imageLinks.thumbnail : ""
                      }
                      bookTitle={book.title}
                      bookAuthor={book.authors}
                      shelf={book.shelf}
                      book={book}
                      updateShelf={updateShelf}
                    />
                  </li>
                )
            )}
          </ol>
        </div>
      </div>
      <div className="bookshelf">
        <h2 className="bookshelf-title">Read</h2>
        <div className="bookshelf-books">
          <ol className="books-grid">
            {booksArray.map(
              (book) =>
                book.shelf === "read" && (
                  <li key={book.id}>
                    <Book
                      backgroundURL={
                        book.imageLinks ? book.imageLinks.thumbnail : ""
                      }
                      bookTitle={book.title}
                      bookAuthor={book.authors}
                      shelf={book.shelf}
                      book={book}
                      updateShelf={updateShelf}
                    />
                  </li>
                )
            )}
          </ol>
        </div>
      </div>
    </div>
  );
}

Shelfs.propTypes = {
  /**
   * The array of books that are on the shelf
   */
  booksArray: PropTypes.array.isRequired,
  /**
   * The function that updates the shelf when the user moves the book. ---- Will be passed to ShelfsControl component.
   */
  updateShelf: PropTypes.func.isRequired,
};

export default Shelfs;
