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 (
);
}