segunolalive/helloBooks

View on GitHub
client/components/Dashboard/Borrowed.jsx

Summary

Maintainability
A
2 hrs
Test Coverage
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Col } from 'react-materialize';
import Loading from '../common/Loading';


/**
 * component for borrowed Books
 *
 * @param {Object} props  Object containing array of borrowed Books
 *
 * @return {JSX}          JSX representation of component
 */
const Borrowed = (props) => {
  const books = props.borrowedBooks && props.borrowedBooks.length ?
    props.borrowedBooks.map(book =>
      <Col key={book.title} s={12} className="book-info grey-tex">
        <div className="card horizontal">
          <div className="card-image">
            <img
              src={book.cover || BOOK_IMAGE_FALLBACK}
              alt={book.title || 'N/A'}
            />
          </div>
          <div className="card-stacked">
            <div className="card-content">
              <h6 className="bold-text black-text">
                {book.title.toUpperCase() || null}
              </h6>
            </div>
            <div className="card-action center">
              <Button
                waves='light'
                id={`read-book-${book.id}-btn`}
                onClick={() => props.readBook(book.bookFile)}
              >
                Read Book
              </Button>
            </div>
            <div className="card-action center">
              <Button
                waves='light'
                id={`return-book-${book.id}-btn`}
                onClick={() => props.returnBook(book.id)}
              >
                Return Book
              </Button>
            </div>
          </div>
        </div>
      </Col>
    ) :
    <div className="center">
      <h5>Nothing here</h5>
      <p>Head over to the library to change that</p>
    </div>;
  const renderedContent = props.fetchingBorrowedBooks ?
    <Loading text='fetching your books' /> : books;
  return (
    <section className="col s12 m6 borrowed fill-page-height">
      <Col s={12}>
        <h4 className="center">Recently Borrowed</h4>
      </Col>
      {renderedContent}
    </section>
  );
};


Borrowed.propTypes = {
  borrowedBooks: PropTypes.array.isRequired,
  readBook: PropTypes.func.isRequired,
  returnBook: PropTypes.func.isRequired,
  fetchingBorrowedBooks: PropTypes.bool.isRequired,
};


export default Borrowed;