Improve table nav buttons clicking and listing

client/components/Table/TableNav.js

@@ -16,16 +16,16 @@ const Nav = styled.button`
   box-shadow: 0 0px 10px rgba(100, 100, 100, 0.1);
   transition: all 0.2s ease-out;
 
-  ${({ active }) =>
-    active &&
+  ${({ disabled }) =>
+    !disabled &&
     css`
       background-color: white;
       cursor: pointer;
     `};
 
   :hover {
-    ${({ active }) =>
-      active &&
+    ${({ disabled }) =>
+      !disabled &&
       css`
         transform: translateY(-2px);
         box-shadow: 0 5px 25px rgba(50, 50, 50, 0.1);
@@ -49,10 +49,10 @@ const Icon = styled.img`
 
 const TableNav = ({ handleNav, next, prev }) => (
   <Wrapper>
-    <Nav active={prev} data-active={prev} data-type="prev" onClick={handleNav}>
+    <Nav disabled={!prev} onClick={handleNav(-1)}>
       <Icon src="/images/nav-left.svg" />
     </Nav>
-    <Nav active={next} data-active={next} data-type="next" onClick={handleNav}>
+    <Nav disabled={!next} onClick={handleNav(1)}>
       <Icon src="/images/nav-right.svg" />
     </Nav>
   </Wrapper>

client/components/Table/TableOptions.js

@@ -124,11 +124,13 @@ class TableOptions extends Component {
     this.props.getUrlsList({ count });
   }
 
-  handleNav(e) {
-    const { active, type } = e.target.dataset;
-    if (active === 'false') return null;
-    const number = type === 'next' ? 1 : -1;
-    return this.props.getUrlsList({ page: this.props.url.page + number });
+  handleNav(num) {
+    return (e) => {
+      const { active } = e.target.dataset;
+      if (active === 'false') return null;
+      console.log({ page: this.props.url.page, num });
+      return this.props.getUrlsList({ page: this.props.url.page + num });
+    }
   }
 
   render() {