skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pagination con props y scroll to the top

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-06 07:34:21 -04:00
parent 2f3e83f8c8
commit 46dfb9d38c
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -7,6 +7,10 @@
<meta name="theme-color" content="#000000"/> <meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/> <meta name="description" content="Web site created using create-react-app"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<script
src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.auto-polyfill.min.js"
data-seamless
></script>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

30
src/components/Artist.jsx
View File

@@ -2,6 +2,10 @@ import React, {useEffect, useState} from 'react'
import {getArtist, getArtistDiscs} from "../services/entity_service"; import {getArtist, getArtistDiscs} from "../services/entity_service";
import {CoverWithCaption} from './CoverArt'; import {CoverWithCaption} from './CoverArt';
import {Paginate} from "./Paginate"; import {Paginate} from "./Paginate";
import queryString from "query-string";
import {useLocation} from 'react-router-dom';
export const Discs = (props) => { export const Discs = (props) => {
const discs = props.discs ? props.discs : null; const discs = props.discs ? props.discs : null;
@@ -38,7 +42,7 @@ export const Discs = (props) => {
const currentPage = paginate.current_page; const currentPage = paginate.current_page;
const pageLimit = paginate.per_page; const pageLimit = paginate.per_page;
paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={() => ('#')}/> paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
} }
return ( return (
@@ -75,37 +79,51 @@ export const Artist = (props) => {
} }
export const ArtistView = (props) => { export const ArtistView = (props) => {
const {pathname} = useLocation();
const parsedParams = queryString.parse(props.location.search);
const [artist, setArtist] = useState(null); const [artist, setArtist] = useState(null);
const [discs, setDiscs] = useState(null); const [discs, setDiscs] = useState(null);
const [discsPaginate, setDiscsPaginate] = useState(null); const [discsPaginate, setDiscsPaginate] = useState(null);
const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
const mbid = props.match.params.mbid; const mbid = props.match.params.mbid;
useEffect(() => { useEffect(() => {
if (mbid) { if (mbid) {
getArtist(mbid).then((result) => setArtist(result)); getArtist(mbid).then((result) => setArtist(result));
getArtistDiscs(mbid, 1, 16).then((result) => { getArtistDiscs(mbid, page, 16).then((result) => {
setDiscs(result.discs); setDiscs(result.discs);
setDiscsPaginate(result.paginate); 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) => { const handleDiscPageChanged = (page) => {
setDiscs(null); setDiscs(null);
setPage(page);
getArtistDiscs(mbid, page, 16).then((result) => { getArtistDiscs(mbid, page, 16).then((result) => {
setDiscs(result.discs); setDiscs(result.discs);
setDiscsPaginate(result.paginate); setDiscsPaginate(result.paginate);
}); });
document.getElementById('root').scrollIntoView({behavior: 'smooth'}); document.getElementById('root').scrollIntoView({behavior: 'smooth'});
props.history.push(makeLink(page));
} }
return ( return (
<div className='artist-view'> <div className='artist-view'>
<Artist artist={artist}/> <Artist artist={artist}/>
<Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged}/> <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>
{!mbid && <p>AHH</p>}
</div> </div>
); );
} }