import React, { Component } from 'react';
import checkAuthentication from '../helpers/auth';

class BookDetails extends Component {
  constructor(props) {
    super(props);
    this.favBook = this.favBook.bind(this);
  }

  favBook() {
    const {
      isAuthenticated,
      favoriteBook,
      user,
      book,
    } = this.props;

    checkAuthentication(isAuthenticated);
    favoriteBook(user.id, book.id);
  }

  render() {
    const { book } = this.props;
    console.log(this.props);
    return (
            <div className="row card-panel">
              <div className = "row center"><h4 className="book-header">{ book.title }</h4> </div>
              <div className = 'divider'></div><br/>
              <div className="z-index-2">
                  <div className="col s12 m4 l4" ><img src= {book.imageURL} className="responsive-img book-image"/></div>
                  <div className="col s12 m8 l8">
                      <p className="bold black-text">Author: <span> { book.author } </span></p>
                      <div className = 'divider'></div>
                      <p className = "bold black-text">Category: <span> { book.subject } </span></p>
                      <div className = 'divider'></div>
                      <p className = "bold black-text">Copies Borrowed: <span> { book.borrowCount } </span></p>
                      <div className = 'divider'></div>
                      <p className = "bold black-text">Copies Available: <span> { book.quantity } </span></p>
                      <div className = 'divider'></div>
                      <p className = "bold black-text">Description: <span> { book.description } </span></p>
                      <div className = 'divider'></div><br/>
                      <div>
                          <button className="btn btn-small red">Borrow Book</button>
                          <div className="left">
                          <button className="btn btn-small white teal-text left"><i className="material-icons prefix">thumb_up</i><span>{book.upvotes}</span></button>
                          <button className="btn btn-small white teal-text left"><i className="material-icons prefix">thumb_down</i><span>{book.downvotes}</span></button>
                          <button className="btn btn-small white teal-text left" disabled = { this.props.isFavoriting } onClick={ this.favBook }>
                              <i className="material-icons prefix">favorite_border</i><span>{book.favCount}</span>
                          </button>
                      </div>
                      </div>
                  </div>
              </div>
          </div>
    );
  }
}

export default BookDetails;

@@ -216,43 +216,164 @@
 ;%0A  
-%7D%0A%0A  favBook() %7B%0A    const %7B%0A      
+  this.upvoteBook = this.upvoteBook.bind(this);%0A    this.downvoteBook = this.downvoteBook.bind(this);%0A  %7D%0A%0A  favBook() %7B%0A    checkAuthentication(this.props.
 isAu
@@ -383,24 +383,34 @@
 nticated
-,
+);
 %0A    
-  
+this.props.
 favorite
@@ -417,54 +417,215 @@
 Book
-,%0A      user,%0A      book,%0A    %7D = this.props;%0A
+(this.props.user.id, this.props.book.id);%0A  %7D%0A%0A  upvoteBook() %7B%0A    checkAuthentication(this.props.isAuthenticated);%0A    this.props.upvoteBook(this.props.user.id, this.props.book.id);%0A  %7D%0A%0A  downvoteBook() %7B
 %0A   
@@ -645,16 +645,27 @@
 ication(
+this.props.
 isAuthen
@@ -682,30 +682,63 @@
     
-favoriteBook(user.id, 
+this.props.downvoteBook(this.props.user.id, this.props.
 book
@@ -2293,33 +2293,128 @@
  teal-text left%22
-%3E
+ onClick = %7B this.upvoteBook %7D disabled = %7B this.props.isUpvoting%7D%3E%0A                            
 %3Ci className=%22ma
@@ -2465,32 +2465,59 @@
 .upvotes%7D%3C/span%3E
+%0A                          
 %3C/button%3E%0A      
@@ -2590,17 +2590,117 @@
 xt left%22
-%3E
+ onClick = %7B this.downvoteBook %7D disabled = %7B this.props.isDownvoting %7D%3E%0A                            
 %3Ci class
@@ -2771,16 +2771,43 @@
 %7D%3C/span%3E
+%0A                          
 %3C/button

Add handlers for upvote and downvote buttons