From 2b4826e50b3950c73fd78c6d510b77e6c2213745 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Wed, 17 Jun 2020 20:47:58 -0400
Subject: [PATCH] Issue #2 Pagina de canciones

---
 src/components/Comments.jsx | 10 ++++++++
 src/index.jsx               |  2 ++
 src/views/Song.jsx          | 49 +++++++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 src/components/Comments.jsx
 create mode 100644 src/views/Song.jsx

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..648e81a
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export const Comments = (props) => {
+  return (
+    <div>
+      <h3>Comentarios</h3>
+      <p>No aun :3</p>
+    </div>
+  )
+}
diff --git a/src/index.jsx b/src/index.jsx
index 2a6da91..637d16c 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,6 +15,7 @@ import {ArtistView} from "./views/Artist";
 import {DiscView} from "./views/Disc";
 import {ReleaseView} from "./views/Release";
 import {Recomended} from "./views/Recomended";
+import {SongView} from "./views/Song";
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -46,6 +47,7 @@ const App = () => (
                 <Route path='/artist/:mbid?' component={ArtistView}/>
                 <Route path='/disc/:mbid?' component={DiscView}/>
                 <Route path='/release/:mbid?' component={ReleaseView}/>
+                <Route path='/song/:mbid?' component={SongView}/>
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>
diff --git a/src/views/Song.jsx b/src/views/Song.jsx
new file mode 100644
index 0000000..12bc6ab
--- /dev/null
+++ b/src/views/Song.jsx
@@ -0,0 +1,49 @@
+import React, {Fragment, useEffect, useState} from 'react';
+
+import {capitalize, toDuration} from "../services/utils";
+import {getSong} from "../services/entity_service";
+
+import {Entity} from "../components/Entity";
+import {Comments} from "../components/Comments";
+
+const Song = (props) => {
+  const song = props.song;
+
+  if(!song) {
+    return <Fragment/>
+  }
+
+  let subtitle = ''
+
+  if(song.disambiguation && song.length) {
+    subtitle = <span>{capitalize(song.disambiguation)} - [{toDuration(song.length)}]</span>
+  }else if (song.disambiguation) {
+    subtitle = <span>{capitalize(song.disambiguation)}</span>
+  }else if (song.length) {
+    subtitle = <span>[{toDuration(song.length)}]</span>
+  }
+
+  return <Entity title={song.title} subtitle={subtitle} buttonText='Agregar a mi lista'/>
+
+}
+
+export const SongView = (props) => {
+  const mbid = props.match.params.mbid;
+  const [song, setSong] = useState(null);
+
+  useEffect(() => {
+    if (mbid) {
+      getSong(mbid).then((result) => setSong(result));
+    }
+  }, [mbid]);
+
+  return (
+    <div>
+      <Song song={song}/>
+      {song &&
+        <Comments/>
+      }
+    </div>
+  )
+
+}