kjannette/reactnd-project-bookbrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No message

Browse Source
This commit is contained in:
Ken Jannette
2018-04-18 09:58:38 -04:00
parent 5e9ef82c4f
commit 982c7529e1
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Bookshelf.js
View File

@@ -4,11 +4,11 @@ class Bookshelf extends Component {
render() { render() {
const books = this.props.books const books = this.props.books
/*
console.log(books.filter(function(book){ console.log(books.filter(function(book){
return book.shelf === "currentlyReading" return book.shelf === "currentlyReading"
})) }))
*/
return ( return (
<div className="list-books"> <div className="list-books">
@@ -21,10 +21,15 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Currently Reading</h2> <h2 className="bookshelf-title">Currently Reading</h2>
<div className="bookshelf-books"> <div className="bookshelf-books">
<ol className="books-grid"> <ol className="books-grid">
{books.filter(function(book){
return book.shelf === "currentlyReading"
}).map((book) => {
return
<li> <li>
<div className="book"> <div className="book">
<div className="book-top"> <div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url("http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api")' }}></div> <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url({book.imageLinks.thumbnail}")' }}></div>
<div className="book-shelf-changer"> <div className="book-shelf-changer">
<select> <select>
<option value="none" disabled>Move to...</option> <option value="none" disabled>Move to...</option>
@@ -35,28 +40,12 @@ class Bookshelf extends Component {
</select> </select>
</div> </div>
</div> </div>
<div className="book-title">To Kill a Mockingbird</div> <div className="book-title">{book.title}</div>
<div className="book-authors">Harper Lee</div> <div className="book-authors">{book.authors}</div>
</div>
</li>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 188, backgroundImage: 'url("http://books.google.com/books/content?id=yDtCuFHXbAYC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72RRiTR6U5OUg3IY_LpHTL2NztVWAuZYNFE8dUuC0VlYabeyegLzpAnDPeWxE6RHi0C2ehrR9Gv20LH2dtjpbcUcs8YnH5VCCAH0Y2ICaKOTvrZTCObQbsfp4UbDqQyGISCZfGN&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="none" disabled>Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div>
<div className="book-title">Enders Game</div>
<div className="book-authors">Orson Scott Card</div>
</div> </div>
</li> </li>
})}
</ol> </ol>
</div> </div>
</div> </div>