diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx index 32b6baa..c5ffbfd 100644 --- a/src/components/Artist.jsx +++ b/src/components/Artist.jsx @@ -19,31 +19,31 @@ const Discs = (props) => { if (discs) { const items = discs.map((disc) => ({ 'cover': , - 'link': `/disc/${disc.id}`, - 'title': disc.title, - 'subtitle': disc.artist.name - })); - discsComponent = -} + 'link': `/disc/${disc.id}`, + 'title': disc.title, + 'subtitle': disc.artist.name + })); + discsComponent = + } -let paginateContent; -if (paginate) { - const total = paginate.total; - const currentPage = paginate.current_page; - const pageLimit = paginate.per_page; + let paginateContent; + if (paginate) { + const total = paginate.total; + const currentPage = paginate.current_page; + const pageLimit = paginate.per_page; - paginateContent = -} + paginateContent = + } -return ( -
-

Discos

- {discsComponent} - {paginateContent} -
-) + return ( +
+

Discos

+ {discsComponent} + {paginateContent} +
+ ); } const Artist = (props) => { diff --git a/src/components/CoverArt.jsx b/src/components/CoverArt.jsx index 9ee3ccb..babac5e 100644 --- a/src/components/CoverArt.jsx +++ b/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 [loading, setLoading] = useState(true); - const [coverArt, setCoverArt] = useState(null) + const disc = props.disc + const release = props.release + const [loading, setLoading] = useState(true); + const [coverArt, setCoverArt] = useState(null) - useEffect(() => { - if(disc){ - getDiscCoverArt(disc.id).then((result) => { - setCoverArt(result) - }) - } - }, [disc]) - - const handleLoad = () => setLoading(false) - - if (coverArt) { - if (loading) { - return ( - - {props.alt} -
- - ) - } else { - return {props.alt}/ - } - } else { - return + useEffect(() => { + if(disc){ + getDiscCoverArt(disc.id).then((result) => { + setCoverArt(result) + }) + } else if (release) { + getReleaseCoverArt(release.id).then((result) => { + setCoverArt(result) + }) } + }, [disc, release]) + + const handleLoad = () => setLoading(false) + + if (coverArt) { + if (loading) { + return ( + + {props.alt} +
+ + ) + } else { + return {props.alt}/ + } + } else { + return + } } export const CoverWithCaption = (props) => { - return( -
- -
{props.caption}
-
- ); + return( +
+ +
{props.caption}
+
+ ); } diff --git a/src/components/Disc.jsx b/src/components/Disc.jsx index 4aaa91a..9dcc96f 100644 --- a/src/components/Disc.jsx +++ b/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 = ; + if(versions) { + const items = versions.map((version) => ({ + 'cover': , + 'link': `/release/${version.id}`, + 'title': version.title, + 'subtitle': +
{version.date}
+
{version.country}
+
{capitalize(version.disambiguation)}
+
+ + })); + versionsComponent = + } + + let paginateContent; + if (paginate) { + const total = paginate.total; + const currentPage = paginate.current_page; + const pageLimit = paginate.per_page; + + paginateContent = + } + + return ( + +

Versiones

+ {versionsComponent} + {paginateContent} +
+ ) +} const Disc = (props) => { const disc = props.disc; if (disc){ return }/> }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 ( - + + + + ) } diff --git a/src/services/entity_service.js b/src/services/entity_service.js index 4cfa1e2..908f6be 100644 --- a/src/services/entity_service.js +++ b/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 +}