Discos!

src/components/Search.jsx

@@ -1,26 +1,111 @@
 import React, {Fragment} from "react";
 import queryString from "query-string";
 
-import {searchArtist} from "../services/search_service";
+import {searchArtist, searchDisc, searchSong} from "../services/search_service";
 import SearchBar from "./SearchBar";
 import Paginate from "./Paginate";
 import {Link} from "react-router-dom";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
+import {ReactComponent as DiscSVG} from "../svg/disc.svg";
+
 const SearchPlaceholder = () => (
     <Fragment>
         {[...Array(10)].map((e, i) => <li key={i} className='entity'/>)}
     </Fragment>
 )
 
+class SearchDisc extends React.Component {
+    render() {
+        const disc = this.props.disc;
+        return (
+            <li className='disc'>
+                <Link to={`/disc/${disc.id}`}>
+                    {disc.cover_art ? <img src={disc.cover_art.image} className='coverart' alt={`Cover del disco: ${disc.title}`}/> : <DiscSVG className='coverart'/>}
+                    <div class='description'>
+                        <span>{disc.title}</span>
+                        <span className='small'>{disc.artist[0].name}</span>
+                    </div>
+                </Link>
+            </li>
+        )
+    }
+}
+
+class SearchDiscs extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {discs: null, paginate: null, page: 1}
+    }
+
+    componentDidMount = _ => this.loadDiscs(this.props.query, this.state.page);
+
+    componentDidUpdate = (prevProps, prevState) => {
+        if (prevProps.query !== this.props.query || prevState.page !== this.state.page) {
+            this.loadDiscs(this.props.query, this.state.page)
+
+            if (prevState.page !== this.state.page) {
+                this.setState({discs: null})
+            } else {
+                this.setState({discs: null, paginate: null})
+            }
+        }
+    };
+
+    makeLink = page => `/search/disc?query=${this.state.query}&page=${page}`;
+
+    handlePageChange = page => {
+        this.setState({discs: null, page: page})
+        this.props.onPageChange(page);
+    }
+
+    loadDiscs = (query, page) => {
+        page = page ? page : 1;
+
+        searchDisc(query, page).then((response) => {
+            this.setState({
+                discs: response.releases,
+                paginate: response.paginate
+            })
+        })
+    };
+
+    render = () => {
+        let discs = <SearchPlaceholder/>;
+        if (this.state.discs) {
+            discs = this.state.discs.map((disc) => <SearchDisc key={disc.id} disc={disc}/>);
+        }
+
+        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'>
+                    {discs}
+                </ul>
+                {paginate}
+            </Fragment>
+        )
+    };
+}
+
 class SearchArtist extends React.Component {
     render() {
         const artist = this.props.artist;
         return (
-            <li className='entity'>
+            <li className='artist'>
                 <Link to={`/artist/${artist.id}`}>
-                    <span>{artist.name}</span>
-                    <span className='small'>{[artist.type, artist.country].filter(Boolean).join(' - ')}</span>
+                    <span className='description'>
+                        <span>{artist.name}</span>
+                        <span className='small'>{[artist.type, artist.country].filter(Boolean).join(' - ')}</span>
+                    </span>
                 </Link>
             </li>
         )
@@ -30,18 +115,18 @@ class SearchArtist extends React.Component {
 class SearchArtists extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { artists: null, paginate: null, page: 1 }
+        this.state = {artists: null, paginate: null, page: 1}
     }
 
     componentDidMount = _ => this.loadArtists(this.props.query, this.state.page);
 
     componentDidUpdate = (prevProps, prevState) => {
-        if(prevProps.query !== this.props.query || prevState.page !== this.state.page) {
+        if (prevProps.query !== this.props.query || prevState.page !== this.state.page) {
             this.loadArtists(this.props.query, this.state.page)
 
-            if(prevState.page !== this.state.page){
+            if (prevState.page !== this.state.page) {
                 this.setState({artists: null})
-            }else{
+            } else {
                 this.setState({artists: null, paginate: null})
             }
         }
@@ -67,12 +152,12 @@ class SearchArtists extends React.Component {
 
     render = () => {
         let artists = <SearchPlaceholder/>;
-        if(this.state.artists) {
-           artists = this.state.artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
+        if (this.state.artists) {
+            artists = this.state.artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
         }
 
         let paginate;
-        if(this.state.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;
@@ -98,16 +183,16 @@ class SearchTabs extends React.Component {
     }
 
     nameToIndex(name) {
-        if(name === 'artist') return 0
-        if(name === 'disc') return 1
-        if(name === 'song') return 2
+        if (name === 'artist') return 0
+        if (name === 'disc') return 1
+        if (name === 'song') return 2
         else return 0;
     }
 
-    indexToName(index){
-        if(index === 0) return 'artist'
-        if(index === 1) return 'disc'
-        if(index === 2) return 'song'
+    indexToName(index) {
+        if (index === 0) return 'artist'
+        if (index === 1) return 'disc'
+        if (index === 2) return 'song'
         else return 'artist';
     }
 
@@ -128,7 +213,7 @@ class SearchTabs extends React.Component {
                     <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
                 </TabList>
                 <TabPanel><SearchArtists query={this.props.query} onPageChange={this.handlePageChange('artist')}/></TabPanel>
-                <TabPanel><p>Discos</p></TabPanel>
+                <TabPanel><SearchDiscs query={this.props.query} onPageChange={this.handlePageChange('disc')}/></TabPanel>
                 <TabPanel><p>Canciones</p></TabPanel>
             </Tabs>
         )