skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Grid basico :3

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-17 06:37:04 -04:00
parent 104bf6ae8e
commit 201268b06d
3 changed files with 87 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.jsx
View File

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
import './styles/reset.css';
import './styles/main.scss';
import './styles/grid.scss';
import {Nav} from "./components/Nav";
import {SearchBar} from "./components/SearchBar";

32
src/styles/grid.scss Normal file
View File

@@ -0,0 +1,32 @@
.grid {
width: 100%;
padding-left: 1em;
padding-right: 1em;
.row {
display: flex;
& > * {
padding-left: 1em;
padding-right: 1em;
}
.col, col-1 {
flex: 1 0 0%;
}
.col-2 {
flex: 2 0 0%;
}
.col-3 {
flex: 3 0 0%;
}
.col-4 {
flex: 4 0 0%;
}
.col-5 {
flex: 5 0 0%;
}
.col-6 {
flex: 6 0 0%;
}
}
}

98
src/views/Recomended.jsx
View File

@@ -8,15 +8,15 @@ import {CoverArt} from '../components/CoverArt';
const PopularArtists = () => {
const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
'27e2997f-f7a1-4353-bcc4-57b9274fa9a4', '2de794c8-8826-48d0-90e0-6900183ba9e0']
'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));
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) => ({
@@ -25,52 +25,52 @@ const PopularArtists = () => {
'title': artist.name,
'subtitle': [artist.type, artist.country].filter(Boolean).join(' - '),
'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
}));
const list = [{
'items': items
}];
return <EntityList list={list}/>
}
}));
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']
'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));
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) => ({
'cover': <CoverArt disc={disc}/>,
'link': `/disc/${disc.id}`,
'title': disc.title,
'subtitle': disc.artist.name,
'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
}));
const list = [{
'items': items
}];
return <EntityList list={list}/>
}
'link': `/disc/${disc.id}`,
'title': disc.title,
'subtitle': disc.artist.name,
'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
}));
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']
'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));
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) => ({
@@ -79,25 +79,35 @@ const PopularSongs = () => {
'title': song.title,
'subtitle': song.artist.name,
'widget': <span><FaEye class='icon'/> {Math.floor(Math.random() * 1000)}</span>
}));
const list = [{
'items': items
}];
return <EntityList list={list}/>
}
}));
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 (
<div>
<h3>Artistas Populares</h3>
<PopularArtists/>
<h3>Discos Populares</h3>
<PopularDiscs/>
<h3>Canciones Populares</h3>
<PopularSongs/>
<div class='grid'>
<div class='row'>
<div class='col'>
<h3>Artistas Populares</h3>
<PopularArtists/>
</div>
<div class='col'>
<h3>Canciones Populares</h3>
<PopularSongs/>
</div>
</div>
<div className="row">
<div className="col">
<h3>Discos Populares</h3>
<PopularDiscs/>
</div>
</div>
</div>
)
}