Add component BsPagination

gocreating · Oct 21, 2016 · 8991b44 · 8991b44
1 parent 4551146
commit 8991b44
Showing 1 changed file with 32 additions and 46 deletions.
diff --git a/src/common/components/utils/BsPagination.js b/src/common/components/utils/BsPagination.js
@@ -1,13 +1,17 @@
 import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
+import { connect } from 'react-redux';
 import cx from 'classnames';
+import { setCrrentPage } from '../../actions/pageActions';
 import Text from '../widgets/Text';
 
 let style = {
+  cursor: 'pointer',
   margin: 2,
 };
 
-let Pagination = ({ base, page, simple, ...rest }) => {
+let Pagination = ({ simple, resourceName, pages, dispatch, ...rest }) => {
+  let page = pages[resourceName] || pages.default;
+
   return (
     <nav {...rest}>
       <ul className="pager">
@@ -16,63 +20,55 @@ let Pagination = ({ base, page, simple, ...rest }) => {
             className={cx({'disabled': page.current === page.first})}
             style={style}
           >
-            <Link to={{
-              pathname: base,
-              query: {
-                page: page.first,
-              },
-            }}>
+            <a
+              onClick={() =>
+                dispatch(setCrrentPage(resourceName, page.first))
+              }
+            >
               <i className="fa fa-angle-double-left" aria-hidden="true" />
               {' '}<Text id="page.first" />
-            </Link>
+            </a>
           </li>
         )}
         <li
           className={cx({'disabled': page.current === page.first})}
           style={style}
         >
-          <Link
-            to={{
-              pathname: base,
-              query: {
-                page: page.current - 1,
-              },
-            }}
+          <a
+            onClick={() =>
+              dispatch(setCrrentPage(resourceName, page.current - 1))
+            }
           >
             <i className="fa fa-chevron-left" aria-hidden="true" />
             {' '}<Text id="page.prev" />
-          </Link>
+          </a>
         </li>
         <li
           className={cx({'disabled': page.current === page.last})}
           style={style}
         >
-          <Link
-            to={{
-              pathname: base,
-              query: {
-                page: page.current + 1,
-              },
-            }}
+          <a
+            onClick={() =>
+              dispatch(setCrrentPage(resourceName, page.current + 1))
+            }
           >
             <Text id="page.next" />{' '}
             <i className="fa fa-chevron-right" aria-hidden="true" />
-          </Link>
+          </a>
         </li>
         {!simple && (
           <li
             className={cx({'disabled': page.current === page.last})}
             style={style}
           >
-            <Link to={{
-              pathname: base,
-              query: {
-                page: page.last,
-              },
-            }}>
+            <a
+              onClick={() =>
+                dispatch(setCrrentPage(resourceName, page.last))
+              }
+            >
               <Text id="page.last" />{' '}
               <i className="fa fa-angle-double-right" aria-hidden="true" />
-            </Link>
+            </a>
           </li>
         )}
       </ul>
@@ -81,20 +77,10 @@ let Pagination = ({ base, page, simple, ...rest }) => {
 };
 
 Pagination.propTypes = {
-  base: PropTypes.string,
-  page: PropTypes.object,
+  resourceName: PropTypes.string.isRequired,
   simple: PropTypes.bool,
 };
 
-Pagination.defaultProps = {
-  page: {
-    skip: 0,
-    limit: 0,
-    first: 0,
-    current: 0,
-    last: 0,
-    total: 0,
-  },
-};
-
-export default Pagination;
+export default connect(state => ({
+  pages: state.pages,
+}))(Pagination);