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>
         )
     }