sample-quotes-demo

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      categories: [],
      quotes: []
    }
    this.handleButtonClick = this.handleButtonClick.bind(this)
  }

  getIdFromCategoryName(catName) {
    for (let i = 0; i < this.state.categories.length; i++) {
      if (this.state.categories[i].genre_type === catName) {
        return this.state.categories[i].id
      }
    }
    return 0
  }

  handleButtonClick(evt) {
    const catId = this.getIdFromCategoryName(evt.target.innerText)
    fetch(`http://ada-api.herokuapp.com/api/categories/${catId}`)
    .then((res) => res.json())
    .then((json) => this.setState({ ...this.state, quotes: json.category}))
  }

  componentDidMount() {
    fetch('http://ada-api.herokuapp.com/api/categories')
    .then((res) => res.json())
    .then((json) => this.setState({ categories: json.categoriesData }))
  }

  render() {
    return (
      <div className="main-container">
        <header>Quotes 4 u</header>
        <div className='button-zone'>
          {this.state.categories.length > 0 ?
            this.state.categories.map((cat) => {
             return <button onClick={this.handleButtonClick}>{cat.genre_type}</button>
            })
            :
            <div className='loading-categories'>Loading Categories...</div>
          }
        </div>

        <div className='quotes-zone'>
          {this.state.quotes.length > 0 ?
            this.state.quotes.map((quote) =>
              <div catName='quote'>{quote.content} -{quote.author}</div>
            )
            :
            <div className='no-quotes'>No quotes to show!</div>
          }
        </div>
      </div>
    );
  }
}

export default App;