feat: Add search functionality

src/search.js

@@ -1,27 +1,46 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import * as BooksAPI from './BooksAPI'
+import Book from './Book'
 
 class SearchPage extends React.Component {
+  state = {
+    query: '',
+    searchResults: []
+  }
+  fetchResults(query) {
+    this.setState({ query })
+    BooksAPI.search(query).then((response) => {
+      if (response) {
+        this.setState({ searchResults: response })
+        console.log(`search query: ${this.state.query}`)
+        console.log(`search response: ${this.state.searchResults}`)
+      } else {
+        this.setState({ searchResults: [] })
+      }
+    })
+  }
   render() {
     return (
       <div className="search-books">
         <div className="search-books-bar">
           <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.
-                  You can find these search terms here:
-                  https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
-
-                  However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
-                  you don't find a specific author or title. Every search is limited by search terms.
-                */}
-            <input type="text" placeholder="Search by title or author" />
+            <input type="text" placeholder="Search by title or author"
+              value={this.state.query}
+              onChange={(e) => {
+                this.fetchResults(e.target.value)
+              }}
+            />
 
           </div>
         </div>
         <div className="search-books-results">
-          <ol className="books-grid"></ol>
+          <ol className="books-grid">
+            {(this.state.searchResults.length > 0) && (
+                this.state.searchResults.map(books => (<li key={books.id}><Book book={books} /></li>))
+              )}
+          </ol>
         </div>
       </div>
     );