From 6550208bdddae383c406f1f2f57a77c907ba45dd Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Tue, 16 Jun 2020 05:07:36 -0400
Subject: [PATCH] Utils y mejoras en release

---
 src/services/utils.js | 24 ++++++++++++++++++++++++
 src/views/Disc.jsx    | 13 ++++++++-----
 src/views/Release.jsx | 16 ++++++++++------
 3 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 src/services/utils.js

diff --git a/src/services/utils.js b/src/services/utils.js
new file mode 100644
index 0000000..d9a5b1a
--- /dev/null
+++ b/src/services/utils.js
@@ -0,0 +1,24 @@
+export const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const pad2 = (n) => {
+  if(n <= 99 && n >= 0) {
+    n = (`0${n}`).slice(-2);
+  }
+  return n;
+}
+
+export const toDuration = (miliseconds) => {
+  const base =  Math.round(miliseconds / 1000);
+
+  const hours = Math.floor(base / 3600);
+  const minutes = Math.floor((base % 3600) / 60);
+  const seconds = base % 60;
+
+  if(hours > 0){
+    return pad2(hours) + ':' + pad2(minutes) + ':' + pad2(seconds)
+  }else{
+    return pad2(minutes) + ':' + pad2(seconds)
+  }
+}
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index 271487c..641d3b2 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -1,6 +1,8 @@
 import React, {Fragment, useEffect, useState} from 'react';
+import {Link} from 'react-router-dom'
 import queryString from "query-string";
 
+import {capitalize} from "../services/utils";
 import {getDisc, getDiscVersions} from "../services/entity_service";
 
 import {CoverArt} from "../components/CoverArt";
@@ -8,10 +10,6 @@ import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
 import {Paginate} from "../components/Paginate";
 
-const capitalize = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 const Versions = (props) => {
   const versions = props.versions ? props.versions : null;
   const paginate = props.paginate ? props.paginate : null;
@@ -59,8 +57,13 @@ const Versions = (props) => {
 const Disc = (props) => {
   const disc = props.disc;
   if (disc){
+    const subtitle = (
+      <Link to={`/artist/${disc.artist.id}`}>
+        {`${disc.artist.name} (${disc.first_release_date})`}
+      </Link>
+    )
     return <Entity title={disc.title}
-      subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
+      subtitle={subtitle}
       buttonText='Agregar a mi lista'
       cover={<CoverArt disc={disc}/>}/>
   }else {
diff --git a/src/views/Release.jsx b/src/views/Release.jsx
index 82bec1a..affa10d 100644
--- a/src/views/Release.jsx
+++ b/src/views/Release.jsx
@@ -1,14 +1,13 @@
 import React, {Fragment, useEffect, useState} from 'react';
+import {Link} from "react-router-dom";
 
+import {capitalize, toDuration} from "../services/utils";
 import {getRelease, getReleaseSongs} from "../services/entity_service";
 
 import {CoverArt} from "../components/CoverArt";
 import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
 
-const capitalize = (string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
 
 const Recordings = (props) => {
   const recordings = props.recordings ? props.recordings : null;
@@ -20,8 +19,8 @@ const Recordings = (props) => {
       'link': props.makeLink(recording.id),
       'title': recording.title,
       'subtitle': (<Fragment>
-                    <div>{recording.length}</div>
-                    <div>{capitalize(recording.disambiguation)}</div>
+                    {recording.length && <div>[{toDuration(recording.length)}]</div>}
+                    {recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
                   </Fragment>),
       'selected': props.selected === recording.id
 
@@ -40,8 +39,13 @@ const Recordings = (props) => {
 const Release = (props) => {
   const release = props.release;
   if (release){
+    const subtitle = (
+      <Link to={`/artist/${release.artist.id}`}>
+        {`${release.artist.name} (${release.date})`}
+      </Link>
+    )
     return <Entity title={release.title}
-      subtitle={`${release.artist.name} - [${release.date}]`}
+      subtitle={subtitle}
       buttonText='Agregar a mi lista'
       cover={<CoverArt release={release}/>}/>
   }else {