Discos con sus versiones

src/components/Artist.jsx

@@ -24,10 +24,10 @@ const Discs = (props) => {
       'subtitle': disc.artist.name
     }));
     discsComponent = <EntityList items={items} grid={true}/>
-}
+  }
 
-let paginateContent;
-if (paginate) {
+  let paginateContent;
+  if (paginate) {
     const total = paginate.total;
     const currentPage = paginate.current_page;
     const pageLimit = paginate.per_page;
@@ -35,15 +35,15 @@ if (paginate) {
     paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
       currentPage={currentPage} pageNeighbours={2}
       onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
-}
+  }
 
-return (
+  return (
     <div className='discs'>
       <h2>Discos</h2>
       {discsComponent}
       {paginateContent}
     </div>
-)
+  );
 }
 
 const Artist = (props) => {

src/components/CoverArt.jsx

@@ -1,9 +1,10 @@
 import React, {Fragment, useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
-import {getDiscCoverArt} from "../services/entity_service";
+import {getDiscCoverArt, getReleaseCoverArt} from "../services/entity_service";
 
 export const CoverArt = (props) => {
   const disc = props.disc
+  const release = props.release
   const [loading, setLoading] = useState(true);
   const [coverArt, setCoverArt] = useState(null)
 
@@ -12,8 +13,12 @@ export const CoverArt = (props) => {
       getDiscCoverArt(disc.id).then((result) => {
         setCoverArt(result)
       })
+    } else if (release) {
+      getReleaseCoverArt(release.id).then((result) => {
+        setCoverArt(result)
+      })
     }
-    }, [disc])
+  }, [disc, release])
 
   const handleLoad = () => setLoading(false)
 

src/components/Disc.jsx

@@ -1,14 +1,65 @@
 import React, {Fragment, useEffect, useState} from 'react';
-// import queryString from "query-string";
-import {getDisc} from "../services/entity_service";
+import {getDisc, getDiscVersions} from "../services/entity_service";
 import {CoverArt} from "./CoverArt";
 import {Entity} from "./Entity";
+import {EntityList} from "./EntityList";
+import {Paginate} from "./Paginate";
+import queryString from "query-string";
+
+const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+
+const Versions = (props) => {
+  const versions = props.versions ? props.versions : null;
+  const paginate = props.paginate ? props.paginate : null;
+
+  const handlePageChanged = (page) => {
+    props.onPageChanged(page);
+  }
+
+  let versionsComponent = <Fragment/>;
+  if(versions) {
+    const items = versions.map((version) => ({
+      'cover': <CoverArt release={version}/>,
+      'link': `/release/${version.id}`,
+      'title': version.title,
+      'subtitle': <Fragment>
+                   <div>{version.date}</div>
+                   <div>{version.country}</div>
+                   <div>{capitalize(version.disambiguation)}</div>
+                   </Fragment>
+
+    }));
+    versionsComponent = <EntityList items={items}/>
+  }
+
+  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={props.makeLink}/>
+  }
+
+  return (
+    <Fragment>
+      <h2>Versiones</h2>
+      {versionsComponent}
+      {paginateContent}
+    </Fragment>
+  )
+}
 
 const Disc = (props) => {
   const disc = props.disc;
   if (disc){
     return <Entity title={disc.title}
-      subtitle={disc.artist.name}
+      subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
       buttonText='Agregar a mi lista'
       cover={<CoverArt disc={disc}/>}/>
   }else {
@@ -17,18 +68,44 @@ const Disc = (props) => {
 }
 
 export const DiscView = (props) => {
-  // const parsedParams = queryString.parse(props.location.search);
   const mbid = props.match.params.mbid;
+  const parsedParams = queryString.parse(props.location.search);
 
   const [disc, setDisc] = useState(null);
+  const [versions, setVersions] = useState(null);
+  const [versionsPaginate, setVersionsPaginate] = useState(null);
+  const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
 
   useEffect(() => {
     if (mbid) {
       getDisc(mbid).then((result) => setDisc(result));
+      getDiscVersions(mbid, page).then((result) => {
+        setVersions(result.releases);
+        setVersionsPaginate(result.paginate);
+      });
+    }
+  }, [mbid, page])
+
+  const makeLink = (page) => {
+    return `/disc/${mbid}?page=${page}`;
+  }
+
+  const handleVersionPageChanged = (page) => {
+    setVersions(null);
+    setPage(page);
+    props.history.push(makeLink(page));
+  }
+
+  const handleNavigateToVersion= (disc) => {
+    props.history.push(`/release/${disc.id}`)
   }
-  }, [mbid])
 
   return (
+    <Fragment>
       <Disc disc={disc}/>
+      <Versions versions={versions} paginate={versionsPaginate}
+                onPageChanged={handleVersionPageChanged} makeLink={makeLink}
+                navigateToVersion={handleNavigateToVersion}/>
+    </Fragment>
   )
 }

src/services/entity_service.js

@@ -20,7 +20,7 @@ export async function getDisc(mbid) {
     return response.data
 }
 
-export async function getDiscVersions(mbid, page = 1, per_page = 30) {
+export async function getDiscVersions(mbid, page = 1, per_page = 10) {
     const url = `${baseUrl}/disc/${mbid}/releases`;
     const response = await axios.get(url);
     return response.data
@@ -37,3 +37,9 @@ export async function getDiscCoverArt(mbid) {
     const response = await axios.get(url);
     return response.data
 }
+
+export async function getReleaseCoverArt(mbid) {
+    const url = `${baseUrl}/release/${mbid}/coverart`;
+    const response = await axios.get(url);
+    return response.data
+}