feat: Route and link the shelfs and search

package.json

@@ -6,6 +6,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "2.1.1"
   },
   "scripts": {

src/App.js

@@ -1,16 +1,22 @@
-import React, { useState, useEffect } from 'react'
-import ShowBooks from './showBooks.js'
+import React, {useState, useEffect} from 'react'
+import { Route, Link } from 'react-router-dom'
+import Shelfs from './Shelfs.js'
+import Search from './Search'
 import * as BooksAPI from './BooksAPI'
 import './App.css'
 
+
 const BooksApp = () => {
+
   const [currentlyReading, setCurrentlyReading] = useState([])
   const [wantToRead, setWantToRead] = useState([])
   const [read, setRead] = useState([])
+  const [booksOnShelf, setBooksOnShelf] = useState([])
 
   useEffect(() => {
     // Update the document title using the browser API
     BooksAPI.getAll().then((books) => {
+      setBooksOnShelf(books)
       setCurrentlyReading(
         filterToShelf(books, 'currentlyReading')
       )
@@ -67,17 +73,27 @@ const BooksApp = () => {
        //remove from old shelf
        tidyShelf(oldShelf, shelfs[oldShelf])
     })
-
   }
 
 
   return (
     <div className="app">
-      <ShowBooks books={currentlyReading} shelfTitle="Currently Reading" moveBook={moveBook}/>
-      <ShowBooks books={wantToRead} shelfTitle="Want to Read" moveBook={moveBook}/>
-      <ShowBooks books={read} shelfTitle="Read" moveBook={moveBook}/>
+      <Route exact path="/" render={() => (
+        <div className="list-books">
+          <Shelfs currentlyReading={currentlyReading} wantToRead={wantToRead} read={read} moveBook={moveBook} />
+          <div className="open-search">
+            <Link
+            to="/search">
+            <button>Add a book</button>
+            </Link>
+          </div>
+        </div>
+      )}/>
+    <Route exact path="/search" render={({ history }) => (<Search booksOnShelf={booksOnShelf} moveBook={(event, book) => {
+      moveBook(event, book)
+      history.push('/')
+    }}/>)}/>
     </div>
-
   )
 }
 

src/Shelfs.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import ShowBooks from './ShowBooks.js'
+
+const Shelfs = (props) => {
+
+  const {currentlyReading, wantToRead, read, moveBook} = props
+
+  return (
+    <div>
+      <div className="list-books-title">
+        <h1>MyReads</h1>
+      </div>
+      <div className="list-books-content">
+        <div>
+          <div className="bookshelf">
+            <h2 className="bookshelf-title">Currently Reading</h2>
+            <ShowBooks books={currentlyReading} moveBook={moveBook}/>
+          </div>
+          <div className="bookshelf">
+            <h2 className="bookshelf-title">Want to Read</h2>
+            <ShowBooks books={wantToRead} moveBook={moveBook}/>
+          </div>
+          <div className="bookshelf">
+            <h2 className="bookshelf-title">Read</h2>
+            <ShowBooks books={read} moveBook={moveBook}/>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Shelfs

src/index.js

@@ -1,6 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 import './index.css'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(
+  <BrowserRouter><App /></BrowserRouter>, 
+  document.getElementById('root')
+)

src/showBooks.js

@@ -2,21 +2,19 @@ import React from 'react'
 
 const ShowBooks = (props) => {
 
-  const {books, shelfTitle, moveBook} = props
+  const {books, moveBook} = props
 
   return (
-    <div className="bookshelf">
-      <h2 className="bookshelf-title">{shelfTitle}</h2>
       <div className="bookshelf-books">
           <ol className="books-grid">
             {
               books.map((book, index) => (
                 <li key={book.id}>
                   <div className="book">
                     <div className="book-top">
-                      <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${book.imageLinks.thumbnail}")`}}></div>
+                      <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${'imageLinks' in book ? book.imageLinks.thumbnail : 'nopreview.png'}")`}}></div>
                       <div className="book-shelf-changer">
-                        <select defaultValue={book.shelf} onChange={(event) => moveBook(event, book)}>
+                        <select defaultValue={'shelf' in book ? book.shelf : 'none'} onChange={(event) => moveBook(event, book)}>
                           <option value="move" disabled>Move to...</option>
                           <option value="currentlyReading">Currently Reading</option>
                           <option value="wantToRead">Want to Read</option>
@@ -26,18 +24,13 @@ const ShowBooks = (props) => {
                       </div>
                     </div>
                     <div className="book-title">{book.title}</div>
-                    <div className="book-authors">{book.authors.join(', ')}</div>
+                    <div className="book-authors">{'authors' in book && book.authors.join(', ')}</div>
                   </div>
                 </li>
               ))
             }
           </ol>
       </div>
-
-
-    </div>
-
-
   )
 
 }