-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBooks.js
48 lines (44 loc) · 2.04 KB
/
Books.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, {Component} from 'react'
import PropTypes from 'prop-types'
class Books extends Component {
static propTypes = {
book: PropTypes.object.isRequired,
changeBookShelf: PropTypes.func.isRequired
}
render() {
const {book, changeBookShelf} = this.props
return (
<div>
{book && (
<li key={book.id}>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{
width: 128,
height: 193,
backgroundImage: `url(${book.imageLinks !== undefined ? book.imageLinks.thumbnail : ''})`
}}></div>
<div className="book-shelf-changer">
<select value={book.shelf} onChange={(event) => changeBookShelf(event, book)}>
<option value="" 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">{book.title}</div>
<div className="book-authors">
{book.authors && book.authors.length > 0 && book.authors.map((author, index) => (
<div key={index}>{author}</div>
))}
</div>
</div>
</li>
)}
</div>
)
}
}
export default Books