Skip to content

Commit

Permalink
Merge pull request #22 from helioricardo/search-and-add-books
Browse files Browse the repository at this point in the history
Search and add books
  • Loading branch information
helioricardo authored Sep 18, 2017
2 parents df28eab + 68561ed commit 4b2a549
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 24 deletions.
4 changes: 4 additions & 0 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,10 @@ body, .app {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background: #eee;
}
.book-on-shelf .book-cover {
transform: scale(0.8);
}

.book-cover-title {
padding: 20px 10px 0;
text-align: center;
Expand Down
55 changes: 48 additions & 7 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import BooksSearch from './BooksSearch'

class BooksApp extends React.Component {
state = {
books: []
books: [],
searchResults: []
}

updateBooks = () => {
Expand All @@ -19,11 +20,42 @@ class BooksApp extends React.Component {
.update(book, shelf)
.then(() => BooksAPI.get(book.id))
.then(updatedBook => {
this.setState(prevState => ({
books: prevState.books.map(book => (
(book.id === updatedBook.id) ? updatedBook : book
))
}))
if(updatedBook.shelf === "none") {
this.setState(prevState => ({
books: prevState.books.filter(book => (book.id !== updatedBook.id))
}))
} else {
this.setState(prevState => ({
books: prevState.books.map(book => (
(book.id === updatedBook.id) ? updatedBook : book
))
}))
}
})
}

mapShelvesToSearchResults = searchResults => {
this.setState({
searchResults: searchResults.map(book => {
const bookOnShelf = this.state.books.find(bookOnShelf => (
bookOnShelf.id === book.id
))
book.shelf = (bookOnShelf) ? bookOnShelf.shelf : "none"

return book;
})
})
}

searchBooks = (query) => {
BooksAPI
.search(query, 20)
.then(searchResults => {
if(searchResults.error) {
this.setState({ searchResults: [] })
return
}
this.mapShelvesToSearchResults(searchResults)
})
}

Expand All @@ -46,7 +78,16 @@ class BooksApp extends React.Component {
/>
<Route
path="/search"
component={BooksSearch}
render={({ history }) => (
<BooksSearch
searchResults={ this.state.searchResults }
onSearchBooks={ this.searchBooks }
onMoveBook={(book, shelf) => {
this.moveBook(book, shelf)
history.push('/')
}}
/>
)}
/>
</div>
)
Expand Down
11 changes: 7 additions & 4 deletions src/Book.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import shelves from './Shelves'

const Book = props => {
return (
<div className="book">
<div className={(props.shelf !== "none") ? "book book-on-shelf" : "book"}>
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${props.image})` }}></div>
<div className="book-shelf-changer">
Expand All @@ -17,7 +17,9 @@ const Book = props => {
<option key={shelf.key} value={ shelf.key }>{ shelf.title }</option>
))
}
<option value="none">None</option>
{ !props.onSearchPage &&
<option value="none">None</option>
}
</select>
</div>
</div>
Expand All @@ -30,9 +32,10 @@ const Book = props => {
Book.propTypes = {
image: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
authors: PropTypes.string.isRequired,
authors: PropTypes.string,
shelf: PropTypes.string.isRequired,
onMoveBook: PropTypes.func.isRequired
onMoveBook: PropTypes.func.isRequired,
onSearchPage: PropTypes.bool
}

export default Book
66 changes: 54 additions & 12 deletions src/BooksSearch.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,62 @@
import React from 'react'
import PropTypes from 'prop-types'
import Link from 'react-router-dom/Link'
import Book from './Book'

const BooksSearch = () => {
return (
<div className="search-books">
<div className="search-books-bar">
<Link className="close-search" to="/">Close</Link>
<div className="search-books-input-wrapper">
<input type="text" placeholder="Search by title or author"/>
class BooksSearch extends React.Component {
state = {
query: ''
}

handleChange = event => {
const { onSearchBooks } = this.props
const query = event.target.value

this.setState({ query })
onSearchBooks(query)
}

render = () => {
const { searchResults, onMoveBook } = this.props

return (
<div className="search-books">
<div className="search-books-bar">
<Link className="close-search" to="/">Close</Link>
<div className="search-books-input-wrapper">
<input
type="text"
placeholder="Search by title or author"
value={ this.state.query }
onChange={ this.handleChange }
/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid">
{searchResults.map(book => (
<li key={ book.id }>
<Book
shelf={ book.shelf }
image={ book.imageLinks.thumbnail }
title={ book.title }
authors={ (Array.isArray(book.authors)) ? book.authors.join(", ") : null }
onSearchPage
onMoveBook={shelf => onMoveBook(book, shelf) }
/>
</li>
))}
</ol>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid"></ol>
</div>
</div>
)
)
}
}

BooksSearch.propTypes = {
searchResults: PropTypes.array,
onSearchBooks: PropTypes.func.isRequired,
onMoveBook: PropTypes.func.isRequired
}

export default BooksSearch
2 changes: 1 addition & 1 deletion src/Shelf.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Shelf = ({ shelf, books, onMoveBook }) => {
shelf={ book.shelf }
image={ book.imageLinks.thumbnail }
title={ book.title }
authors={ book.authors.join(", ") }
authors={ (Array.isArray(book.authors)) ? book.authors.join(", ") : null }
onMoveBook={shelf => onMoveBook(book, shelf) }
/>
</li>
Expand Down

0 comments on commit 4b2a549

Please sign in to comment.