Started search functionality

This commit is contained in:
Ken Jannette
2018-04-19 15:56:02 -04:00
parent ce5cf9c453
commit 074e002e7d
2 changed files with 16 additions and 2 deletions

View File

@@ -2,7 +2,7 @@ import React from 'react'
import { BrowserRouter, Link, Route } from 'react-router-dom' import { BrowserRouter, Link, Route } from 'react-router-dom'
// import * as BooksAPI from './BooksAPI' // import * as BooksAPI from './BooksAPI'
import Bookshelf from './Bookshelf' import Bookshelf from './Bookshelf'
import { getAll } from './BooksAPI' import { getAll, search } from './BooksAPI'
import SearchPage from './SearchPage' import SearchPage from './SearchPage'
import './App.css' import './App.css'
@@ -33,6 +33,13 @@ class BooksApp extends React.Component {
this.setState({ books }); this.setState({ books });
} }
onSearch = (query) => {
if (query.length > 3) {
search(query).then((result) =>
console.log(result))
}
}
render() { render() {
return ( return (
<BrowserRouter> <BrowserRouter>
@@ -47,7 +54,9 @@ class BooksApp extends React.Component {
)}/> )}/>
<Route path='/search' render={() => ( <Route path='/search' render={() => (
<SearchPage /> <SearchPage
onSearch={this.onSearch}
/>
)}/> )}/>
<div className="open-search"> <div className="open-search">

View File

@@ -2,7 +2,11 @@ import React, { Component } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
class SearchPage extends Component { class SearchPage extends Component {
render() { render() {
const onSearch = this.props.onSearch
return ( return (
<div className="search-books"> <div className="search-books">
<div className="search-books-bar"> <div className="search-books-bar">
@@ -11,6 +15,7 @@ class SearchPage extends Component {
<input <input
type="text" type="text"
placeholder="Search by title or author" placeholder="Search by title or author"
onChange={e => onSearch(e.target.value)}
/> />
</div> </div>
</div> </div>