chore (Implement changes to API docs):

- Correct routes inputted into API docs
- Loan History component constructed

[Finishes #152996650]

apiDocs/index.html

@@ -512,7 +512,7 @@ <h2 id='loan-a-book'>Loan a Book</h2>
 <span class="p">}</span>
 </code></pre><h3 id='request-6'>Request</h3>
 <ul>
-<li>Endpoint: POST: <code>/users/:userId/books</code></li>
+<li>Endpoint: POST: <code>/users/loanbook</code></li>
 <li>Requires: Authorization</li>
 </ul>
 <h3 id='response-6'>Response</h3>
@@ -557,7 +557,7 @@ <h2 id='get-list-of-borrowed-books'>Get list of borrowed books</h2>
 <span class="p">}</span>
 </code></pre><h3 id='request-7'>Request</h3>
 <ul>
-<li>Endpoint: GET: <code>/api/v1/users/:userid/books?returned=false</code></li>
+<li>Endpoint: GET: <code>/api/v1/users/borrowedbooks?returned=false</code></li>
 <li>Requires: Authorization</li>
 </ul>
 <h3 id='response-7'>Response</h3>
@@ -610,7 +610,7 @@ <h2 id='return-book-from-loan'>Return book from loan</h2>
 <span class="p">}</span>
 </code></pre><h3 id='request-8'>Request</h3>
 <ul>
-<li>Endpoint: PUT: <code>/users/:userId/books</code></li>
+<li>Endpoint: PUT: <code>/users/returnbook</code></li>
 <li>Requires: Authorization</li>
 </ul>
 <h3 id='response-8'>Response</h3>

client/src/app/components/presentation/common/SideNav/index.jsx

@@ -30,7 +30,7 @@ const SideNav = ({
       />
 
       <li><div className="divider" /></li>
-      <li><a className="waves-effect" href="www.andela.com">Third Link With Waves</a></li>
+      <li><a className="waves-effect" href="www.andela.com">Categories</a></li>
     </ul>
   );
 

client/src/app/components/presentation/loanhistory/LoanHistoryTable.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+
+/**
+ * Table of Loan history
+ * @param {Object} props props object containing books
+ * @returns {JSX} JSX representation of Books table
+ */
+const BorrowHistoryTable = (props) => {
+  const rows = props.books && props.books.length ? props.books.map((book) => {
+    const returned = book.BorrowedBook.returned;
+    return (
+      <tr key={book.book.id}>
+        <td>{book.book.title || 'N/A'}</td>
+        <td>{book.book.author || 'N/A'}</td>
+        <td>{moment(book.book.createdAt).format('LLLL') || 'N/A'}</td>
+        <td>{moment(book.book.returndate).format('LLLL') || 'N/A'}</td>
+        <td>{moment(book.book.userReturndate).format('LLLL') || 'N/A'}</td>
+        <td>{book.book.returnstatus ? 'Returned' : 'Unreturned'}</td>
+      </tr>
+    );
+  }) : null;
+  return (rows ?
+    <div className="row">
+      <div className="center" style={{ width: '95%', margin: 'auto' }}>
+        <table className="centered bordered history-table">
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Authors</th>
+              <th>Date Borrowed</th>
+              <th>Date To Be Returned</th>
+              <th>User Return Date</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+      </div>
+    </div> :
+    <div className="row">
+      <div className="container">
+        <h3 className="center bold-text" style={{ color: '#aaa' }}>
+          You have no borrowing history. Head over to the library to get started
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+BorrowHistoryTable.propTypes = {
+  books: PropTypes.array.isRequired,
+};
+
+
+export default BorrowHistoryTable;

client/src/app/css/style.scss

@@ -179,6 +179,7 @@ form p {
  */
 .footer-copyright {
 	background-color: $base-orange !important;
+	min-height:60px !important;
 }
 footer {
 	height: 3rem;
@@ -271,7 +272,7 @@ footer {
 	position: relative;
 	display: inline-block;
 	color: #543a27 !important;
-	max-width: 40%;
+	max-width: 35%;
 	background-color: #ffdec7 !important;
 }
 

server/src/controllers/userbooks.js

@@ -91,6 +91,7 @@ export default {
       });
   },
 
+
   /**
    * Route: GET: /users/getborrowedBooklist
    * @description Get list of borrowed books