Agregada vista de artista

2020-06-06 05:52:15 -04:00
parent 084845f347
commit 0af23a9a3a
7 changed files with 302 additions and 62 deletions
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -0,0 +1,71 @@
+import React, {useEffect, useState} from 'react'
+import {getArtist, getArtistDiscs} from "../services/entity_service";
+import {CoverWithCaption} from './CoverArt';
+import ReactJson from "react-json-view";
+
+export const Discs = (props) => {
+    const discs = props.discs ? props.discs.discs : null;
+    const paginate = props.discs ? props.discs.paginate : null;
+
+    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>
+    )
+    } else return <></>
+}
+
+export const Artist = (props) => {
+    const artist = props.artist;
+    if (artist) {
+        return (
+            <div className='artist'>
+                <div className='space-between'>
+                    <div className='title'>
+                        <h1>{artist.name}</h1>
+                        <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
+                    </div>
+                    <div>
+                        <button className='button'>Agregar a mi Lista</button>
+                    </div>
+                </div>
+                <ul className='tags'>
+                    {artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
+                </ul>
+            </div>
+        )
+    } else {
+        return <></>
+    }
+}
+
+export const ArtistView = (props) => {
+    const [artist, setArtist] = useState(null);
+    const [discs, setDiscs] = useState(null);
+    const mbid = props.match.params.mbid;
+
+    useEffect(() => {
+        if (mbid) {
+            getArtist(mbid).then((result) => setArtist(result));
+            getArtistDiscs(mbid, 15).then((result) => setDiscs(result));
+        }
+    }, [mbid])
+
+    return (
+        <div className='artist-view'>
+            <Artist artist={artist}/>
+            <Discs discs={discs}/>
+            {!mbid && <p>AHH</p>}
+        </div>
+    );
+}