From 4a78534870ee375b675b1ad9d167a135971c9dd8 Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Mon, 1 Jun 2020 21:54:02 -0400 Subject: [PATCH] Pagination funcionando bien --- src/components/Paginate.jsx | 101 ++++++++++++++++++------------------ src/components/Search.jsx | 3 +- src/index.jsx | 2 +- src/styles/main.css | 29 +++++++++-- 4 files changed, 80 insertions(+), 55 deletions(-) diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx index c3b4460..ec66265 100644 --- a/src/components/Paginate.jsx +++ b/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() { - //this.gotoPage(1); - } - - gotoPage = page => { + 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 => { - evt.preventDefault(); - this.gotoPage(this.state.currentPage + (this.pageNeighbours * 2) + 1); - } - - makePageLink = page => { + 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 ( - + ); diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 754c4e0..51d8870 100644 --- a/src/components/Search.jsx +++ b/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 {

Busqueda

- + ); diff --git a/src/index.jsx b/src/index.jsx index 132d5a2..f3b8dab 100644 --- a/src/index.jsx +++ b/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 = () => ( diff --git a/src/styles/main.css b/src/styles/main.css index 2768bc9..51492eb 100644 --- a/src/styles/main.css +++ b/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; } + +