App.js

import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import { Link, Route } from 'react-router-dom'
import SearchBooks from "./SearchBooks";
import BookShelf from "./BookShelf"

class BooksApp extends React.Component {
    state = {
        books: []
    };

    updateBooks = () => {
        BooksAPI.getAll().then( (books) => {
            books.map((book) => {
                //prevents rendering errors if books don't have an image link
                if(!book.imageLinks) {
                    book.imageLinks = {
                        thumbnail: ''
                    };
                }

                //prevents rendering errors if books don't have an author
                if(!book.authors) {
                    book.authors = [];
                }
                return book;
            });

            this.setState({ books })
        });
    };

    componentDidMount() {
        this.updateBooks();
    };


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


        return (
            <div className="app">
                {/*<Route path="/search" component={SearchBooks}/>*/}
                <Route path="/search" render={() => (
                    <SearchBooks updateBooks={this.updateBooks} shelvedBooks={this.state.books}/>
                )}/>
                <Route exact path="/" render={() => (
                        <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}
                                        books={this.state.books}
                                        shelf={shelves[shelf][1]}
                                        updateBooks={this.updateBooks}
                                        shelfTitle={shelves[shelf][0]}/>
                                )}
                            </div>
                            <div className="open-search">
                                <Link
                                    to={"/search"}
                                >Add a book</Link>
                            </div>
                        </div>
                        )
                    }
                />
            </div>
        )
    }
}

export default BooksApp