Basic pagination en Artistas

src/components/Artist.jsx

@@ -1,28 +1,53 @@
 import React, {useEffect, useState} from 'react'
 import {getArtist, getArtistDiscs} from "../services/entity_service";
 import {CoverWithCaption} from './CoverArt';
-import ReactJson from "react-json-view";
+import {Paginate} from "./Paginate";
 
 export const Discs = (props) => {
-    const discs = props.discs ? props.discs.discs : null;
-    const paginate = props.discs ? props.discs.paginate : null;
+    const discs = props.discs ? props.discs : null;
+    const paginate = props.paginate ? props.paginate : null;
 
+    const handlePageChanged = (page) => {
+        props.onPageChanged(page);
+    }
+
+    let discContent;
     if (discs) {
-        return (
-            <div className='discs'>
-                <h2>Discos</h2>
-                <ul className={'discs-list'}>
-                    {discs.map((disc, index) => {
-                        return (
-                            <div className='cover-container'>
-                                <CoverWithCaption key={index} cover_art={disc.cover_art} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
-                            </div>
-                        )
-                    })}
-                </ul>
-            </div>
+        discContent = (
+            <ul className="discs-list">
+                {discs.map((disc, index) => {
+                    return (
+                        <div key={index} className='cover-container'>
+                            <CoverWithCaption cover_art={disc.cover_art} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
+                        </div>
+                    )
+                })}
+            </ul>
+        );
+    } else {
+        discContent = (
+            <ul className="discs-list loading">
+                {[...Array(16)].map((p, index) => (<div key={index} className='cover-container pulsating'/>))}
+            </ul>
+        );
+    }
+
+    let paginateContent;
+    if (paginate) {
+        const total = paginate.total;
+        const currentPage = paginate.current_page;
+        const pageLimit = paginate.per_page;
+
+        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={() => ('#')}/>
+    }
+
+    return (
+        <div className='discs'>
+            <h2>Discos</h2>
+            {discContent}
+            {paginateContent}
+        </div>
     )
-    } else return <></>
 }
 
 export const Artist = (props) => {
@@ -52,19 +77,34 @@ export const Artist = (props) => {
 export const ArtistView = (props) => {
     const [artist, setArtist] = useState(null);
     const [discs, setDiscs] = useState(null);
+    const [discsPaginate, setDiscsPaginate] = useState(null);
+
     const mbid = props.match.params.mbid;
 
     useEffect(() => {
         if (mbid) {
             getArtist(mbid).then((result) => setArtist(result));
-            getArtistDiscs(mbid, 15).then((result) => setDiscs(result));
+            getArtistDiscs(mbid, 1, 16).then((result) => {
+                setDiscs(result.discs);
+                setDiscsPaginate(result.paginate);
+            });
         }
     }, [mbid])
 
+    const handleDiscPageChanged = (page) => {
+        setDiscs(null);
+        getArtistDiscs(mbid, page, 16).then((result) => {
+            setDiscs(result.discs);
+            setDiscsPaginate(result.paginate);
+        });
+
+        document.getElementById('root').scrollIntoView({behavior: 'smooth'});
+    }
+
     return (
         <div className='artist-view'>
             <Artist artist={artist}/>
-            <Discs discs={discs}/>
+            <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged}/>
             {!mbid && <p>AHH</p>}
         </div>
     );