From 46dfb9d38c124498aa181e06cf1f7e70b8595d33 Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Sat, 6 Jun 2020 07:34:21 -0400 Subject: [PATCH] Pagination con props y scroll to the top --- public/index.html | 4 ++++ src/components/Artist.jsx | 30 ++++++++++++++++++++++++------ 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/public/index.html b/public/index.html index 0a14800..c58e327 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,10 @@ + React App diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx index 2dc9265..2983ea4 100644 --- a/src/components/Artist.jsx +++ b/src/components/Artist.jsx @@ -2,6 +2,10 @@ import React, {useEffect, useState} from 'react' import {getArtist, getArtistDiscs} from "../services/entity_service"; import {CoverWithCaption} from './CoverArt'; import {Paginate} from "./Paginate"; +import queryString from "query-string"; + +import {useLocation} from 'react-router-dom'; + export const Discs = (props) => { const discs = props.discs ? props.discs : null; @@ -38,7 +42,7 @@ export const Discs = (props) => { const currentPage = paginate.current_page; const pageLimit = paginate.per_page; - paginateContent = ('#')}/> + paginateContent = } return ( @@ -75,37 +79,51 @@ export const Artist = (props) => { } export const ArtistView = (props) => { + const {pathname} = useLocation(); + + const parsedParams = queryString.parse(props.location.search); + const [artist, setArtist] = useState(null); const [discs, setDiscs] = useState(null); const [discsPaginate, setDiscsPaginate] = useState(null); + const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1) const mbid = props.match.params.mbid; useEffect(() => { if (mbid) { getArtist(mbid).then((result) => setArtist(result)); - getArtistDiscs(mbid, 1, 16).then((result) => { + getArtistDiscs(mbid, page, 16).then((result) => { setDiscs(result.discs); setDiscsPaginate(result.paginate); }); } - }, [mbid]) + }, [mbid, page]) + + useEffect(() => { + document.getElementById('root').scrollIntoView({behavior: 'smooth'}); + }, [pathname]); + + const makeLink = (page) => { + return `/artist/${mbid}?page=${page}`; + } const handleDiscPageChanged = (page) => { setDiscs(null); + setPage(page); + getArtistDiscs(mbid, page, 16).then((result) => { setDiscs(result.discs); setDiscsPaginate(result.paginate); }); - document.getElementById('root').scrollIntoView({behavior: 'smooth'}); + props.history.push(makeLink(page)); } return (
- - {!mbid &&

AHH

} +
); }