:sparkles: Adds Paginator Component

2 files changed, 56 insertions, 0 deletions

diff --git a/src/modules/dashboard/dashboard.container.js b/src/modules/dashboard/dashboard.container.js
index f792c20..b8ee027 100644
--- a/src/modules/dashboard/dashboard.container.js
+++ b/src/modules/dashboard/dashboard.container.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from "react-redux";
 import WithHeaderFooter from '../../shared/header_footer.hoc';
 import WithSidebar from '../../shared/sidebar.hoc';
+import Paginator from '../../shared/paginator.component';
 class DashBoardContainer extends Component {
 
     render() {
@@ -11,6 +12,11 @@ class DashBoardContainer extends Component {
                     <div className="col-md-12">
                         Dashboard
                     </div>
+                    <div className="col-md-12">
+                        <Paginator 
+                            totalRecords={30}
+                        />
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/shared/paginator.component.js b/src/shared/paginator.component.js
new file mode 100644
index 0000000..9512d4e
--- /dev/null
+++ b/src/shared/paginator.component.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import _ from 'lodash';
+
+const Paginator = (props) => {
+
+    let {totalRecords=0, currentPage=1, pageSize=15} = props;
+    let pages = [1];
+    let previousItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';
+    let nextItemStyle = totalRecords<pageSize ? 'page-item disabled' : 'page-item';
+
+    if(totalRecords>pageSize){
+        pages = _.times(parseInt(totalRecords/pageSize,10));
+    }
+
+    const onPrevious = ()=>{
+        props.previousPage();
+    }
+
+    const onNext = ()=>{
+        props.nextPage();
+    }
+
+    const onPageClick = (pageNum)=>{
+        props.goToNextPage(pageNum)
+    }
+
+
+    return (
+        <nav>
+            <ul className="pagination">
+                <li className={previousItemStyle}>
+                    <a className="page-link" href="javascript:void(0)" onClick={onPrevious}>Previous</a>
+                </li>
+
+                {pages.map(_page=>{
+                    return(
+                        <li key={_page} className={_page==currentPage ? "page-item active" : "page-item"}>
+                            <a className="page-link" href="javascript:void(0)" onClick={onPageClick.bind(this, _page)}>{_page}</a>
+                        </li>
+                    )
+                })}
+                <li className={nextItemStyle}>
+                    <a className="page-link" href="#" onClick={onNext}>Next</a>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Paginator;