feat: Update the shelf for all books

john-mantas · Aug 12, 2018 · af5bee3 · af5bee3
1 parent 1937b7f
commit af5bee3
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,16 +9,19 @@ class BooksApp extends React.Component {
   state = {
     books: []
   }
-  componentDidMount() {
+  updateBooks = () => (
     BooksAPI.getAll().then(books => {
       this.setState({ books })
-    })
+    })    
+  )
+  componentDidMount() {
+    this.updateBooks()
   }
   render() {
     return (
       <div className="app">
-        <Route path="/search" component={SearchPage} />
-        <Route exact path="/" render={() => (<ListBooks state={this.state} />)} />
+        <Route path="/search" render={() => (<SearchPage updateBooks={this.updateBooks} parentState={this.state} />)} />
+        <Route exact path="/" render={() => (<ListBooks updateBooks={this.updateBooks} state={this.state} />)} />
       </div>
     )
   }

diff --git a/src/Book.js b/src/Book.js
@@ -1,29 +1,52 @@
 import React from 'react'
+import * as BooksAPI from './BooksAPI'
 
 class Book extends React.Component {
+  state = {
+    shelf: 'none'
+  }
+  updateShelf(value) {
+    this.setState({
+      shelf: value
+    })
+    BooksAPI.update(this.props.book, value).then((response) => (
+      this.props.updateBooks()
+    ))
+  }
+  componentDidMount() {
+    (this.props.book.shelf)
+      ? (this.updateShelf(this.props.book.shelf))
+      : (this.props.parentState.books
+        .filter(f => (f.id === this.props.book.id))
+        .map(m => (this.setState({ shelf: m.shelf }))
+        )
+      )
+  }
   render() {
     let image, title, authors
     this.props.book.imageLinks ? image = this.props.book.imageLinks.smallThumbnail : image = ''
     this.props.book.title ? title = this.props.book.title : title = 'No title available'
     this.props.book.authors ? authors = this.props.book.authors : authors = 'No authors available'
 
     return (
-    <div className="book">
-      <div className="book-top">
-        <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${image})` }}></div>
+      <div className="book">
+        <div className="book-top">
+          <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${image})` }}></div>
           <div className="book-shelf-changer">
-            <select>
+            <select value={this.state.shelf} onChange={(e) => (
+              this.updateShelf(e.target.value)
+            )}>
               <option value="move" 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">{title}</div>
+        <div className="book-authors">{authors}</div>
       </div>
-      <div className="book-title">{title}</div>
-      <div className="book-authors">{authors}</div>
-    </div>
     );
   }
 }

diff --git a/src/Bookshelf.js b/src/Bookshelf.js
@@ -8,7 +8,7 @@ class Bookshelf extends React.Component {
         <h2 className="bookshelf-title">{this.props.title}</h2>
         <div className="bookshelf-books">
           <ol className="books-grid">
-            {this.props.shelf.map((books) => (<li key={books.id}><Book book={books} /></li>))}
+            {this.props.shelf.map((books) => (<li key={books.id}><Book updateBooks={this.props.updateBooks} book={books} /></li>))}
           </ol>
         </div>
       </div>

diff --git a/src/list-books.js b/src/list-books.js
@@ -15,9 +15,9 @@ class ListBooks extends React.Component {
         </div>
         <div className="list-books-content">
           <div>
-            <Bookshelf title="Currently Reading" shelf={this.placeTo('currentlyReading')} />
-            <Bookshelf title="Want to Read" shelf={this.placeTo('wantToRead')} />
-            <Bookshelf title="Read" shelf={this.placeTo('read')} />
+            <Bookshelf title="Currently Reading" updateBooks={this.props.updateBooks} shelf={this.placeTo('currentlyReading')} />
+            <Bookshelf title="Want to Read" updateBooks={this.props.updateBooks} shelf={this.placeTo('wantToRead')} />
+            <Bookshelf title="Read" updateBooks={this.props.updateBooks} shelf={this.placeTo('read')} />
           </div>
         </div>
         <div className="open-search">

diff --git a/src/search.js b/src/search.js
@@ -13,8 +13,6 @@ class SearchPage extends React.Component {
     BooksAPI.search(query).then((response) => {
       if (response) {
         this.setState({ searchResults: response })
-        console.log(`search query: ${this.state.query}`)
-        console.log(`search response: ${this.state.searchResults}`)
       } else {
         this.setState({ searchResults: [] })
       }
@@ -38,8 +36,8 @@ class SearchPage extends React.Component {
         <div className="search-books-results">
           <ol className="books-grid">
             {(this.state.searchResults.length > 0) && (
-                this.state.searchResults.map(books => (<li key={books.id}><Book book={books} /></li>))
-              )}
+              this.state.searchResults.map(books => (<li key={books.id}><Book updateBooks={this.props.updateBooks} parentState={this.props.parentState} book={books} /></li>))
+            )}
           </ol>
         </div>
       </div>