From 747f8bec4974e9c0a6c93ae7f6d13bad92e22ad1 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Sun, 7 Jun 2020 00:33:50 -0400
Subject: [PATCH] Vista basica de discos

---
 src/components/Artist.jsx      | 15 ++++++-----
 src/components/Disc.jsx        | 46 ++++++++++++++++++++++++++++++++++
 src/components/Disc.scss       | 18 +++++++++++++
 src/index.jsx                  |  2 ++
 src/services/entity_service.js | 20 ++++++++++++++-
 src/styles/main.scss           |  8 +++---
 6 files changed, 96 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Disc.jsx
 create mode 100644 src/components/Disc.scss

diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index 83d54c5..982328a 100644
--- a/src/components/Artist.jsx
+++ b/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 {
diff --git a/src/components/Disc.jsx b/src/components/Disc.jsx
new file mode 100644
index 0000000..c31f074
--- /dev/null
+++ b/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}/>
+    )
+}
diff --git a/src/components/Disc.scss b/src/components/Disc.scss
new file mode 100644
index 0000000..8ef7bcc
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/index.jsx b/src/index.jsx
index 1514268..f14c7ec 100644
--- a/src/index.jsx
+++ b/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>
diff --git a/src/services/entity_service.js b/src/services/entity_service.js
index 711d83a..3e3ea04 100644
--- a/src/services/entity_service.js
+++ b/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
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 34d3cc3..a55f0d3 100644
--- a/src/styles/main.scss
+++ b/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;