Base de vista de release

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>
+  )
+}