diff --git a/src/components/AddToList.jsx b/src/components/AddToList.jsx
index 384dbdc..b7560b2 100644
--- a/src/components/AddToList.jsx
+++ b/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:
diff --git a/src/components/NoRoute.jsx b/src/components/NoRoute.jsx
new file mode 100644
index 0000000..5ca2e78
--- /dev/null
+++ b/src/components/NoRoute.jsx
@@ -0,0 +1,13 @@
+import {Grid, RowCol} from "./Grid";
+import React from "react";
+
+export const NoRoute = (props) => {
+ return (
+
+ Esa pagina no existe
+
+ props.history.goBack()}>Volver
+
+
+ );
+}
diff --git a/src/index.jsx b/src/index.jsx
index 7328e10..318628c 100644
--- a/src/index.jsx
+++ b/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 (
-
- Esa pagina no existe
-
- props.history.goBack()}>Volver
-
-
- );
-}
-
const App = () => (
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index 40c9e1a..3623c6a 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -81,7 +81,7 @@ const Disc = (props) => {
return }
- type={'disc'}
+ type={'release-group'}
entity={disc.id}
/>
}else {
diff --git a/src/views/Song.jsx b/src/views/Song.jsx
index a6dd29d..bbd45b4 100644
--- a/src/views/Song.jsx
+++ b/src/views/Song.jsx
@@ -22,8 +22,7 @@ const Song = (props) => {
subtitle = [{toDuration(song.length)}]
}
- return
-
+ return
}
export const SongView = (props) => {
diff --git a/src/views/User.jsx b/src/views/User.jsx
index a7665fe..7837b37 100644
--- a/src/views/User.jsx
+++ b/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 ;
+}
+
+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': (),
+ 'link': `/release/${release.id}`,
+ 'title': release.title,
+ 'subtitle': [release.artist.name, release.date].filter(Boolean).join(' - ')
+ }))
+
+ const list = [{'items': items}]
+
+ return ;
+}
+
+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': (),
+ 'link': `/disc/${disc.id}`,
+ 'title': disc.title,
+ 'subtitle': disc.artist.name
+ }))
+
+ const list = [{'items': items}]
+
+ return ;
+}
+
+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 ;
+}
+
+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 (
+
+
+ Artistas
+ Discos
+ Lanzamientos
+ Canciones
+
+
+
+
+
+
+ )
+}
+
+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 (
+
+
Lista
+
+
+ )
+}
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
+ }
+
+ 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) => {
- Lista
+
)