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'>
-                    <div className='title'>
+                    <h1>{artist.name}</h1>
-                        <h1>{artist.name}</h1>
+                    <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
-                        <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>
+                    <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;
+  }
+}

src/index.jsx

@@ -10,6 +10,7 @@ import {Nav} from "./components/Nav";
 
 import {BrowserRouter, Switch, Route} from "react-router-dom";
 import {ArtistView} from "./components/Artist";
+import {DiscView} from "./components/Disc";
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -38,6 +39,7 @@ const App = () => (
             <Switch>
                 <Route path='/search/:who?' component={Search}/>
                 <Route path='/artist/:mbid?' component={ArtistView}/>
+                <Route path='/disc/:mbid?' component={DiscView}/>
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>

src/services/entity_service.js

@@ -8,9 +8,27 @@ export async function getArtist(mbid) {
     return response.data
 }
 
-export async function getArtistDiscs(mbid, page = 1, per_page=10) {
+export async function getArtistDiscs(mbid, page = 1, per_page = 10) {
     const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}&page=${page}`;
     const response = await axios.get(url);
     return response.data
 }
 
+
+export async function getDisc(mbid) {
+    const url = `${baseUrl}/disc/${mbid}`;
+    const response = await axios.get(url);
+    return response.data
+}
+
+export async function getDiscVersions(mbid, page = 1, per_page = 30) {
+    const url = `${baseUrl}/disc/${mbid}/releases`;
+    const response = await axios.get(url);
+    return response.data
+}
+
+export async function getReleaseSongs(mbid, page = 1, per_page = 50) {
+    const url = `${baseUrl}/release/${mbid}/recordings`;
+    const response = await axios.get(url);
+    return response.data
+}

src/styles/main.scss

@@ -152,6 +152,7 @@ ul.pagination {
   display: flex;
   margin: 1rem auto;
   justify-content: space-between;
+  font-weight: 500;
 
   .page-center {
     display: flex;
@@ -355,7 +356,7 @@ ul.tabs {
     }
 
     .button {
-      margin-bottom: 1em;
+      margin: .5em auto;
     }
 
     .tags {
@@ -369,9 +370,9 @@ ul.tabs {
         margin-bottom: .5em;
         font-weight: 500;
       }
-
-      margin-bottom: 2em;
     }
+
+    margin-bottom: 1em;
   }
 
   .discs {
@@ -444,7 +445,6 @@ ul.tabs {
 .space-between {
   display: flex;
   justify-content: space-between;
-  align-items: center;
 
   @media (max-width: 767px) {
     justify-content: flex-start;