books.jsx

class BooksCollection extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      books: [],
      packNames: [],
      loading: true
    };
  }

  componentWillMount() {
    this.fetchBooks();
  }

  handleSearch(event) {
    const searchQuery = event.target.value;
    console.log(this)

    if(searchQuery.length === 0 || searchQuery.length >= 3) {
      $.ajax('/customer_books', {
        dataType: "json",
        data: {query: searchQuery}
      }).then((response) => {
        console.log(this)
        this.setState({
          books: response.books
        });
      });
    }
  }

  fetchBooks() {
    $.ajax('/customer_books', {
      dataType: "json"
    }).then((response) => {
      const packNames = response.books.map((book) => { return { value: book.id, label: book.pack_name } });
      setTimeout(() => {
        this.setState({
          books: response.books
        });

        if(this.state.packNames.length === 0) {
          this.setState({ packNames: packNames })
        };
      }, 1000);
    });
  }

  render() {
    const books = this.state.books;
    const bookRows = books.map((book) => {
      return (
        <tr key={book.id}>
          <td className='cover'><img src='assets/list-book-example.png'/></td>
          <td><span>{ book.title }</span></td>
          <td>{ book.author }</td>
          <td>{ book.pack_name }</td>
          <td className='download'>
            <a href='#' className='btn btn-download send-to-kindle'></a>
          </td>
        </tr>
      )
    });
     

    return (
      <div>
        <div className="collection-actions container">
          <div className="form-group">
            <input name='search' placeholder="Wpisz tutaj tytuł lub autora" className="form-control book-search" onChange={this.handleSearch} />
          </div>
          <div className="form-group">
            <input type="select" className="form-control pack-select"/>
          </div>
        </div>
        <CollectionTable books={bookRows}/>
      </div>
    )
  }
}