listBooks.js

import React, { Component } from 'react'
import * as BooksAPI from '../BooksAPI'
import { Link } from 'react-router-dom'
import BookShelf from './bookShelf'
import '../App.css'

class ListBooks extends Component {
  constructor() {
    super();
    this.state = {
      homeLink: "Changed Link",
      bookList: []
    };

    this.updateBookStatus = this.updateBookStatus.bind(this);
  }

  componentDidMount() {
    BooksAPI.getAll().then(res => {
      this.setState({
        bookList: res
      })
    });
  }

  updateBookStatus(book, newShelf) {
    BooksAPI.update(book, newShelf).then(res => {
      BooksAPI.getAll().then(res => {
        this.setState({
            bookList: res
        })
      });
    });
    }

  onChangeLink() {
    this.props.changeLink(this.state.homeLink);
  }

  render() {
    const shelves = {
      currentlyReading: ['Currently Reading', 'currentlyReading'],
      wantToRead: ['Want to Read', 'wantToRead'],
      read: ['Read', 'read']
    }


    return (
      <div className="list-books">
          <div className="list-books-title">
              <h1>MyReads</h1>
          </div>
          <div className="list-books-content">
            { Object.keys(shelves).map((shelf) =>
              <BookShelf key={shelf}
                updateBook={this.updateBookStatus}
                books={this.state.bookList.filter(book => book.shelf === shelves[shelf][1])}
                title={shelves[shelf][0]}/>
              )}
          </div>
          <div className="open-search">
            <Link
              to='/search'
            >Add a book</Link>
          </div>
      </div>
    )
  }
}

export default ListBooks;