Songs!

src/components/Search.jsx

@@ -9,12 +9,92 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 
-const SearchPlaceholder = () => (
+const SearchPlaceholder = (props) => (
     <Fragment>
-        {[...Array(10)].map((e, i) => <li key={i} className='entity'/>)}
+        {[...Array(10)].map((e, i) => <li key={i} className={props.className}/>)}
     </Fragment>
 )
 
+class SearchSong extends React.Component {
+    render() {
+        const song = this.props.song;
+        return (
+            <li className='song'>
+                <Link to={`/song/${song.id}`}>
+                    <div class='description'>
+                        <span>{song.title}</span>
+                        <span className='small'>{song.artist[0].name}</span>
+                    </div>
+                </Link>
+            </li>
+        )
+    }
+}
+
+class SearchSongs extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {songs: null, paginate: null, page: 1}
+    }
+
+    componentDidMount = _ => this.loadSongs(this.props.query, this.state.page);
+
+    componentDidUpdate = (prevProps, prevState) => {
+        if (prevProps.query !== this.props.query || prevState.page !== this.state.page) {
+            this.loadSongs(this.props.query, this.state.page)
+
+            if (prevState.page !== this.state.page) {
+                this.setState({songs: null})
+            } else {
+                this.setState({songs: null, paginate: null})
+            }
+        }
+    };
+
+    makeLink = page => `/search/song?query=${this.state.query}&page=${page}`;
+
+    handlePageChange = page => {
+        this.setState({songs: null, page: page})
+        this.props.onPageChange(page);
+    }
+
+    loadSongs = (query, page) => {
+        page = page ? page : 1;
+
+        searchSong(query, page).then((response) => {
+            this.setState({
+                songs: response.recordings,
+                paginate: response.paginate
+            })
+        })
+    };
+
+    render = () => {
+        let songs = <SearchPlaceholder className='song'/>;
+        if (this.state.songs) {
+            songs = this.state.songs.map((song) => <SearchSong key={song.id} song={song}/>);
+        }
+
+        let paginate;
+        if (this.state.paginate) {
+            const total = this.state.paginate.total;
+            const currentPage = this.state.paginate.current_page;
+            const pageLimit = this.state.paginate.per_page;
+
+            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+        }
+
+        return (
+            <Fragment>
+                <ul className='entity_list'>
+                    {songs}
+                </ul>
+                {paginate}
+            </Fragment>
+        )
+    };
+}
+
 class SearchDisc extends React.Component {
     render() {
         const disc = this.props.disc;
@@ -71,7 +151,7 @@ class SearchDiscs extends React.Component {
     };
 
     render = () => {
-        let discs = <SearchPlaceholder/>;
+        let discs = <SearchPlaceholder className='disc'/>;
         if (this.state.discs) {
             discs = this.state.discs.map((disc) => <SearchDisc key={disc.id} disc={disc}/>);
         }
@@ -151,7 +231,7 @@ class SearchArtists extends React.Component {
     };
 
     render = () => {
-        let artists = <SearchPlaceholder/>;
+        let artists = <SearchPlaceholder className='artist'/>;
         if (this.state.artists) {
             artists = this.state.artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
         }
@@ -214,7 +294,7 @@ class SearchTabs extends React.Component {
                 </TabList>
                 <TabPanel><SearchArtists query={this.props.query} onPageChange={this.handlePageChange('artist')}/></TabPanel>
                 <TabPanel><SearchDiscs query={this.props.query} onPageChange={this.handlePageChange('disc')}/></TabPanel>
-                <TabPanel><p>Canciones</p></TabPanel>
+                <TabPanel><SearchSongs query={this.props.query} onPageChange={this.handlePageChange('song')}/></TabPanel>
             </Tabs>
         )
     }

src/styles/main.scss

@@ -127,7 +127,7 @@ ul.entity_list {
   display: flex;
   flex-direction: column;
 
-  li.artist, li.disc {
+  li.artist, li.disc, li.song {
     border: 1px var(--gray-2) solid;
 
     &:not(:first-child) {
@@ -143,6 +143,7 @@ ul.entity_list {
       text-decoration: none;
       color: var(--black);
       align-items: center;
+      height: 100%;
 
       .description {
         display: flex;
@@ -160,24 +161,26 @@ ul.entity_list {
   }
 
   li.artist {
-    a {
     height: 4rem;
   }
-  }
 
   li.disc {
-
-    a {
     height: 14rem;
 
+    a {
       .coverart {
         object-fit: cover;
         width: 200px;
         height: 200px;
         margin: 1rem;
+        border: 1px solid var(--gray-2)
       }
     }
   }
+
+  li.song {
+    height: 4rem;
+  }
 }
 
 

src/svg/disc.svg

@@ -1,7 +1,6 @@
 <svg version="1.1"  width="450" height="450" xmlns="http://www.w3.org/2000/svg">
     <rect width="100%" height="100%" fill="rgb(230, 230, 230)"/>
     <circle cx="50%" cy="50%" r="45%" fill="rgb(250, 250, 250)"/>
-    <circle cx="50%" cy="50%" r="13%" fill="rgb(230, 230, 230)"/>
-    <circle cx="50%" cy="50%" r="12%" fill="rgb(250, 250, 250)"/>
-    <circle cx="50%" cy="50%" r="8%" fill="rgb(230, 230, 230)"/>
+    <circle cx="50%" cy="50%" r="18%" fill="rgb(230, 230, 230)"/>
+    <circle cx="50%" cy="50%" r="7%" fill="rgb(250, 250, 250)"/>
 </svg>