feat(paginator): navigation by clicking on page number

abedzantout · Sep 18, 2019 · f0ad656 · f0ad656
1 parent 29b3c61
commit f0ad656
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -61,7 +61,7 @@ const IndexPage: NextPage = (props: Props) => {
                     </div>
                 </div>
                 <div className="pagination">
-                    <Paginator handlePaginationChange={(event) => updateSkip(event)} range={range}/>
+                    <Paginator handlePaginationChange={(event) => updateSkip(event)} range={range} skip={2}/>
                 </div>
             </div>
         </Layout>

diff --git a/shared/components/paginator/index.tsx b/shared/components/paginator/index.tsx
@@ -1,6 +1,5 @@
 import React, {FunctionComponent, Fragment, useState, useEffect} from 'react';
 import './styles.css';
-import {render} from "react-dom";
 
 type Props = {
     skip?: number;
@@ -12,6 +11,10 @@ const Paginator: FunctionComponent<Props> = ({skip, range, handlePaginationChang
 
     const [page, setPageNumber] = useState(1);
 
+    // useEffect(() => {
+    //     return setPageNumber(skip);
+    // }, [skip]);
+
     const moveToNextPage = () => {
         if (page > 1) {
             handlePaginationChange(page - 1);
@@ -30,6 +33,11 @@ const Paginator: FunctionComponent<Props> = ({skip, range, handlePaginationChang
         return null;
     };
 
+    const moveToPage = (pageNumber: number) => {
+        handlePaginationChange(pageNumber);
+        return setPageNumber(pageNumber);
+    };
+
     return (
         <Fragment>
             <div className="paginator">
@@ -41,7 +49,7 @@ const Paginator: FunctionComponent<Props> = ({skip, range, handlePaginationChang
                 {range.map((num, index) => {
                     return (<span
                         className={`paginator__page-number ${num === page ? 'paginator__page-number--selected' : ''}`}
-                        key={index} onClick={() => setPageNumber(num)}>{num}</span>)
+                        key={index} onClick={() => moveToPage(num)}>{num}</span>)
                 })}
 
                 {range.length > 1 ?

diff --git a/shared/components/paginator/styles.css b/shared/components/paginator/styles.css
@@ -12,7 +12,7 @@
 
     cursor: pointer;
 
-    transition: all .3s;
+    /*transition: all .2s;*/
 }
 
 .paginator__page-number:hover {
@@ -24,7 +24,7 @@
     border: 1px solid #00AFDA;
     background-color: rgba(39, 173, 213, .2);
 
-    transition: all .3s;
+    /*transition: all .2s;*/
 }
 
 .paginator__button {