feature(book detail): reimplement book detail logic

client/actions/viewBook.js

@@ -5,7 +5,7 @@ import API from './api';
 
 /**
  * @param {Object} book - book
- * @returns {Object} - Object containing action type and user
+ * @returns {Object} - Object containing action type and book
  */
 export const getBook = book => ({
   type: actionTypes.GET_BOOK,
@@ -14,13 +14,25 @@ export const getBook = book => ({
 
 
 /**
- * het book Detail
+ * @param {Integer} id - book id
+ * @returns {Object} - Object containing action type and book id
+ */
+export const setBookId = id => ({
+  type: actionTypes.SET_BOOK_ID,
+  id,
+});
+
+
+/**
+ * get book Detail
  * @param  {Integer} id book Id
  * @return {any}    dispatches an action to the redux store
  */
 export const viewBookDetails = id => dispatch => (
   axios.get(`${API}/books/${id}`)
     .then((response) => {
       dispatch(getBook(response.data.data));
+    }, (error) => {
+      Materialize.toast(error.response.data.message, 2500, 'red darken-4');
     })
 );

client/components/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
 
 import Home from './Home';
+import History from './history/History';
 import notFound from './404';
 import Admin from './admin/Admin';
 import Login from './auth/Login';
@@ -11,6 +12,9 @@ import Library from './library/Library';
 import BookDetail from './library/BookDetail';
 import Dashboard from './dashboard/Dashboard';
 import Logout from './auth/Logout';
+import ForgotPassword from './forgotPassword';
+
+import UpdateProfile from './dashboard/UpdateProfile';
 
 import mock from './mock';
 
@@ -35,14 +39,17 @@ class App extends Component {
           <Switch>
             <Route path='/' exact component={Home} />
             <Route path='/dashboard' component={Dashboard} />
+            <Route path='/update-profile'component={UpdateProfile} />
             <Route path='/login' component={Login} />
             <Route path='/logout' component={Logout} />
             <Route path='/signup' component={SignUp} />
-            <Route path='/library/book' component={BookDetail} />
+            <Route path='/library/book/:id' component={BookDetail} />
             <Route path='/library' exact component={Library} />
+            <Route path='/history' component={History} />
             <Route path='/admin/edit' component={Admin} />
             <Route path='/admin/add' component={Admin} />
             <Route path='/admin' component={Admin} />
+            <Route path='/forgot-password' component={ForgotPassword} />
             <Route component={notFound} />
           </Switch>
         </div>

client/components/library/BookDetail.js

@@ -6,6 +6,7 @@ import { Redirect } from 'react-router-dom';
 
 import Header from '../header/Header';
 import { borrowBook, deleteBook } from '../../actions/library';
+import { viewBookDetails } from '../../actions/viewBook';
 
 
 /*
@@ -19,6 +20,11 @@ class BookDetail extends React.Component {
     this.handleEditClick = this.handleEditClick.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
   }
+  componentDidMount() {
+    this.props.viewBookDetails(this.props.match.params.id)
+      .catch(err => Materialize.toast())
+  }
+
   handleBorrow() {
     this.props.borrowBook(this.props.userId, this.props.book.id)
   }
@@ -81,19 +87,23 @@ class BookDetail extends React.Component {
             <div className="col s12 m4 book-info">
               <div className="card">
                 <div className="card-image">
-                  <img src={this.props.book.cover || 'https://segunolalive.github.io/helloBooks/templates/images/eloquentjs_cover.png'} />
+                  <img src={
+                    this.props.book && this.props.book.cover ||
+                    'https://segunolalive.github.io/helloBooks/templates/images/eloquentjs_cover.png'
+                    }
+                  />
                 </div>
                 {actionButtons}
               </div>
             </div>
             <div className="col s12 m6 offset-m1">
               <div className="center">
-                <h4>{this.props.book.title || ''}</h4>
-                <h6>{this.props.book.shortDescription || ''}</h6>
+                <h4>{this.props.book && this.props.book.title || ''}</h4>
+                <h6>{this.props.book && this.props.book.shortDescription || ''}</h6>
               </div>
               <div className="">
                 <p>
-                  {this.props.book.description || ''}
+                  {this.props.book && this.props.book.description || ''}
                 </p>
               </div>
             </div>
@@ -114,8 +124,13 @@ const mapStateToProps = ({ authReducer, bookReducer }) => ({
   userId: authReducer.user && authReducer.user.id,
   isAdmin: authReducer.user && authReducer.user.isAdmin,
   book: bookReducer.currentBook,
+  currentId: bookReducer.currentId,
 });
 
-// const mapDispatchToProps = dispatch => bindActionCreators({ borrowBook }, dispatch);
 
-export default connect(mapStateToProps, { borrowBook, deleteBook })(BookDetail);
+export default connect(
+  mapStateToProps, {
+  borrowBook,
+  deleteBook,
+  viewBookDetails,
+})(BookDetail);

client/components/library/BookRow.js

@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 const BookRow = props => (
   <tr>
     <td>{props.cover || 'N/A'}</td>
-    <td onClick={() => props.onTitleClick(props.id)}>
-      <Link to='/library/book'>
+    <td>
+      <Link to={`/library/book/${props.id}`}>
         {props.title}
       </Link>
     </td>
@@ -33,7 +33,6 @@ BookRow.propTypes = {
   cover: PropTypes.string,
   title: PropTypes.string,
   total: PropTypes.number,
-  onTitleClick: PropTypes.func,
   onButtonClick: PropTypes.func,
 };
 

client/components/library/BooksTable.js

@@ -9,14 +9,13 @@ import BookRow from './BookRow';
 
  */
 const BooksTable = (
-  { bookList, tableHeaders, borrowBook, viewBookDetails }
+  { bookList, tableHeaders, borrowBook }
 ) => {
   const books = bookList ? bookList.map(book =>
     (
       <BookRow
         key={book.id}
         {...book}
-        onTitleClick={viewBookDetails}
         onButtonClick={borrowBook}
       />
     )
@@ -43,7 +42,6 @@ const BooksTable = (
 
 BooksTable.propTypes = {
   borrowBook: PropTypes.func,
-  viewBookDetails: PropTypes.func,
   bookList: PropTypes.array,
   tableHeaders: PropTypes.array.isRequired,
 };

client/components/library/Library.js

@@ -14,7 +14,7 @@ import {
   getBookCategories,
   filterBooksByCategory
 } from '../../actions/library';
-import { viewBookDetails } from '../../actions/viewBook';
+
 
 /*
   eslint-disable
@@ -23,7 +23,6 @@ class Library extends Component {
   constructor (props) {
     super(props);
     this.handleBorrowBook = this.handleBorrowBook.bind(this);
-    this.handleViewBookDetail = this.handleViewBookDetail.bind(this);
     this.handleSelectCategory = this.handleSelectCategory.bind(this);
   }
 
@@ -36,10 +35,6 @@ class Library extends Component {
     this.props.borrowBook(this.props.userId, bookId);
   }
 
-  handleViewBookDetail (bookId) {
-    this.props.viewBookDetails(bookId);
-  }
-
   handleSelectCategory (event) {
     let category = event.target.value;
     this.props.filterBooksByCategory(category);
@@ -70,7 +65,6 @@ class Library extends Component {
                 className="col s12 m8 offset-m2 l6"
               />
               <BooksTable
-                viewBookDetails={this.handleViewBookDetail}
                 borrowBook={this.handleBorrowBook}
                 bookList={this.props.books}
                 tableHeaders={[
@@ -106,7 +100,6 @@ export default connect(
   {
     borrowBook,
     fetchBooks,
-    viewBookDetails,
     getBookCategories,
     filterBooksByCategory,
   }