More refactoring

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import * as BooksAPI from './BooksAPI';
-import Shelf from './Shelf';
+import Shelves from './Shelves';
 import Search from './Search';
 import './App.css';
 
@@ -22,7 +22,7 @@ const shelves = [
 
 class BooksApp extends React.Component {
   state = {
-    booksInShelves: [], // Contains books that are assigned to any shelf
+    booksInShelves: [], // Contains books that are assigned to a shelf
   };
 
   componentDidMount() {
@@ -63,10 +63,6 @@ class BooksApp extends React.Component {
     });
   };
 
-  getBooksByShelf = (shelfId) => {
-    return this.state.booksInShelves.filter((b) => b.shelf === shelfId);
-  };
-
   isShelf = (shelfId) => {
     return shelves.map((shelf) => shelf.id).includes(shelfId);
   };
@@ -80,29 +76,11 @@ class BooksApp extends React.Component {
           exact
           path="/"
           render={() => (
-            <div className="list-books">
-              <div className="list-books-title">
-                <h1>MyReads</h1>
-              </div>
-              <div className="list-books-content">
-                <div>
-                  {shelves.map((shelf) => (
-                    <Shelf
-                      key={shelf.id}
-                      shelf={shelf}
-                      shelves={shelves}
-                      books={this.getBooksByShelf(shelf.id)}
-                      onBookMove={this.moveBook}
-                    />
-                  ))}
-                </div>
-              </div>
-              <div className="open-search">
-                <Link to="/search">
-                  <button>Add a book</button>
-                </Link>
-              </div>
-            </div>
+            <Shelves
+              shelves={shelves}
+              books={booksInShelves}
+              onBookMove={this.moveBook}
+            />
           )}
         />
         <Route

src/Search.js

@@ -19,32 +19,43 @@ class Search extends Component {
         query,
       }),
       () => {
-        let newSearchState = {
-          searchedBooks: [],
-          hasSearchError: false,
-        };
-        query.length > 0 &&
-          BooksAPI.search(query).then((books) => {
-            const isValidSearch =
-              typeof books !== 'undefined' && !books.hasOwnProperty('error');
-            if (isValidSearch) {
-              this.mapBooksToShelves(books); // Searched books don't contain shelf attributes, so map them
-              newSearchState.searchedBooks = books || [];
-            } else {
-              newSearchState.hasSearchError = true;
-            }
-          });
-        this.setState(() => newSearchState);
+        query.length > 0
+          ? this.performSearch(query)
+          : this.setState(() => ({
+              searchedBooks: [],
+              hasSearchError: false,
+            }));
       }
     );
   };
 
-  mapBooksToShelves = (books) => {
+  performSearch = (query) => {
+    BooksAPI.search(query).then((searchedBooks) => {
+      const isValidSearch =
+        typeof searchedBooks !== 'undefined' &&
+        !searchedBooks.hasOwnProperty('error');
+      if (isValidSearch) {
+        this.mapBooksToShelves(searchedBooks);
+        this.setState(() => ({
+          searchedBooks: searchedBooks || [],
+          hasSearchError: false,
+        }));
+      } else {
+        this.setState(() => ({
+          searchedBooks: [],
+          hasSearchError: true,
+        }));
+      }
+    });
+  };
+
+  mapBooksToShelves = (searchedBooks) => {
     const { booksInShelves } = this.props;
+    // Searched books don't contain shelf attributes, so map them
     booksInShelves.map((bookInShelf) =>
-      books
-        .filter((book) => book.id === bookInShelf.id)
-        .map((book) => (book.shelf = bookInShelf.shelf))
+      searchedBooks
+        .filter((searchedBook) => searchedBook.id === bookInShelf.id)
+        .map((searchedBook) => (searchedBook.shelf = bookInShelf.shelf))
     );
   };
 
@@ -85,7 +96,7 @@ class Search extends Component {
 
 Search.propTypes = {
   shelves: PropTypes.array.isRequired,
-  booksInShelves: PropTypes.object.isRequired,
+  booksInShelves: PropTypes.array.isRequired,
   onBookMove: PropTypes.func.isRequired,
 };
 

src/Shelves.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Shelf from './Shelf';
+import PropTypes from 'prop-types';
+
+const Shelves = (props) => {
+  const { books, shelves, onBookMove } = props;
+
+  const getBooksByShelf = (shelfId) => {
+    return books.filter((b) => b.shelf === shelfId);
+  };
+
+  return (
+    <div className="list-books">
+      <div className="list-books-title">
+        <h1>MyReads</h1>
+      </div>
+      <div className="list-books-content">
+        <div>
+          {shelves.map((shelf) => (
+            <Shelf
+              key={shelf.id}
+              shelf={shelf}
+              shelves={shelves}
+              books={getBooksByShelf(shelf.id)}
+              onBookMove={onBookMove}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="open-search">
+        <Link to="/search">
+          <button>Add a book</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+Shelves.propTypes = {
+  books: PropTypes.array.isRequired,
+  shelves: PropTypes.array.isRequired,
+  onBookMove: PropTypes.func.isRequired,
+};
+
+export default Shelves;