Base de vista de release

src/components/EntityList.jsx

@@ -18,7 +18,7 @@ const EntityPlaceholder = (props) => {
 
 const EntityItem = (props) => {
   return (
-      <li className='entity-item'>
+      <li className={'entity-item ' + (props.selected ? 'selected' : '')} id={props.id}>
           <Link to={props.link}>
             {props.cover &&
               <div className='cover'>
@@ -43,8 +43,9 @@ export const EntityList = (props) => {
       entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
     }
   }else{
-    entities = props.items.map(item => <EntityItem cover={item.cover} link={item.link}
+    entities = props.items.map(item => <EntityItem id={item.id} cover={item.cover} link={item.link}
-                                                   title={item.title} subtitle={item.subtitle}/>);
+                                                   title={item.title} subtitle={item.subtitle}
+                                                   selected={item.selected}/>);
  }
 
   const className = props.grid ? "grid" : "column";

src/components/EntityList.scss

@@ -105,7 +105,7 @@
       width: 0;
     }
 
-    &:hover {
+    &:hover, &.selected{
       &:after{
         width: 100%;
       }
@@ -130,7 +130,7 @@
       transition: all 300ms ease-in-out;
     }
 
-    &:hover {
+    &:hover, &.selected {
       .cover {
         outline: 6px var(--accent) solid;
         outline-offset: -6px;

src/index.jsx

@@ -11,6 +11,7 @@ import {SearchBar} from "./components/SearchBar";
 import {Search} from './views/Search';
 import {ArtistView} from "./views/Artist";
 import {DiscView} from "./views/Disc";
+import {ReleaseView} from "./views/Release";
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -40,6 +41,7 @@ const App = () => (
                 <Route path='/search/:who?' component={Search}/>
                 <Route path='/artist/:mbid?' component={ArtistView}/>
                 <Route path='/disc/:mbid?' component={DiscView}/>
+                <Route path='/release/:mbid?' component={ReleaseView}/>
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>

src/services/entity_service.js

@@ -26,13 +26,13 @@ export async function getDiscVersions(mbid, page = 1, per_page = 10) {
     return response.data
 }
 
-export async function getVersion(mbid) {
+export async function getRelease(mbid) {
     const url = `${baseUrl}/release/${mbid}`;
     const response = await axios.get(url);
     return response.data
 }
 
-export async function getReleaseSongs(mbid, page = 1, per_page = 50) {
+export async function getReleaseSongs(mbid) {
     const url = `${baseUrl}/release/${mbid}/recordings`;
     const response = await axios.get(url);
     return response.data

src/views/Release.jsx

@@ -0,0 +1,87 @@
+import React, {Fragment, useEffect, useState} from 'react';
+
+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;
+
+  let recordingsComponent = <EntityList placeholder={true} size={25}/>;
+  if(recordings) {
+    const items = recordings.map((recording) => ({
+      'id': recording.id,
+      'link': props.makeLink(recording.id),
+      'title': recording.title,
+      'subtitle': (<Fragment>
+                    <div>{recording.length}</div>
+                    <div>{capitalize(recording.disambiguation)}</div>
+                  </Fragment>),
+      'selected': props.selected === recording.id
+
+    }));
+    recordingsComponent = <EntityList items={items}/>
+  }
+
+  return (
+    <Fragment>
+      <h2>Canciones</h2>
+      {recordingsComponent}
+    </Fragment>
+  )
+}
+
+const Release = (props) => {
+  const release = props.release;
+  if (release){
+    return <Entity title={release.title}
+      subtitle={`${release.artist.name} - [${release.date}]`}
+      buttonText='Agregar a mi lista'
+      cover={<CoverArt release={release}/>}/>
+  }else {
+    return <Fragment></Fragment>
+  }
+}
+
+export const ReleaseView = (props) => {
+  const mbid = props.match.params.mbid;
+
+  const [release, setRelease] = useState(null);
+  const [recordings, setRecordings] = useState(null);
+  const currentRecording = props.location.hash ? props.location.hash.slice(1) : null
+
+  useEffect(() => {
+    if (mbid) {
+      getRelease(mbid).then((result) => setRelease(result));
+      getReleaseSongs(mbid).then((result) => {
+        setRecordings(result.medias[0].recordings);
+      });
+    }
+  }, [mbid])
+
+  const makeLink = (recordingID) => {
+    return `/release/${mbid}#${recordingID}`;
+  }
+
+  const handleNavigateToRecording= (recording) => {
+    props.history.push(makeLink(recording.id))
+  }
+
+  return (
+    <Fragment>
+      <Release release={release}/>
+      {release &&
+        <Recordings recordings={recordings}
+                    selected={currentRecording}
+                    makeLink={makeLink}
+                    navigateToRecording={handleNavigateToRecording}/>
+      }
+    </Fragment>
+  )
+}