Agregada vista de artista

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>
+    );
+}

src/components/CoverArt.jsx

@@ -0,0 +1,33 @@
+import React, {Fragment, useState} from "react";
+import {ReactComponent as DiscSVG} from "../svg/disc.svg";
+
+export const CoverArt = (props) => {
+    const [loading, setLoading] = useState(true);
+
+    const handleLoad = () => setLoading(false)
+
+    if (props.cover_art) {
+        if (loading) {
+            return (
+                <Fragment>
+                    <img src={props.cover_art.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
+                    <div class={'coverart pulsating'}/>
+                </Fragment>
+            )
+        } else {
+            return <img src={props.cover_art.image} className={'coverart'} alt={props.alt}/>
+        }
+    } else {
+        return <DiscSVG className='coverart'/>
+    }
+}
+
+
+export const CoverWithCaption = (props) => {
+   return(
+       <figure className='cover-caption'>
+           <CoverArt cover_art={props.cover_art} alt={props.alt}/>
+           <figcaption>{props.caption}</figcaption>
+       </figure>
+   );
+}

src/components/Search.jsx

@@ -4,31 +4,10 @@ import queryString from "query-string";
 import {searchArtist, searchDisc, searchSong} from "../services/search_service";
 import {SearchBar} from "./SearchBar";
 import {Paginate} from "./Paginate";
+import {CoverArt} from "./CoverArt";
 import {Link} from "react-router-dom";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
-import {ReactComponent as DiscSVG} from "../svg/disc.svg";
-
-const CoverArt = (props) => {
-    const [loading, setLoading] = useState(true);
-
-    const handleLoad = () => setLoading(false)
-
-    if (props.cover_art) {
-        if (loading) {
-            return (
-                <Fragment>
-                    <img src={props.cover_art.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
-                    <DiscSVG className='coverart'/>
-                </Fragment>
-            )
-        } else {
-            return <img src={props.cover_art.image} className={'coverart'} alt={props.alt}/>
-        }
-    } else {
-        return <DiscSVG className='coverart'/>
-    }
-}
 
 const SearchPlaceholder = (props) => {
     return (
@@ -109,7 +88,9 @@ const SearchDisc = (props) => {
     return (
         <li className='disc'>
             <Link to={`/disc/${disc.id}`}>
-                <CoverArt cover_art={disc.cover_art} alt={`Cover del disco: ${disc.title}`}/>
+                <div className={'cover-container'}>
+                    <CoverArt cover_art={disc.cover_art} alt={`Cover del disco: ${disc.title}`}/>
+                </div>
                 <div className='description'>
                     <span>{disc.title}</span>
                     <span className='small'>{disc.artist[0].name}</span>