Moved search function to SearchPage module from app.js
This commit is contained in:
20
src/App.js
20
src/App.js
@@ -4,7 +4,7 @@ import { 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 createHistory from 'history/createBrowserHistory'
|
import createHistory from 'history/createBrowserHistory'
|
||||||
import { getAll, search, update } from './BooksAPI'
|
import { get, getAll, update } from './BooksAPI'
|
||||||
import SearchPage from './SearchPage'
|
import SearchPage from './SearchPage'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
@@ -30,14 +30,11 @@ class BooksApp extends React.Component {
|
|||||||
|
|
||||||
const id = e.target.name
|
const id = e.target.name
|
||||||
const newShelf = e.target.value
|
const newShelf = e.target.value
|
||||||
const results = this.state.results
|
|
||||||
let newBook
|
let newBook
|
||||||
|
|
||||||
results.forEach((result) => {
|
get(id).then((result) => {
|
||||||
if (result.id === id) {
|
newBook = result
|
||||||
newBook = result
|
newBook.shelf = newShelf
|
||||||
newBook.shelf = newShelf
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
this.setState({
|
this.setState({
|
||||||
books: [...this.state.books, newBook]
|
books: [...this.state.books, newBook]
|
||||||
@@ -58,14 +55,6 @@ class BooksApp extends React.Component {
|
|||||||
this.setState({ books });
|
this.setState({ books });
|
||||||
}
|
}
|
||||||
|
|
||||||
onSearch = (query) => {
|
|
||||||
if (query.length > 3) {
|
|
||||||
search(query).then((results) => {
|
|
||||||
this.setState({ results })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Router history={history}>
|
<Router history={history}>
|
||||||
@@ -82,7 +71,6 @@ class BooksApp extends React.Component {
|
|||||||
<Route path='/search' render={() => (
|
<Route path='/search' render={() => (
|
||||||
<SearchPage
|
<SearchPage
|
||||||
results={this.state.results}
|
results={this.state.results}
|
||||||
onSearch={this.onSearch}
|
|
||||||
onSelect={this.onResultSelect}
|
onSelect={this.onResultSelect}
|
||||||
/>
|
/>
|
||||||
)}/>
|
)}/>
|
||||||
|
|||||||
@@ -1,12 +1,19 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
|
import { search } from './BooksAPI'
|
||||||
|
|
||||||
class SearchPage extends Component {
|
class SearchPage extends Component {
|
||||||
|
|
||||||
|
onSearch = (query) => {
|
||||||
|
if (query.length > 3) {
|
||||||
|
search(query).then((results) => {
|
||||||
|
this.results = results
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const onSearch = this.props.onSearch
|
|
||||||
const results = this.props.results
|
|
||||||
const onSelect = this.props.onSelect
|
const onSelect = this.props.onSelect
|
||||||
|
|
||||||
console.log("RESULTS", results)
|
console.log("RESULTS", results)
|
||||||
|
|||||||
Reference in New Issue
Block a user