Una vista de "Populares" en Main, mas que nada para figurar

src/components/EntityList.scss

@@ -1,5 +1,8 @@
 // Base
-.entity-list {
+ul.entity-list {
+  margin-top: 1em;
+  margin-bottom: 2em;
+
   .entity-header{
     font-size: 1.2em;
     font-weight: 500;

src/components/SearchBar.jsx

@@ -14,8 +14,8 @@ export const SearchBar = (props) => {
     };
 
     return (
-        <div className='input-with-icon'>
+        <div className='searchbar input-with-icon'>
-            <input className='full-width' value={query} onKeyUp={handleSubmit('input')} onChange={handleChange}/>
+            <input className='full-width big' value={query} onKeyUp={handleSubmit('input')} onChange={handleChange}/>
             <button onClick={handleSubmit('button')}><FaSearch/></button>
         </div>
     );

src/index.jsx

@@ -12,6 +12,7 @@ import {Search} from './views/Search';
 import {ArtistView} from "./views/Artist";
 import {DiscView} from "./views/Disc";
 import {ReleaseView} from "./views/Release";
+import {Recomended} from "./views/Recomended";
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -20,6 +21,7 @@ const Main = (props) => {
         <Fragment>
             <h1>Busca la musica que te gusta!</h1>
             <SearchBar history={props.history} onQueryChanged={navigate}/>
+            <Recomended/>
         </Fragment>
     )
 }

src/services/entity_service.js

@@ -38,6 +38,13 @@ export async function getReleaseSongs(mbid) {
   return response.data
 }
 
+export async function getSong(mbid) {
+  const url = `${baseUrl}/recording/${mbid}`;
+  const response = await axios.get(url);
+  console.log(response.data);
+  return response.data;
+}
+
 export async function getDiscCoverArt(mbid) {
   const url = `${baseUrl}/disc/${mbid}/coverart`;
   const response = await axios.get(url);

src/styles/main.scss

@@ -124,6 +124,11 @@ figure {
 
 svg {
   display: block;
+  margin: auto;
+}
+
+.container {
+  margin-bottom: 1em;
 }
 
 /* Navbar */
@@ -200,6 +205,25 @@ ul.pagination {
   }
 }
 
+.searchbar {
+  margin-bottom: 2em;
+  margin-top: 1em;
+
+  button{
+    width: 4em;
+    text-align: center;
+    svg {
+      height: 50%;
+      width: auto;
+    }
+  }
+}
+
+input.big {
+  font-size: var(--font-4);
+  font-weight: 500;
+}
+
 /* Input with icon */
 .input-with-icon {
   display: flex;

src/views/Recomended.jsx

@@ -0,0 +1,99 @@
+import React, {useState} from 'react';
+
+import {getArtist, getDisc, getSong} from '../services/entity_service';
+
+import {EntityList} from '../components/EntityList';
+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']
+  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) => ({
+      '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 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) => ({
+      'cover': <CoverArt disc={disc}/>,
+      'link': `/disc/${disc.id}`,
+      'title': disc.title,
+      'subtitle': disc.artist.name
+    }));
+    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) => ({
+      'cover': null,
+      'link': `/song/${song.id}`,
+      'title': song.title,
+      'subtitle': song.artist.name
+    }));
+    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>
+  )
+}