Merge pull request #39 from benfluleck/feature/153149518/users-should…

…-be-able-to-view-book-categories Optimize logic to display Modals
benfluleck · Dec 4, 2017 · 8dcd2a1 · 8dcd2a1
2 parents b36be1c + 65f2c10
commit 8dcd2a1
Show file tree

Hide file tree

Showing 21 changed files with 217 additions and 200 deletions.
diff --git a/client/src/app/actions/actiontype.js b/client/src/app/actions/actiontype.js
@@ -9,6 +9,10 @@ export const SIGN_UP_USER_FAILURE = 'SIGN_UP_USER_FAILURE';
 
 export const SIGNUP_USER_SUCCESS = 'SIGNUP_USER_SUCCESS';
 
+export const FETCH_SELECTED_BOOK_SUCCESS = 'FETCH_SELECTED_BOOK_SUCCESS';
+
+export const FETCH_SELECTED_BOOK_FAILURE = 'FETCH_SELECTED_BOOK_FAILURE';
+
 export const FETCH_ALL_RECENT_BOOKS = 'FETCH_ALL_RECENT_BOOKS ';
 
 export const FETCH_ALL_BOOKS = 'FETCH_ALL_BOOKS ';

diff --git a/client/src/app/actions/api.js b/client/src/app/actions/api.js
@@ -34,6 +34,9 @@ export default {
       .then(res => res.data),
     fetchAllBooksByCategories: (categoryId, offset, limit) => axios
       .get(`api/v1/books/category/${categoryId}?offset=${offset}&limit=${limit}`)
-      .then(res => res.data)
+      .then(res => res.data),
+    fetchSelectedBookById: bookId => axios
+      .get(`api/v1/auth/books/${bookId}`)
+      .then(res => res.data),
   }
 };
diff --git a/client/src/app/actions/fetchbooks.js b/client/src/app/actions/fetchbooks.js
@@ -4,8 +4,9 @@ import {
   FETCH_ALL_BOOKS,
   FETCH_BOOKS_REJECTED,
   FETCH_BOOKS_BY_USER_ID,
-
-  FETCH_ALL_OVERDUE_BOOKS
+  FETCH_ALL_OVERDUE_BOOKS,
+  FETCH_SELECTED_BOOK_FAILURE,
+  FETCH_SELECTED_BOOK_SUCCESS
 } from './actiontype';
 import api from './api';
 
