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 { 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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user