121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
import React, {useState} from 'react';
|
|
import {FaEye} from 'react-icons/fa'
|
|
|
|
import {getArtist, getDisc, getSong} from '../services/entity_service';
|
|
|
|
import {EntityList} from '../components/EntityList';
|
|
import {CoverArt} from '../components/CoverArt';
|
|
import {Grid, Row, Col, RowCol} from '../components/Grid';
|
|
|
|
const PopularArtists = () => {
|
|
const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
|
|
'27e2997f-f7a1-4353-bcc4-57b9274fa9a4', '2de794c8-8826-48d0-90e0-6900183ba9e0']
|
|
let [artists, setArtists] = useState(null);
|
|
|
|
if(!artists) {
|
|
Promise.all([getArtist(artistIDs[0]),
|
|
getArtist(artistIDs[1]),
|
|
getArtist(artistIDs[2]),
|
|
getArtist(artistIDs[3])])
|
|
.then(artists => setArtists(artists));
|
|
return <EntityList placeholder={true} size={4}/>
|
|
} else {
|
|
const items = artists.map((artist) => {
|
|
const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
|
|
return {
|
|
'cover': null,
|
|
'link': `/artist/${artist.id}`,
|
|
'title': artist.name,
|
|
'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
|
|
'widget': widget
|
|
}
|
|
});
|
|
const list = [{'items': items}];
|
|
return <EntityList list={list}/>
|
|
}
|
|
}
|
|
|
|
const PopularDiscs = () => {
|
|
const discsIDs = ['f5cc15ea-67a8-3c6b-9887-d45ae13a3156', 'db6a41da-710b-36eb-a288-48b4b1c5b130',
|
|
'd9f1ba4b-dfaf-4961-8f97-63c149b361a0', '495ab548-ef52-4dcf-a226-bc70b1ad7c86']
|
|
let [discs, setDiscs] = useState(null);
|
|
|
|
if(!discs) {
|
|
Promise.all([getDisc(discsIDs[0]),
|
|
getDisc(discsIDs[1]),
|
|
getDisc(discsIDs[2]),
|
|
getDisc(discsIDs[3])])
|
|
.then(discs => setDiscs(discs));
|
|
return <EntityList placeholder={true} size={4}/>
|
|
}else {
|
|
const items = discs.map((disc) => {
|
|
const cover = (<CoverArt disc={disc} size={2}/>);
|
|
const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>)
|
|
return {
|
|
'cover': cover,
|
|
'link': `/disc/${disc.id}`,
|
|
'title': disc.title,
|
|
'subtitle': disc.artist.name,
|
|
'widget': widget
|
|
}
|
|
});
|
|
const list = [{
|
|
'items': items
|
|
}];
|
|
return <EntityList list={list}/>
|
|
}
|
|
}
|
|
|
|
const PopularSongs = () => {
|
|
const songsIDs = ['1e49a0d0-372e-459d-9c53-5d864186bb02', '5892ed7d-fed4-4f00-b72e-af1315fcb62d',
|
|
'4d6473d8-a21b-47c0-9d2e-00d210d68f3a', '92b00514-f535-4b32-99ea-d74b9ccb416b']
|
|
let [songs, setSongs] = useState(null);
|
|
|
|
if(!songs) {
|
|
Promise.all([getSong(songsIDs[0]),
|
|
getSong(songsIDs[1]),
|
|
getSong(songsIDs[2]),
|
|
getSong(songsIDs[3])])
|
|
.then(songs => setSongs(songs));
|
|
return <EntityList placeholder={true} size={4}/>
|
|
}else {
|
|
const items = songs.map((song) => {
|
|
const widget = (<span><FaEye className='icon'/> {Math.floor(Math.random() * 1000)}</span>);
|
|
return {
|
|
'cover': null,
|
|
'link': `/song/${song.id}`,
|
|
'title': song.title,
|
|
'subtitle': song.artist.name,
|
|
'widget': widget
|
|
}
|
|
});
|
|
const list = [{
|
|
'items': items
|
|
}];
|
|
return <EntityList list={list}/>
|
|
}
|
|
}
|
|
|
|
export const Recomended = () => {
|
|
// TODO crear una forma de obtener cosas populares
|
|
// Esto es un por mientras hago todo el resto y la pagina de inicio no se vea tan vacia
|
|
return (
|
|
<Grid>
|
|
<Row>
|
|
<Col>
|
|
<h3>Artistas Populares</h3>
|
|
<PopularArtists/>
|
|
</Col>
|
|
<Col>
|
|
<h3>Canciones Populares</h3>
|
|
<PopularSongs/>
|
|
</Col>
|
|
</Row>
|
|
<RowCol>
|
|
<h3>Discos Populares</h3>
|
|
<PopularDiscs/>
|
|
</RowCol>
|
|
</Grid>
|
|
)
|
|
}
|