Discos con sus versiones

src/components/Artist.jsx

@@ -19,31 +19,31 @@ const Discs = (props) => {
   if (discs) {
     const items = discs.map((disc) => ({
       'cover': <CoverArt disc={disc}/>,
-    'link': `/disc/${disc.id}`,
+      'link': `/disc/${disc.id}`,
-    'title': disc.title,
+      'title': disc.title,
-    'subtitle': disc.artist.name
+      'subtitle': disc.artist.name
-  }));
+    }));
-  discsComponent = <EntityList items={items} grid={true}/>
+    discsComponent = <EntityList items={items} grid={true}/>
-}
+  }
 
-let paginateContent;
+  let paginateContent;
-if (paginate) {
+  if (paginate) {
-  const total = paginate.total;
+    const total = paginate.total;
-  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}
+    paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
-    currentPage={currentPage} pageNeighbours={2}
+      currentPage={currentPage} pageNeighbours={2}
-    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
+      onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
-}
+  }
 
-return (
+  return (
-  <div className='discs'>
+    <div className='discs'>
-    <h2>Discos</h2>
+      <h2>Discos</h2>
-    {discsComponent}
+      {discsComponent}
-    {paginateContent}
+      {paginateContent}
-  </div>
+    </div>
-)
+  );
 }
 
 const Artist = (props) => {

src/components/CoverArt.jsx

@@ -1,44 +1,49 @@
 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 disc = props.disc
-    const [loading, setLoading] = useState(true);
+  const release = props.release
-    const [coverArt, setCoverArt] = useState(null)
+  const [loading, setLoading] = useState(true);
+  const [coverArt, setCoverArt] = useState(null)
 
-    useEffect(() => {
+  useEffect(() => {
-        if(disc){
+    if(disc){
-            getDiscCoverArt(disc.id).then((result) => {
+      getDiscCoverArt(disc.id).then((result) => {
-                setCoverArt(result)
+        setCoverArt(result)
-            })
+      })
-        }
+    } else if (release) {
-    }, [disc])
+      getReleaseCoverArt(release.id).then((result) => {
-
+        setCoverArt(result)
-    const handleLoad = () => setLoading(false)
+      })
-
-    if (coverArt) {
-        if (loading) {
-            return (
-                <Fragment>
-                    <img src={coverArt.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
-                    <div className={'coverart pulsating'}/>
-                </Fragment>
-            )
-        } else {
-            return <img src={coverArt.image} className={'coverart'} alt={props.alt}/>
-        }
-    } else {
-        return <DiscSVG className='coverart'/>
     }
+  }, [disc, release])
+
+  const handleLoad = () => setLoading(false)
+
+  if (coverArt) {
+    if (loading) {
+      return (
+        <Fragment>
+          <img src={coverArt.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
+          <div className={'coverart pulsating'}/>
+        </Fragment>
+      )
+    } else {
+      return <img src={coverArt.image} className={'coverart'} alt={props.alt}/>
+    }
+  } else {
+    return <DiscSVG className='coverart'/>
+  }
 }
 
 
 export const CoverWithCaption = (props) => {
-   return(
+  return(
-       <figure className='cover-caption'>
+    <figure className='cover-caption'>
-           <CoverArt disc={props.disc} alt={props.alt}/>
+      <CoverArt disc={props.disc} alt={props.alt}/>
-           <figcaption>{props.caption}</figcaption>
+      <figcaption>{props.caption}</figcaption>
-       </figure>
+    </figure>
-   );
+  );
 }

src/components/Disc.jsx

@@ -1,14 +1,65 @@
 import React, {Fragment, useEffect, useState} from 'react';
-// import queryString from "query-string";
+import {getDisc, getDiscVersions} from "../services/entity_service";
-import {getDisc} 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])
+  }, [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}`)
+  }
 
   return (
-    <Disc disc={disc}/>
+    <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
+}