{"size": 1880, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "abodacs/reactnd-project-myreads", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "abodacs/reactnd-project-myreads", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "abodacs/reactnd-project-myreads", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.6506024096, "max_line_length": 114, "alphanum_fraction": 0.5420212766}
import React from 'react'
import * as BooksAPI from './BooksAPI'
import './App.css'
import { Route, Switch } from 'react-router-dom'
import Search from './routes/Search'
import Home from './routes/Home'
class BooksApp extends React.Component {
  state = {
    shelves: [
      {
        slug: 'currentlyReading',
        title: 'Currently Reading',
      },
      {
        slug: 'wantToRead',
        title: 'Want to Read',
      },
      {
        slug: 'read',
        title: 'Read',
      }
    ],
    myReads : {
      all:[]
    },
  }
  constructor(props) {
    super(props);
    this.loadShelfsData    = this.getShelfsData.bind(this);
    this.onShelfChange     = this.onShelfChange.bind(this);
  }
  componentDidMount() {
    this.getShelfsData();
  }
 
  getShelfsData() {
    const myReads = { all: []}
    BooksAPI.getAll()
      .then((books) => {
        books.forEach(book => {
          if (myReads[book.shelf]) {
            myReads[book.shelf].push(book)
          } else {
            myReads[book.shelf] = [book]
          }
          myReads.all.push(book)
        })
        this.setState({myReads});
      })
      .catch(function(error) {
        console.log(error);
      });
  }
 
  //This method is used to change shelves
 onShelfChange = async (newShelf, bookId) => {
  try {
    await BooksAPI.update({id: bookId}, newShelf);
    this.getShelfsData();
  }
  catch (e) {
    console.log(e);
  }
};

  render() {
    return (
      <div className="app">
        <Switch>
          <Route exact path="/" >
            <Home  shelves={this.state.shelves} myReads={this.state.myReads} onShelfChange={this.onShelfChange} />
          </Route>
          <Route exact path='/search'>
            <Search onShelfChange={this.onShelfChange} myReads={this.state.myReads} />
          </Route>
         </Switch>
      </div>
    )
  }
}

export default BooksApp