@@ -14,6 +15,8 @@ export const fetchRecentBooks = books => ({ type: FETCH_ALL_RECENT_BOOKS, books
 export const fetchBooks = books => ({ type: FETCH_ALL_BOOKS, books });
 export const fetchBooksByUserId = books => ({ type: FETCH_BOOKS_BY_USER_ID, books });
 export const fetchOverdueBooks = books => ({ type: FETCH_ALL_OVERDUE_BOOKS, books });
+export const fetchSelectedBook = book => ({ type: FETCH_SELECTED_BOOK_SUCCESS, book });
+export const fetchSelectedBookFailure = error => ({ type: FETCH_SELECTED_BOOK_FAILURE, error });
 
 /**
  * async helper function: log in user
@@ -90,3 +93,21 @@ export const fetchAllBooksbyId = (offset, limit) => dispatch => api
     dispatch(showErrorNotification({ error }));
     dispatch(fetchBooksRejected({ error }));
   });
+
+  /**
+ * async helper function:fetch selected book
+ * @function fetchSelectedBook
+ * @param {number} bookId
+ * @returns {function} asynchronous action
+ */
+export const fetchBook = bookId => dispatch => api
+  .book
+  .fetchSelectedBookById(bookId)
+  .then((response) => {
+    dispatch(fetchSelectedBook(response));
+  })
+  .catch((error) => {
+    dispatch(showErrorNotification({ error }));
+    dispatch(fetchSelectedBookFailure({ error }));
+  });
+
diff --git a/client/src/app/components/Root.jsx b/client/src/app/components/Root.jsx
@@ -2,36 +2,9 @@ import React from 'react';
 import Header from '../components/container/header/Header.jsx';
 
 import UploadModal from '../components/presentation/common/modal/UploadModal.jsx';
-// import BookCoverUpload from './presentation/common/modal/BookCoverUpload.jsx';
-import DisplayBookModal from './presentation/common/book/DisplayBookModal.jsx';
-
 
-// const Modal = ({image, title, author, category, description}) => (
-//   <div>
-//       <div id="modal" className="modal">
-//     <div className="modal-content">
-//       <h4>Modal Header</h4>
-//       <p>A bunch of text</p>
-//     </div>
-//     <Col m={12}l={6}>
-//       <div className="card-image" >
-//         <img className="modal-image" id="bookImage" alt={title} />
-//       </div>
-//     </Col>
-//     <Col m={12} l={6}>
-//       <div className="book-modal modal-title">Title: <span id="title" /></div>
-//       <hr />
-//       <div className="book-modal">Author: {author}</div>
-//       <div className="book-modal">Category: {category}</div>
-//       <div className="book-modal">Description: {description}</div>
-//     </Col>
-//     <div className="modal-footer">
-//     <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
-//     </div>
-//   </div>
-//   </div>
+import DisplayBookModal from './presentation/common/book/DisplayBookModal.jsx';
 
-// );
 
 /* eslint-disable */
 const Root = props => (

diff --git a/client/src/app/components/container/booklist/DisplayAllBooks.jsx b/client/src/app/components/container/booklist/DisplayAllBooks.jsx
@@ -26,12 +26,14 @@ class DisplayAllBooks extends React.Component {
    * @memberof DisplayAllBooks
    * @returns {component} Loader
    */
-  componentWillMount() {
+  componentDidMount() {
+    $('body').css('background-color', '#ffff');
     return (<Loader
       records={this.props.allBooksList}
       callback={this.props.fetchAllBooks(this.props.offset, this.props.limit)}
     />);
   }
+
   /**
    * render Display All Books page component
    * @method render
@@ -43,12 +45,7 @@ class DisplayAllBooks extends React.Component {
       this.props.allBooksList.books.map(book => (
         <Book
           key={book.id}
-          id={book.id}
-          title={book.title}
-          author={book.author}
-          description={book.description}
-          image={book.bookImage}
-          quantity={book.quantity}
+          books={book}
         />
       ));
     const { pagination } = this.props.allBooksList;
@@ -81,6 +78,7 @@ class DisplayAllBooks extends React.Component {
         <PaginationWrapper
           config={config}
           fetch={this.props.fetchAllBooks}
+          numberOfRecords={this.props.limit}
         />
       </div>
     );

diff --git a/client/src/app/components/container/booklist/DisplayBorrowedBooks.jsx b/client/src/app/components/container/booklist/DisplayBorrowedBooks.jsx
@@ -39,13 +39,8 @@ class DisplayAllBorrowedBooks extends React.Component {
     }
     const getAllBooks = this.props.borrowedBooks.books.map(book => (
       <Book
-        id={book.book.id}
         key={book.book.id}
-        title={book.book.title}
-        author={book.book.author}
-        description={book.book.description}
-        quantity={book.book.quantity}
-        image={book.book.bookImage}
+        books={book.book}
       />
     ));
     const { pagination } = this.props.borrowedBooks;
@@ -67,6 +62,7 @@ class DisplayAllBorrowedBooks extends React.Component {
         <PaginationWrapper
           config={config}
           fetch={this.props.fetchAllBooksbyId}
+          numberOfRecords={this.props.limit}
         />
       </div>);
   }

diff --git a/client/src/app/components/container/booklist/DisplayOverdueBooks.jsx b/client/src/app/components/container/booklist/DisplayOverdueBooks.jsx
@@ -38,14 +38,8 @@ class DisplayOverdueBooks extends React.Component {
     }
     const getAllBooks = this.props.overdueBooks.books.map(book => (
       <Book
-        id={book.book.id}
         key={book.book.id}
-        title={book.book.title}
-        author={book.book.author}
-        category={book.book.category}
-        description={book.book.description}
-        quantity={book.book.quantity}
-        image={book.book.bookimage}
+        books={book.book}
       />
     ));
     const { pagination } = this.props.overdueBooks;

diff --git a/client/src/app/components/container/booklist/DisplayRecentBooks.jsx b/client/src/app/components/container/booklist/DisplayRecentBooks.jsx
@@ -22,6 +22,7 @@ class DisplayRecentBooks extends React.Component {
    * @returns {void}
    */
   componentDidMount() {
+    $('body').css('background-color', 'rgb(204, 204, 204)');
     return (<Loader
       records={this.props.books}
       callback={this.props.fetchAllRecentBooks(this.props.offset, this.props.limit)}
@@ -40,13 +41,9 @@ class DisplayRecentBooks extends React.Component {
         .props
         .recentBooks
         .map(book => (<Book
+          onClick={this.handleClick}
           key={book.id}
-          id={book.id}
-          title={book.title}
-          author={book.author}
-          description={book.description}
-          quantity={book.quantity}
-          image={book.bookImage}
+          books={book}
         />)) : [];
 
     return (

diff --git a/client/src/app/components/container/booklist/Loader.jsx b/client/src/app/components/container/booklist/Loader.jsx
@@ -9,8 +9,8 @@ const Loader = ({ records, callback }) => {
 
 
 Loader.propTypes = {
-  records: PropTypes.number.isRequired,
-  callback: PropTypes.func.isRequired
+  // records: PropTypes.number.isRequired,
+  // callback: PropTypes.func.isRequired
 };
 
 export default (Loader);
diff --git a/client/src/app/components/container/common/Pagination.jsx b/client/src/app/components/container/common/Pagination.jsx
@@ -15,8 +15,8 @@ class PaginationWrapper extends React.Component {
   * @memberOf PaginationWrapper
   * @returns {function} Function fetch
   */
-  onSelect(number) {
-    let numberOfRecords;
+  onSelect = (number) => {
+    const {numberOfRecords} = this.props;
     this
       .props
       .fetch(this.pageLimit(number, numberOfRecords), numberOfRecords);
@@ -29,9 +29,9 @@ class PaginationWrapper extends React.Component {
    *
    * @memberOf PaginationWrapper
    */
-  pageLimit(pagenumber, numberOfRecords) {
+  pageLimit = (pagenumber, numberOfRecords)=> {
     let pageOffset;
-    this.pageOffset = (pagenumber === 1)
+    pageOffset = (pagenumber === 1)
       ? 0
       : pagenumber - 1;
     return pageOffset * numberOfRecords;

diff --git a/client/src/app/components/container/loanhistory/LoanHistory.jsx b/client/src/app/components/container/loanhistory/LoanHistory.jsx
@@ -12,21 +12,6 @@ import LoanHistoryTable from '../../presentation/loanhistory/LoanHistoryTable.js
  * @extends {React.Component}
  */
 class LoanHistory extends React.Component {
-  /**
-   * Creates an instance of DisplayAllBorrowedBooks.
-   * @param {any} props
-   * @param {object} offset
-   * @param {object} limit
-   * @memberOf DisplayAllBorrowedBooks
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      limit: 5,
-      offset: 0,
-    };
-  }
-
   /**
    * @description dispatch actions that help populate the dashboard with loan history
    * fetch books for the dashboard
@@ -35,9 +20,8 @@ class LoanHistory extends React.Component {
    * @returns {void}
    */
   componentDidMount() {
-    $('body').css('background-color', '#ffff');
     this.props
-      .loanhistory(this.state.offset, this.state.limit);
+      .loanhistory(this.props.offset, this.props.limit);
   }
   /**
    * render Loan History component
@@ -60,6 +44,7 @@ class LoanHistory extends React.Component {
         <PaginationWrapper
           config={config}
           fetch={this.props.loanhistory}
+          numberOfRecords={this.props.limit}
         />
       </div>
     );
@@ -72,9 +57,6 @@ LoanHistory.propTypes = {
     map: PropTypes.object,
     pagination: PropTypes.object,
     books: PropTypes.arrayOf(PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      author: PropTypes.string.isRequired,
-      quantity: PropTypes.number.isRequired,
       description: PropTypes.string,
     }))
   }),
@@ -84,7 +66,14 @@ LoanHistory.propTypes = {
 
 
 LoanHistory.defaultProps = {
-  bookOperations: null
+  bookOperations: null,
+  limit: 5,
+  offset: 0
+};
+
+LoanHistory.propTypes = {
+  limit: PropTypes.number,
+  offset: PropTypes.number
 };
 
 const mapStateToProps = state => ({

diff --git a/client/src/app/components/presentation/common/book/BookModal.jsx b/client/src/app/components/presentation/common/book/BookModal.jsx
@@ -19,22 +19,22 @@ class BookModal extends React.Component {
    * @memberOf BookModal
    */
   render() {
-    const { header, actions } = this.props;
+    const { header, actions, books } = this.props;
     return (
       <Modal id="modal" fixedFooter header={header} actions={actions} >
         <Row>
           <div className="loan-book">
             <Col m={12}l={6}>
               <div className="card-image" >
-                <img className="modal-image" id="bookImage" alt="Title" />
+                <img className="modal-image" src={this.props.books.bookImage} alt="Title" />
               </div>
             </Col>
             <Col m={12} l={6}>
-              <div className="book-modal modal-title">Book Number: #<span id="bookId" /></div>
-              <div className="book-modal modal-title">Title: <span id="bookTitle" /></div>
+              <div className="book-modal modal-title">Book Number: # {this.props.books.id}<span id="bookId" /></div>
+              <div className="book-modal modal-title">Title: {this.props.books.title} </div>
               <hr />
-              <div className="book-modal">Author: <span id="bookAuthor" /></div>
-              <div className="book-modal">Description: <span id="bookDescription" /></div>
+              <div className="book-modal">Author: {this.props.books.author}</div>
+              <div className="book-modal">Description: {this.props.books.description}<span id="bookDescription" /></div>
             </Col>
           </div>
           {this.props.children}
@@ -45,3 +45,4 @@ class BookModal extends React.Component {
 }
 
 export default BookModal;
+