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'}>
+        discContent = (
+            <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 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>
     );

src/services/entity_service.js

@@ -8,8 +8,8 @@ export async function getArtist(mbid) {
     return response.data
 }
 
-export async function getArtistDiscs(mbid, per_page=10) {
-    const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}`;
+export async function getArtistDiscs(mbid, page = 1, per_page=10) {
+    const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}&page=${page}`;
     const response = await axios.get(url);
     return response.data
 }

src/styles/main.scss

@@ -70,15 +70,25 @@ h1 {
   font-size: var(--font-1);
 }
 
-h2 {font-size: var(--font-2);}
+h2 {
+  font-size: var(--font-2);
+}
 
-h3 {font-size: var(--font-3);}
+h3 {
+  font-size: var(--font-3);
+}
 
-h4 {font-size: var(--font-4);}
+h4 {
+  font-size: var(--font-4);
+}
 
-h5 {font-size: var(--font-5);}
+h5 {
+  font-size: var(--font-5);
+}
 
-small, .text_small {font-size: var(--font-6);}
+small, .text_small {
+  font-size: var(--font-6);
+}
 
 button.button {
   border: 3px solid var(--accent);
@@ -261,7 +271,6 @@ ul.entity_list {
   }
 }
 
-
 .cover-caption {
   height: 250px;
   width: 250px;
@@ -280,12 +289,12 @@ ul.entity_list {
   }
 
   &:hover {
-    figcaption{
+    figcaption {
       display: block;
       animation: slidein 300ms ease-in-out both;
 
       @keyframes slidein {
-        to{
+        to {
           height: 80px;
           transform: translateY(-80px);
           opacity: 100;
@@ -326,22 +335,32 @@ ul.tabs {
       border-bottom: 2px var(--accent) solid;
     }
   }
-      }
+}
 
 /* Artists */
 .artist-view {
-  .artist{
+  .artist {
     .title {
-      h1 { margin-bottom: 0}
-      h4 { margin-top: 0; margin-bottom: .5em }
+      h1 {
+        margin-bottom: 0
+      }
+
+      h4 {
+        margin-top: 0;
+        margin-bottom: .5em
+      }
+
       max-width: 60%;
     }
+
     .button {
       margin-bottom: 1em;
     }
+
     .tags {
-      display:flex;
+      display: flex;
       flex-wrap: wrap;
+
       li {
         border-bottom: 3px solid var(--accent);
         margin-right: 1em;
@@ -349,33 +368,35 @@ ul.tabs {
         margin-bottom: .5em;
         font-weight: 500;
       }
+
       margin-bottom: 2em;
     }
   }
 
   .discs {
     .discs-list {
+      $grid-width: 250px;
+      $grid-gap: 30px;
+
       display: grid;
-      grid-auto-rows: 250px;
-      gap: 30px;
+      grid-auto-rows: $grid-width;
+      gap: $grid-gap;
       justify-content: start;
       align-content: start;
 
-      $grid-width: 250px;
-      $grid-gap: 16px;
-
-
       @for $x from 1 to 5 {
-        @media (min-width: $grid-width * $x + $grid-gap * $x ) {
+        @media (min-width: $grid-width * $x + $grid-gap * $x) {
           grid-template-columns: repeat($x, auto);
         }
       }
 
-      @media (min-width: $grid-width * 4 + $grid-gap * 4 ) {
+      @media (min-width: $grid-width * 4 + $grid-gap * 4) {
         justify-content: space-between;
-        align-content: space-between;
       }
 
+      &.loading {
+        height: ($grid-width + $grid-gap) * 4;
+      }
 
       .cover-container {
         width: 250px;