Skip to content

Commit

Permalink
chore: code styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Helio Ricardo committed Sep 18, 2017
1 parent 4b2a549 commit 5f0e0e8
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 106 deletions.
62 changes: 31 additions & 31 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ class BooksApp extends React.Component {
}

updateBooks = () => {
BooksAPI.getAll().then(books => this.setState({ books }))
BooksAPI
.getAll()
.then(books => this.setState({ books }))
}

moveBook = (book, shelf) => {
Expand Down Expand Up @@ -60,38 +62,36 @@ class BooksApp extends React.Component {
}

componentDidMount() {
this.updateBooks();
this.updateBooks()
}

render() {
return (
<div className="app">
<Route
exact path="/"
render={() => (
<BooksList
books={ this.state.books }
title={ "MyReads by @helioricardo" }
onMoveBook={ this.moveBook }
/>
)}
/>
<Route
path="/search"
render={({ history }) => (
<BooksSearch
searchResults={ this.state.searchResults }
onSearchBooks={ this.searchBooks }
onMoveBook={(book, shelf) => {
this.moveBook(book, shelf)
history.push('/')
}}
/>
)}
/>
</div>
)
}
render = () => (
<div className="app">
<Route
exact path="/"
render={() => (
<BooksList
books={ this.state.books }
title={ "MyReads by @helioricardo" }
onMoveBook={ this.moveBook }
/>
)}
/>
<Route
path="/search"
render={({ history }) => (
<BooksSearch
searchResults={ this.state.searchResults }
onSearchBooks={ this.searchBooks }
onMoveBook={(book, shelf) => {
this.moveBook(book, shelf)
history.push('/')
}}
/>
)}
/>
</div>
)
}

export default BooksApp
50 changes: 24 additions & 26 deletions src/Book.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,30 @@ import React from 'react'
import PropTypes from 'prop-types'
import shelves from './Shelves'

const Book = props => {
return (
<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">
<select
value={ props.shelf }
onChange={ (event) => props.onMoveBook(event.target.value) }>
<option value="none" disabled>Move to...</option>
{
shelves.map((shelf) => (
<option key={shelf.key} value={ shelf.key }>{ shelf.title }</option>
))
}
{ !props.onSearchPage &&
<option value="none">None</option>
}
</select>
</div>
</div>
<div className="book-title">{ props.title }</div>
<div className="book-authors">{ props.authors }</div>
</div>
)
}
const Book = props => (
<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">
<select
value={ props.shelf }
onChange={ (event) => props.onMoveBook(event.target.value) }>
<option value="none" disabled>Move to...</option>
{
shelves.map((shelf) => (
<option key={shelf.key} value={ shelf.key }>{ shelf.title }</option>
))
}
{ !props.onSearchPage &&
<option value="none">None</option>
}
</select>
</div>
</div>
<div className="book-title">{ props.title }</div>
<div className="book-authors">{ props.authors }</div>
</div>
)

Book.propTypes = {
image: PropTypes.string.isRequired,
Expand Down
50 changes: 24 additions & 26 deletions src/BooksList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,32 @@ import Link from 'react-router-dom/Link'
import Shelf from './Shelf'
import shelves from './Shelves'

const BooksList = ({ books, title, onMoveBook }) => {
return (
<div className="list-books">
<div className="list-books-title">
<h1>{ title }</h1>
</div>
<div className="list-books-content">
<div>
{
shelves.map(shelf => (
<Shelf
key={ shelf.key }
shelf={ shelf }
onMoveBook={ onMoveBook }
books={
books.filter(book => book.shelf === shelf.key)
}
/>
))
}
</div>
</div>
<div className="open-search">
<Link to="/search">Add a book</Link>
const BooksList = ({ books, title, onMoveBook }) => (
<div className="list-books">
<div className="list-books-title">
<h1>{ title }</h1>
</div>
<div className="list-books-content">
<div>
{
shelves.map(shelf => (
<Shelf
key={ shelf.key }
shelf={ shelf }
onMoveBook={ onMoveBook }
books={
books.filter(book => book.shelf === shelf.key)
}
/>
))
}
</div>
</div>
)
}
<div className="open-search">
<Link to="/search">Add a book</Link>
</div>
</div>
)

BooksList.propTypes = {
books: PropTypes.array.isRequired,
Expand Down
44 changes: 21 additions & 23 deletions src/Shelf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,28 @@ import React from 'react'
import PropTypes from 'prop-types'
import Book from './Book'

const Shelf = ({ shelf, books, onMoveBook }) => {
return (
<div className="bookshelf">
<h2 className="bookshelf-title">{ shelf.title }</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{
books.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 }
onMoveBook={shelf => onMoveBook(book, shelf) }
/>
</li>
))
}
</ol>
</div>
const Shelf = ({ shelf, books, onMoveBook }) => (
<div className="bookshelf">
<h2 className="bookshelf-title">{ shelf.title }</h2>
<div className="bookshelf-books">
<ol className="books-grid">
{
books.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 }
onMoveBook={shelf => onMoveBook(book, shelf) }
/>
</li>
))
}
</ol>
</div>
)
}
</div>
)

Shelf.propTypes = {
shelf: PropTypes.object.isRequired,
Expand Down

0 comments on commit 5f0e0e8

Please sign in to comment.