Pagination funcionando bien

src/components/Paginate.jsx

@@ -22,41 +22,48 @@ const range = (from, to, step = 1) => {
 export class Paginate extends Component {
     constructor(props) {
         super(props);
-        const {totalRecords = null, pageLimit = 30, pageNeighbours = 0} = props;
+        const {totalRecords = 0, pageLimit = 30, pageNeighbours = 0, currentPage = 1} = props;
 
         this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 30;
         this.totalRecords = typeof totalRecords === 'number' ? totalRecords : 0;
         this.pageNeighbours = typeof pageNeighbours === 'number' ? Math.max(0, Math.min(pageNeighbours, 2)) : 0;
         this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
-        this.state = {currentPage: 1};
+        this.currentPage = typeof currentPage === 'number' ? currentPage : 1
+
+        this.state = {currentPage: this.currentPage};
+
+        this.gotoPage = this.gotoPage.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+        this.handleMoveLeft = this.handleMoveLeft.bind(this);
+        this.handleMoveRight = this.handleMoveRight.bind(this);
+        this.makePageLink = this.makePageLink.bind(this);
+        this.fetchPageNumbers = this.fetchPageNumbers.bind(this);
     }
 
-    componentDidMount() {
+    gotoPage(page) {
-        //this.gotoPage(1);
-    }
-
-    gotoPage = page => {
         const {onPageChanged = f => f} = this.props;
         const currentPage = Math.max(0, Math.min(page, this.totalPages));
-        this.setState({currentPage}, () => onPageChanged(this.makePageLink(currentPage)));
+        this.setState({currentPage: currentPage}, () => onPageChanged(this.makePageLink(currentPage)));
     }
 
-    handleClick = page => evt => {
+    handleClick(page) {
+        return (evt) => {
+            evt.preventDefault();
+            this.gotoPage(page);
+        }
+    }
+
+    handleMoveLeft(evt) {
         evt.preventDefault();
-        this.gotoPage(page);
+        this.gotoPage(this.state.currentPage - 1);
     }
 
-    handleMoveLeft = evt => {
+    handleMoveRight(evt) {
         evt.preventDefault();
-        this.gotoPage(this.state.currentPage - (this.pageNeighbours * 2) - 1);
+        this.gotoPage(this.state.currentPage + 1);
     }
 
-    handleMoveRight = evt => {
+    makePageLink(page) {
-        evt.preventDefault();
-        this.gotoPage(this.state.currentPage + (this.pageNeighbours * 2) + 1);
-    }
-
-    makePageLink = page => {
         const {makeLink = f => f} = this.props;
         return makeLink(page);
     }
@@ -72,7 +79,7 @@ export class Paginate extends Component {
      * [x] => represents current page
      * {...x} => represents page neighbours
      */
-    fetchPageNumbers = () => {
+    fetchPageNumbers() {
         const totalPages = this.totalPages;
         const currentPage = this.state.currentPage;
         const pageNeighbours = this.pageNeighbours;
@@ -134,41 +141,35 @@ export class Paginate extends Component {
     render() {
         if (!this.totalRecords || this.totalPages === 1) return null;
 
-        const {currentPage} = this.state;
+        const currentPage = this.state.currentPage;
         const pages = this.fetchPageNumbers();
 
         return (
             <Fragment>
-                <nav aria-label="Countries Pagination">
+                <ul className="pagination">
-                    <ul className="pagination">
+                    {pages.map((page, index) => {
-                        {pages.map((page, index) => {
+                        if (page === LEFT_PAGE) return (
-                            if (page === LEFT_PAGE) return (
+                            <li key={index} className="page-item">
-                                <li key={index} className="page-item">
+                                <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
-                                    <a className="page-link" href={this.makePageLink(index)} aria-label="Previous"
+                                    <span>&laquo;</span>
-                                       onClick={this.handleMoveLeft}>
+                                </a>
-                                        <span aria-hidden="true">&laquo;</span>
+                            </li>
-                                        <span className="sr-only">Previous</span>
+                        );
-                                    </a>
+                        if (page === RIGHT_PAGE) return (
-                                </li>
+                            <li key={index} className="page-item">
-                            );
+                                <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
-                            if (page === RIGHT_PAGE) return (
+                                    <span>&raquo;</span>
-                                <li key={index} className="page-item">
+                                </a>
-                                    <a className="page-link" href={this.makePageLink(index)} aria-label="Next"
+                            </li>
-                                       onClick={this.handleMoveRight}>
+                        );
-                                        <span aria-hidden="true">&raquo;</span>
+                        return (
-                                        <span className="sr-only">Next</span>
+                            <li key={index} className={`page-item ${currentPage === page ? 'active' : ''}`}>
-                                    </a>
+                                <a className="page-link" href={this.makePageLink(index)}
-                                </li>
+                                   onClick={this.handleClick(page)}>{page}</a>
-                            );
+                            </li>
-                            return (
+                        );
-                                <li key={index} className={`page-item${currentPage === page ? ' active' : ''}`}>
+                    })}
-                                    <a className="page-link" href={this.makePageLink(index)}
+                </ul>
-                                       onClick={this.handleClick(page)}>{page}</a>
-                                </li>
-                            );
-                        })}
-                    </ul>
-                </nav>
             </Fragment>
         );
 

src/components/Search.jsx

@@ -70,6 +70,7 @@ export class Search extends React.Component {
     render() {
         if (this.state.artists) {
             const total = this.state.artists.paginate.total;
+            const currentPage = this.state.artists.paginate.current_page;
             const pageLimit = this.state.artists.paginate.per_page;
 
             return (
@@ -77,7 +78,7 @@ export class Search extends React.Component {
                     <h1>Busqueda</h1>
                     <SearchBar query={this.getParams().query}/>
                     <SearchList artists={this.state.artists.artists}/>
-                    <Paginate totalRecords={total} pageLimit={pageLimit} pageNeighbours={1} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+                    <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={1} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
                     <ReactJson src={this.state.artists} enableClipboard={false} displayDataTypes={false}/>
                 </main>
             );

src/index.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Main, NoRoute} from "./app";
 import {Search} from './components/Search';
+import {Router} from "@reach/router";
 
 import './styles/reset.css';
 import './styles/main.css';
-import {Router} from "@reach/router";
 
 const App = () => (
     <Router>

src/styles/main.css

@@ -1,6 +1,7 @@
 :root {
     --gray: hsl(0, 0%, 85%);
 }
+
 body {
     max-width: 75em;
     margin: 0 auto;
@@ -17,7 +18,7 @@ button {
     border: 1px var(--gray) solid;
 }
 
-.nav{
+.nav {
     display: flex;
     min-height: 3.25em;
     position: relative;
@@ -26,13 +27,33 @@ button {
 }
 
 .nav-links {
-   display: flex;
+    display: flex;
 }
 
 .nav-links .link {
     margin-left: 1em;
 }
 
+ul.pagination {
+    display: flex;
+    margin: 1em auto;
+    justify-content: center;
+}
+
+.page-item {
+    border: 1px solid var(--gray);
+}
+
+.page-link {
+    color: black;
+    text-decoration: none;
+    padding: 0 1em;
+}
+
+.page-item.active a{
+    color: blue;
+}
+
 .full-width {
     width: 100%;
 }
@@ -46,7 +67,9 @@ button {
 }
 
 .input-with-icon button {
-   border-left: none;
+    border-left: none;
     background: white;
 }
 
+
+