Started search functionality
This commit is contained in:
13
src/App.js
13
src/App.js
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
import { BrowserRouter, Link, Route } from 'react-router-dom'
|
||||
// import * as BooksAPI from './BooksAPI'
|
||||
import Bookshelf from './Bookshelf'
|
||||
import { getAll } from './BooksAPI'
|
||||
import { getAll, search } from './BooksAPI'
|
||||
import SearchPage from './SearchPage'
|
||||
import './App.css'
|
||||
|
||||
@@ -33,6 +33,13 @@ class BooksApp extends React.Component {
|
||||
this.setState({ books });
|
||||
}
|
||||
|
||||
onSearch = (query) => {
|
||||
if (query.length > 3) {
|
||||
search(query).then((result) =>
|
||||
console.log(result))
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
@@ -47,7 +54,9 @@ class BooksApp extends React.Component {
|
||||
)}/>
|
||||
|
||||
<Route path='/search' render={() => (
|
||||
<SearchPage />
|
||||
<SearchPage
|
||||
onSearch={this.onSearch}
|
||||
/>
|
||||
)}/>
|
||||
|
||||
<div className="open-search">
|
||||
|
||||
@@ -2,7 +2,11 @@ import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
class SearchPage extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const onSearch = this.props.onSearch
|
||||
|
||||
return (
|
||||
<div className="search-books">
|
||||
<div className="search-books-bar">
|
||||
@@ -11,6 +15,7 @@ class SearchPage extends Component {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by title or author"
|
||||
onChange={e => onSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user