App.js

import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import BookShelf from './BookShelf'



class BooksApp extends React.Component {
  state = {
    books: [],
    /**
     * TODO: Instead of using this state variable to keep track of which page
     * we're on, use the URL in the browser's address bar. This will ensure that
     * users can use the browser's back and forward buttons to navigate between
     * pages, as well as provide a good URL they can bookmark and share.
     */
    showSearchPage: false
  }


  componentDidMount() {
      BooksAPI.getAll()
        .then((books)=> {
          this.setState(()=> ({
            books
          }))
        })
  }

  // moveBook = (book) => {
  //   this.setState((currentState) => ({
  //     books: currentState.books.filter((b) => {
  //       //return c.id !== contact.id
  //       console.log('function is being invoked')
  //     })
  //   }))
  //   BooksAPI.update(book)
  // }

  handleChange = (event) => {
    console.log("value has changed")
    //console.log(this.props.id)
    // this.setState({
    //   book:
    // })
    //BooksAPI.update(this.props, this.props.id)
  }




  render() {
    console.log(this.state.books)
    return (
      <div className="app">
        {this.state.showSearchPage ? (
          <div className="search-books">
            <div className="search-books-bar">
              <a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
              <div className="search-books-input-wrapper">
                {/*
                  NOTES: The search from BooksAPI is limited to a particular set of search terms.
                  You can find these search terms here:
                  https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md

                  However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
                  you don't find a specific author or title. Every search is limited by search terms.
                */}
                <input type="text" placeholder="Search by title or author"/>

              </div>
            </div>
            <div className="search-books-results">
              <ol className="books-grid"></ol>
            </div>
          </div>
        ) : (

          <div className="list-books">
            <div className="list-books-content">
              <div>
                <div className="bookshelf">
                  <h2 className="bookshelf-title">Currently Reading</h2>
                  <div className="bookshelf-books">
                    <BookShelf books={this.state.books.filter((book) => 'currentlyReading' === book.shelf)} />
                  </div>
                </div>
                <div className="bookshelf">
                  <h2 className="bookshelf-title">Want to Read</h2>
                  <div className="bookshelf-books">
                    <BookShelf books={this.state.books.filter((book) => 'wantToRead' === book.shelf)} />
                  </div>
                </div>
                <div className="bookshelf">
                  <h2 className="bookshelf-title">Read</h2>
                  <div className="bookshelf-books">
                    <BookShelf books={this.state.books.filter((book) => 'read' === book.shelf)} />
                  </div>
                </div>
              </div>
            </div>
            <div className="open-search">
              <a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
            </div>
          </div>
        )}
      </div>
    )
  }
}

export default BooksApp

book.js

import React, {Component} from 'react'
import * as BooksAPI from './BooksAPI'

class Book extends Component{



  handleChange = (event) => {
    console.log("value has changed")
    console.log(this.props.id)
  }

  render(){
    return (
            <div className="book">
              <div className="book-top">
                <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url('+ this.props.thumbnail +')' }}></div>
                <div className="book-shelf-changer">
                  <select value={this.props.bookshelf} onChange={this.handleChange} >
                    <option value="none" disabled>Move to...</option>
                    <option value="currentlyReading">Currently Reading</option>
                    <option value="wantToRead">Want to Read</option>
                    <option value="read">Read</option>
                    <option value="none">None</option>
                  </select>
                </div>
              </div>
              <div className="book-title">{this.props.title}</div>
              <div className="book-authors">{this.props.author}</div>
              </div>
    );
  }
};

export default Book



// const Book = (props) => {
//
//   console.log(props.bookshelf)
//
// const handleChange = () => {
//   console.log('Click happended')
// }
//   return (
//           <div className="book">
//             <div className="book-top">
//               <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url('+ props.thumbnail +')' }}></div>
//               <div className="book-shelf-changer">
//                 <select value={props.bookshelf} onChange={this.handleChange} >
//                   <option value="none" disabled>Move to...</option>
//                   <option value="currentlyReading">Currently Reading</option>
//                   <option value="wantToRead">Want to Read</option>
//                   <option value="read">Read</option>
//                   <option value="none">None</option>
//                 </select>
//               </div>
//             </div>
//             <div className="book-title">{props.title}</div>
//             <div className="book-authors">{props.author}</div>
//             </div>
//   );
// };
//
// export default Book

BookShelf.js

import React from 'react'
import Book from './Book'


 const BookShelf = (props) => {

    console.log(props.onChange)


    return(
      <ol className="books-grid">
        { props.books.map((book) => (
          <li key={book.id}>
            <Book
                title={book.title}
                author={book.authors}
                thumbnail={book.imageLinks.smallThumbnail}
                bookshelf={book.shelf}
                id={book.id}
                
            />
          </li>
        ))}
      </ol>
    );
};

export default BookShelf