Vista de lista

src/components/AddToList.jsx

@@ -71,13 +71,13 @@ const AddForm = (props) => {
     case 'artist':
       title = 'Comparte lo que te gusta de este artista';
       break;
-    case 'release':
+    case 'release-group':
       title = 'Comparte lo que te gusta de este lanzamiento';
       break;
-    case 'disc':
+    case 'release':
       title = 'Comparte lo que te gusta de este disco';
       break;
-    case 'song':
+    case 'recording':
       title = 'Comparte lo que te gusta de esta canción';
       break;
     default:

src/components/NoRoute.jsx

@@ -0,0 +1,13 @@
+import {Grid, RowCol} from "./Grid";
+import React from "react";
+
+export const NoRoute = (props) => {
+  return (
+    <Grid>
+      <RowCol><h1>Esa pagina no existe</h1></RowCol>
+      <RowCol>
+        <button className='link' onClick={() => props.history.goBack()}>Volver</button>
+      </RowCol>
+    </Grid>
+  );
+}

src/index.jsx

@@ -21,6 +21,7 @@ import {SongView} from "./views/Song";
 import {Grid, RowCol} from './components/Grid';
 import {AuthMiddleware, AuthLogin, AuthLogout} from "./components/Auth";
 import {UserView} from "./views/User";
+import {NoRoute} from "./components/NoRoute";
 
 const Main = (props) => {
   const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -34,17 +35,6 @@ const Main = (props) => {
   )
 }
 
-const NoRoute = (props) => {
-  return (
-    <Grid>
-      <RowCol><h1>Esa pagina no existe</h1></RowCol>
-      <RowCol>
-        <button className='link' onClick={() => props.history.goBack()}>Volver</button>
-      </RowCol>
-    </Grid>
-  );
-}
-
 const App = () => (
   <main>
     <BrowserRouter>

src/views/Disc.jsx

@@ -81,7 +81,7 @@ const Disc = (props) => {
     return <Entity title={disc.title}
       subtitle={subtitle}
       cover={<CoverArt disc={disc} popup={true} size={4}/>}
-      type={'disc'}
+      type={'release-group'}
       entity={disc.id}
     />
   }else {

src/views/Song.jsx

@@ -22,8 +22,7 @@ const Song = (props) => {
     subtitle = <span>[{toDuration(song.length)}]</span>
   }
 
-  return <Entity title={song.title} subtitle={subtitle} type={'song'} entity={song.id}/>
-
+  return <Entity title={song.title} subtitle={subtitle} type={'recording'} entity={song.id}/>
 }
 
 export const SongView = (props) => {

src/views/User.jsx

@@ -3,16 +3,178 @@ import {Grid, RowCol} from "../components/Grid";
 import {getUser} from "../services/user_service";
 import {capitalize} from "../services/utils";
 import {SocialNetworks} from "../components/SocialNetworks";
+import {EntityList} from "../components/EntityList";
+import {get_list} from "../services/list_service";
+import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
+import {NoRoute} from "../components/NoRoute";
+import {getArtist, getDisc, getRelease, getSong} from "../services/entity_service";
+import {CoverArt} from "../components/CoverArt";
+
+const ArtistsList = (props) => {
+  const ids = props.ids;
+  const [artists, setArtists] = useState([]);
+
+  if (artists.length === 0 && ids != null && ids.length > 0) {
+    Promise.allSettled(ids.map(id => getArtist(id))).then((responses) => {
+      const values = responses.filter((e) => e.status === 'fulfilled').map((e) => e.value)
+      setArtists(values)
+    })
+  }
+
+  console.log(artists);
+
+  const items = artists.map((artist) => ({
+    'cover': null,
+    'link': `/artist/${artist.id}`,
+    'title': artist.name,
+    'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
+  }))
+
+  const list = [{'items': items}]
+
+  return <EntityList list={list}/>;
+}
+
+const ReleasesList = (props) => {
+  const ids = props.ids;
+  const [releases, setReleases] = useState([]);
+
+  if (releases.length === 0 && ids != null && ids.length > 0) {
+    Promise.allSettled(ids.map(id => getRelease(id))).then((responses) => {
+      const values = responses.filter((e) => e.status === 'fulfilled').map((e) => e.value)
+      setReleases(values)
+    })
+  }
+
+  const items = releases.map((release) => ({
+    'cover': (<CoverArt release={release} size={3}/>),
+    'link': `/release/${release.id}`,
+    'title': release.title,
+    'subtitle': [release.artist.name, release.date].filter(Boolean).join(' - ')
+  }))
+
+  const list = [{'items': items}]
+
+  return <EntityList list={list}/>;
+}
+
+const DiscsList = (props) => {
+  const ids = props.ids;
+  const [discs, setDiscs] = useState([]);
+
+  if (discs.length === 0 && ids != null && ids.length > 0) {
+    Promise.allSettled(ids.map(id => getDisc(id))).then((responses) => {
+      const values = responses.filter((e) => e.status === 'fulfilled').map((e) => e.value)
+      setDiscs(values)
+    })
+  }
+
+  const items = discs.map((disc) => ({
+    'cover': (<CoverArt disc={disc} size={3}/>),
+    'link': `/disc/${disc.id}`,
+    'title': disc.title,
+    'subtitle': disc.artist.name
+  }))
+
+  const list = [{'items': items}]
+
+  return <EntityList list={list}/>;
+}
+
+const SongsList = (props) => {
+  const ids = props.ids;
+  const [songs, setSongs] = useState([]);
+
+  if (songs.length === 0 && ids != null && ids.length > 0) {
+    Promise.allSettled(ids.map(id => getSong(id))).then((responses) => {
+      const values = responses.filter((e) => e.status === 'fulfilled').map((e) => e.value)
+      setSongs(values)
+    })
+  }
+
+  const items = songs.map((disc) => ({
+    'cover': null,
+    'link': `/song/${disc.id}`,
+    'title': disc.title,
+    'subtitle': disc.artist.name
+  }))
+
+  const list = [{'items': items}]
+
+  return <EntityList list={list}/>;
+}
+
+const ListTabs = (props) => {
+  const [selected, setSelected] = useState('artist')
+
+  const nameToIndex = (name) => {
+    if (name === 'artist') return 0
+    if (name === 'disc') return 1
+    if (name === 'release') return 2
+    if (name === 'song') return 3
+    else return 0;
+  }
+
+  const indexToName = (index) => {
+    if (index === 0) return 'artist'
+    if (index === 1) return 'disc'
+    if (index === 2) return 'release'
+    if (index === 3) return 'song'
+    else return 'artist';
+  }
+
+  const handleSelect = (index) => {
+    setSelected(indexToName(index))
+  }
+
+  return (
+    <Tabs selectedIndex={nameToIndex(selected)} onSelect={handleSelect}>
+      <TabList className='tabs'>
+        <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
+        <Tab className='tab' selectedClassName='selected'>Discos</Tab>
+        <Tab className='tab' selectedClassName='selected'>Lanzamientos</Tab>
+        <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
+      </TabList>
+      <TabPanel><ArtistsList ids={props.artists}/></TabPanel>
+      <TabPanel><DiscsList ids={props.discs}/></TabPanel>
+      <TabPanel><ReleasesList ids={props.releases}/></TabPanel>
+      <TabPanel><SongsList ids={props.songs}/></TabPanel>
+    </Tabs>
+  )
+}
+
+const UserList = (props) => {
+  if (props.list === null) return null;
+
+  const artist_list = props.list.filter((item) => item.entity.type === 'artist').map((item => item.entity.mbid));
+  const disc_list = props.list.filter((item) => item.entity.type === 'release-group').map((item => item.entity.mbid));
+  const release_list = props.list.filter((item) => item.entity.type === 'release').map((item => item.entity.mbid));
+  const song_list = props.list.filter((item) => item.entity.type === 'recording').map((item => item.entity.mbid));
+
+  return (
+    <div>
+      <h2>Lista</h2>
+      <ListTabs artists={artist_list} discs={disc_list} releases={release_list} songs={song_list}/>
+    </div>
+  )
+}
 
 export const UserView = (props) => {
   const [user, setUser] = useState(null);
+  const [list, setList] = useState(null);
 
   if (user === null) {
     getUser(null, props.match.params.id).then(setUser)
   }
 
   if (user === null) {
-    return null;
+    return <NoRoute/>
+  }
+
+  if (list === null) {
+    get_list(user.id).then((response) => setList(response.data.list)).catch((error) => {
+      console.log(error)
+    })
   }
 
   return (
@@ -24,7 +186,7 @@ export const UserView = (props) => {
         <SocialNetworks user={user.id}/>
       </RowCol>
       <RowCol>
-        <h2>Lista</h2>
+        <UserList list={list}/>
       </RowCol>
     </Grid>
   )