feat: Add browser routing for links

package.json

@@ -2,7 +2,8 @@
   "dependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-router-dom": "^4.3.1"
   },
   "devDependencies": {
     "react-scripts": "1.1.4"

src/App.js

@@ -1,33 +1,24 @@
 import React from 'react'
 import * as BooksAPI from './BooksAPI'
 import './App.css'
+import { Route } from 'react-router-dom'
 import SearchPage from './search';
 import ListBooks from './list-books'
 
 class BooksApp extends React.Component {
   state = {
-    /**
-     * TODO: Instead of using this state variable to keep track of which page
-     * we're on, use the URL in the browser's address bar. This will ensure that
-     * users can use the browser's back and forward buttons to navigate between
-     * pages, as well as provide a good URL they can bookmark and share.
-     */
-    showSearchPage: false,
     books: []
   }
   componentDidMount() {
-    BooksAPI.getAll().then(books=>{
-      this.setState({books})
+    BooksAPI.getAll().then(books => {
+      this.setState({ books })
     })
   }
   render() {
     return (
       <div className="app">
-        {this.state.showSearchPage ? (
-          <SearchPage />
-        ) : (
-          <ListBooks state={this.state}/>
-        )}
+        <Route path="/search" component={SearchPage} />
+        <Route exact path="/" render={() => (<ListBooks state={this.state} />)} />
       </div>
     )
   }

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 book={books} /></li>))}
           </ol>
         </div>
       </div>

src/index.js

@@ -1,6 +1,7 @@
 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/list-books.js

@@ -1,10 +1,11 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import Bookshelf from './Bookshelf'
 
 class ListBooks extends React.Component {
   placeTo = (sh) => (
     this.props.state.books
-    .filter((books)=>(books.shelf === sh))
+      .filter((books) => (books.shelf === sh))
   )
   render() {
     return (
@@ -20,7 +21,7 @@ class ListBooks extends React.Component {
           </div>
         </div>
         <div className="open-search">
-          <a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
+          <Link to="/search">Add a book</Link>
         </div>
       </div>
     );

src/search.js

@@ -1,11 +1,12 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 class SearchPage extends React.Component {
   render() {
     return (
       <div className="search-books">
         <div className="search-books-bar">
-          <a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
+          <Link to="/" className="close-search">Close</Link>
           <div className="search-books-input-wrapper">
             {/*
                   NOTES: The search from BooksAPI is limited to a particular set of search terms.