Vista basica de discos

src/components/Artist.jsx

@@ -62,18 +62,17 @@ const Artist = (props) => {
     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 className='title'>
+                    <h1>{artist.name}</h1>
+                    <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
                 </div>
                 <ul className='tags'>
                     {artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
                 </ul>
+
+                <div>
+                    <button className='button'>Agregar a mi Lista</button>
+                </div>
             </div>
         )
     } else {

src/components/Disc.jsx

@@ -0,0 +1,46 @@
+import React, {useEffect, useState} from 'react';
+import queryString from "query-string";
+import {getArtist, getArtistDiscs, getDisc} from "../services/entity_service";
+import {CoverArt} from "./CoverArt";
+import './Disc.scss';
+
+const Disc = (props) => {
+    const disc = props.disc;
+    if (disc) {
+        return (
+            <div className='disc'>
+                <div className='space-between'>
+                    <div className='title'>
+                        <h1>{disc.title}</h1>
+                        <h4>{disc.artist[0].name}</h4>
+                        <button className='button'>Agregar a mi Lista</button>
+                    </div>
+                    <div className='cover-container'>
+                        <CoverArt cover_art={disc.cover_art}/>
+                    </div>
+                </div>
+            </div>
+        )
+    } else {
+        return <></>
+    }
+}
+
+export const DiscView = (props) => {
+    const parsedParams = queryString.parse(props.location.search);
+    const mbid = props.match.params.mbid;
+
+    const [disc, setDisc] = useState(null);
+
+    useEffect(() => {
+        if (mbid) {
+            getDisc(mbid).then((result) => setDisc(result));
+        }
+    }, [mbid])
+
+
+
+    return (
+        <Disc disc={disc}/>
+    )
+}

src/components/Disc.scss

@@ -0,0 +1,18 @@
+.disc {
+  .title {
+    h1 {
+      margin-bottom: 0
+    }
+    h4 {
+      margin-top: 0;
+      margin-bottom: .5em
+    }
+  }
+
+  .cover-container {
+    width: 250px;
+    height: 250px;
+    min-width: 250px;
+    margin-top: 1em;
+  }
+}