Added history API

src/App.js

@@ -1,11 +1,15 @@
 import React from 'react'
-import { BrowserRouter, Link, Route } from 'react-router-dom'
+import { Router } from 'react-router-dom'
+import { Link, Route } from 'react-router-dom'
 // import * as BooksAPI from './BooksAPI'
 import Bookshelf from './Bookshelf'
+import createHistory from 'history/createBrowserHistory'
 import { getAll, search } from './BooksAPI'
 import SearchPage from './SearchPage'
 import './App.css'
 
+export const history = createHistory();
+
 class BooksApp extends React.Component {
 
   constructor() {
@@ -22,6 +26,11 @@ class BooksApp extends React.Component {
     })
   }
 
+  onResultSelect = (e) => {
+    console.log("onResultSelect")
+    this.history.push('/');
+  }
+
   onSelectChange = (e) => {
     const id = e.target.name
     const newShelf = e.target.value
@@ -44,7 +53,7 @@ class BooksApp extends React.Component {
 
   render() {
     return (
-      <BrowserRouter>
+      <Router history={history}>
 
         <div className="app">
 
@@ -59,6 +68,7 @@ class BooksApp extends React.Component {
               <SearchPage
                 results={this.state.results}
                 onSearch={this.onSearch}
+                onSelect={this.onResultSelect}
               />
             )}/>
 
@@ -68,7 +78,7 @@ class BooksApp extends React.Component {
 
         </div>
 
-      </BrowserRouter>
+      </Router>
     )
   }
 }

src/SearchPage.js

@@ -7,6 +7,8 @@ class SearchPage extends Component {
 
     const onSearch = this.props.onSearch
     const results = this.props.results
+    const onSelect = this.props.onSelect
+
     console.log("RESULTS", results)
 
     return (
@@ -31,7 +33,7 @@ class SearchPage extends Component {
                 <div className="book-top">
                   <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ result.imageLinks.thumbnail }")` }}></div>
                   <div className="book-shelf-changer">
-                    <select name={result.id}>
+                    <select name={result.id} onChange={onSelect}>
                       <option value="none">Move to...</option>
                       <option value="currentlyReading">Currently Reading</option>
                       <option value="wantToRead">Want to Read</option>