Renamed variables

src/App.js

@@ -28,7 +28,7 @@ class BooksApp extends React.Component {
      * pages, as well as provide a good URL they can bookmark and share.
      */
     showSearchPage: false,
-    booksInShelf: {},
+    booksInShelf: {}, // Contains books that are assigned to any shelf
   }
 
   componentDidMount() {
@@ -78,7 +78,7 @@ class BooksApp extends React.Component {
         {this.state.showSearchPage ? (
           <Search
             shelfList={shelfList}
-            booksInShelf={booksInShelf}
+            booksAnyShelf={booksInShelf}
             onBookMove={this.moveBook}
           />
         ) : (
@@ -92,9 +92,9 @@ class BooksApp extends React.Component {
                     <Shelf
                       key={shelf.id}
                       shelf={shelf}
-                      books={this.getBooksByShelf(shelf.id)}
                       shelfList={shelfList}
-                      booksInShelf={booksInShelf}
+                      booksThisShelf={this.getBooksByShelf(shelf.id)}
+                      booksAnyShelf={booksInShelf}
                       onBookMove={this.moveBook}
                     />
                   )

src/Book.js

@@ -3,7 +3,7 @@ import ShelfChanger from './ShelfChanger';
 import PropTypes from 'prop-types';
 
 const Book = (props) => {
-  const { book, shelfList, booksInShelf, onBookMove } = props;
+  const { book, shelfList, booksAnyShelf, onBookMove } = props;
   const { title, authors, imageLinks } = book;
 
   return (
@@ -19,7 +19,7 @@ const Book = (props) => {
         <ShelfChanger
           book={book}
           shelfList={shelfList}
-          booksInShelf={booksInShelf}
+          booksAnyShelf={booksAnyShelf}
           onBookMove={onBookMove}
         />
       </div>
@@ -32,7 +32,7 @@ const Book = (props) => {
 Book.propTypes = {
   book: PropTypes.object.isRequired,
   shelfList: PropTypes.array.isRequired,
-  booksInShelf: PropTypes.object.isRequired,
+  booksAnyShelf: PropTypes.object.isRequired,
   onBookMove: PropTypes.func.isRequired,
 };
 

src/ListBooks.js

@@ -3,16 +3,16 @@ import Book from './Book'
 import PropTypes from 'prop-types';
 
 const ListBooks = (props) => {
-  const { books, shelfList, booksInShelf, onBookMove } = props;
+  const { booksThisList, shelfList, booksAnyShelf, onBookMove } = props;
 
   return (
     <ol className="books-grid">
-      {books.map((book) => (
+      {booksThisList.map((book) => (
         <li key={book.id}>
           <Book
             book={book}
             shelfList={shelfList}
-            booksInShelf={booksInShelf}
+            booksAnyShelf={booksAnyShelf}
             onBookMove={onBookMove}
           />
         </li>
@@ -22,9 +22,9 @@ const ListBooks = (props) => {
 }
 
 ListBooks.propTypes = {
-  books: PropTypes.array.isRequired,
+  booksThisList: PropTypes.array.isRequired,
   shelfList: PropTypes.array.isRequired,
-  booksInShelf: PropTypes.object.isRequired,
+  booksAnyShelf: PropTypes.object.isRequired,
   onBookMove: PropTypes.func.isRequired,
 };
 

src/Search.js

@@ -33,7 +33,7 @@ class Search extends Component {
 
   render() {
     const { query, books, hasSearchError } = this.state;
-    const { shelfList, booksInShelf, onBookMove } = this.props;
+    const { shelfList, booksAnyShelf, onBookMove } = this.props;
 
     return (
       <div className="search-books">
@@ -53,9 +53,9 @@ class Search extends Component {
         <div className="search-books-results">
           {!hasSearchError &&
             <ListBooks
-              books={books}
+              booksThisList={books}
               shelfList={shelfList}
-              booksInShelf={booksInShelf}
+              booksAnyShelf={booksAnyShelf}
               onBookMove={onBookMove}
             />
           }
@@ -67,7 +67,7 @@ class Search extends Component {
 
 Search.propTypes = {
   shelfList: PropTypes.array.isRequired,
-  booksInShelf: PropTypes.object.isRequired,
+  booksAnyShelf: PropTypes.object.isRequired,
   onBookMove: PropTypes.func.isRequired,
 };
 

src/Shelf.js

@@ -6,21 +6,21 @@ class Shelf extends Component {
 
   shouldComponentUpdate(nextProps) {
     // Only update if a book is added or removed
-    return this.props.books.length !== nextProps.books.length;
+    return this.props.booksThisShelf.length !== nextProps.booksThisShelf.length;
   }
 
   render() {
-    const { shelf, books, shelfList, booksInShelf, onBookMove } = this.props;
+    const { shelf, shelfList, booksThisShelf, booksAnyShelf, onBookMove } = this.props;
 
     return (
       <div className="bookshelf">
         <h2 className="bookshelf-title">{shelf.label}</h2>
         <div className="bookshelf-books">
           <ListBooks
-            books={books}
+            booksThisList={booksThisShelf}
             shelfList={shelfList}
+            booksAnyShelf={booksAnyShelf}
             onBookMove={onBookMove}
-            booksInShelf={booksInShelf}
           />
         </div>
       </div>
@@ -30,9 +30,9 @@ class Shelf extends Component {
 
 Shelf.propTypes = {
   shelf: PropTypes.object.isRequired,
-  books: PropTypes.array.isRequired,
   shelfList: PropTypes.array.isRequired,
-  booksInShelf: PropTypes.object.isRequired,
+  booksThisShelf: PropTypes.array.isRequired,
+  booksAnyShelf: PropTypes.object.isRequired,
   onBookMove: PropTypes.func.isRequired,
 };
 

src/ShelfChanger.js

@@ -7,14 +7,14 @@ const noShelf = {
 };
 
 const ShelfChanger = (props) => {
-  const { book, shelfList, booksInShelf, onBookMove } = props;
+  const { book, shelfList, booksAnyShelf, onBookMove } = props;
 
   const getShelf = (book) => {
     if(book.hasOwnProperty('shelf')) {
-      return book.shelf
+      return book.shelf;
     }
-    if(Object.keys(booksInShelf).includes(book.id)) {
-      return booksInShelf[book.id].shelf;
+    if(Object.keys(booksAnyShelf).includes(book.id)) {
+      return booksAnyShelf[book.id].shelf;
     }
     return noShelf.id;
   };