Usando componentes funcionales

src/components/Search.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment} from "react";
+import React, {Fragment, useEffect, useState} from "react";
 import queryString from "query-string";
 
 import {searchArtist, searchDisc, searchSong} from "../services/search_service";
@@ -9,35 +9,26 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 
-class CoverArt extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            loading: true
-        }
-    }
+const CoverArt = (props) => {
+    const [loading, setLoading] = useState(true);
 
-    handleLoad = () => {
-        this.setState({loading: false})
-    };
+    const handleLoad = () => setLoading(false)
 
-    render() {
-        if (this.props.cover_art) {
-            if (this.state.loading) {
+    if (props.cover_art) {
+        if (loading) {
             return (
                 <Fragment>
-                        <img src={this.props.cover_art.image} className={'coverart loading'} alt={this.props.alt} onLoad={this.handleLoad}/>
+                    <img src={props.cover_art.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
                     <DiscSVG className='coverart'/>
                 </Fragment>
             )
         } else {
-                return <img src={this.props.cover_art.image} className={'coverart'} alt={this.props.alt}/>
+            return <img src={props.cover_art.image} className={'coverart'} alt={props.alt}/>
         }
     } else {
         return <DiscSVG className='coverart'/>
     }
 }
-}
 
 const SearchPlaceholder = (props) => {
     const className = props.className + ' pulsating';
@@ -48,9 +39,8 @@ const SearchPlaceholder = (props) => {
     )
 }
 
-class SearchSong extends React.Component {
-    render() {
-        const song = this.props.song;
+const SearchSong = (props) => {
+    const song = props.song;
     return (
         <li className='song'>
             <Link to={`/song/${song.id}`}>
@@ -62,82 +52,61 @@ class SearchSong extends React.Component {
         </li>
     )
 }
+
+const SearchSongs = (props) => {
+    const [songs, setSongs] = useState(null);
+    const [paginate, setPaginate] = useState(null);
+    const [page, setPage] = useState(props.page ? props.page : 1);
+
+    useEffect(() => {
+        setSongs(null);
+        setPaginate(null);
+        loadSongs(props.query, page)
+    }, [props.query, page]);
+
+    const makeLink = page => `/search/song?query=${props.query}&page=${page}`;
+
+    const handlePageChange = page => {
+        setSongs(null);
+        setPage(page);
+        props.onPageChange(page);
     }
 
-class SearchSongs extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {songs: null, paginate: null, page: this.props.page ? this.props.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.props.query}&page=${page}`;
-
-    handlePageChange = page => {
-        this.setState({songs: null, page: page})
-        this.props.onPageChange(page);
-    }
-
-    loadSongs = (query, page) => {
+    const loadSongs = (query, page) => {
         page = page ? page : 1;
 
         searchSong(query, page).then((response) => {
-            this.setState({
-                songs: response.recordings,
-                paginate: response.paginate
-            })
+            setSongs(response.recordings);
+            setPaginate(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 songsComponent = <SearchPlaceholder className='song'/>;
+    if (songs) {
+        songsComponent = 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;
+    let paginateComponent;
+    if (paginate) {
+        const total = paginate.total;
+        const currentPage = paginate.current_page;
+        const pageLimit = paginate.per_page;
 
-            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+        paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
     }
 
     return (
         <Fragment>
             <ul className='entity_list'>
-                    {songs}
+                {songsComponent}
             </ul>
-                {paginate}
+            {paginateComponent}
         </Fragment>
     )
-    };
 }
 
-class SearchDisc extends React.Component {
-    getReleaseYear = (release) => {
-        const releaseDate = new Date(release);
-        return (
-            <span className='release-date'>{releaseDate.getFullYear()}</span>
-        )
-    }
-
-    render() {
-        const disc = this.props.disc;
+const SearchDisc = (props) => {
+    const disc = props.disc;
     return (
         <li className='disc'>
             <Link to={`/disc/${disc.id}`}>
@@ -150,75 +119,61 @@ class SearchDisc extends React.Component {
         </li>
     )
 }
+
+const SearchDiscs = (props) => {
+    const [discs, setDiscs] = useState(null);
+    const [paginate, setPaginate] = useState(null);
+    const [page, setPage] = useState(null);
+
+    useEffect(_ => {
+        setDiscs(null)
+        setPaginate(null)
+        loadDiscs(props.query, page)
+    }, [props.query, page])
+
+    const makeLink = page => `/search/disc?query=${props.query}&page=${page}`;
+
+    const handlePageChange = page => {
+        setDiscs(null);
+        setPage(page);
+        props.onPageChange(page);
     }
 
-class SearchDiscs extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {discs: null, paginate: null, page: this.props.page ? this.props.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.props.query}&page=${page}`;
-
-    handlePageChange = page => {
-        this.setState({discs: null, page: page})
-        this.props.onPageChange(page);
-    }
-
-    loadDiscs = (query, page) => {
+    const loadDiscs = (query, page) => {
         page = page ? page : 1;
 
         searchDisc(query, page).then((response) => {
-            this.setState({
-                discs: response.discs,
-                paginate: response.paginate
-            })
+            setDiscs(response.discs);
+            setPaginate(response.paginate);
         })
     };
 
-    render = () => {
-        let discs = <SearchPlaceholder className='disc'/>;
-        if (this.state.discs) {
-            discs = this.state.discs.map((disc) => <SearchDisc key={disc.id} disc={disc}/>);
+    let discsComponent = <SearchPlaceholder className='disc'/>;
+    if (discs) {
+        discsComponent = 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;
+    let paginateComponent;
+    if (paginate) {
+        const total = paginate.total;
+        const currentPage = paginate.current_page;
+        const pageLimit = paginate.per_page;
 
-            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+        paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
     }
 
     return (
         <Fragment>
             <ul className='entity_list'>
-                    {discs}
+                {discsComponent}
             </ul>
-                {paginate}
+            {paginateComponent}
         </Fragment>
     )
-    };
 }
 
-class SearchArtist extends React.Component {
-    render() {
-        const artist = this.props.artist;
+const SearchArtist = (props) => {
+    const artist = props.artist;
     return (
         <li className='artist'>
             <Link to={`/artist/${artist.id}`}>
@@ -230,154 +185,135 @@ class SearchArtist extends React.Component {
         </li>
     )
 }
+
+const SearchArtists = (props) => {
+    const [artists, setArtist] = useState(null);
+    const [paginate, setPaginate] = useState(null);
+    const [page, setPage] = useState(props.page ? props.page : 1);
+
+    useEffect(_ => {
+        setArtist(null)
+        setPaginate(null)
+        loadArtists(props.query, page)
+    }, [props.query, page])
+
+    const makeLink = page => `/search/artist?query=${props.query}&page=${page}`;
+
+    const handlePageChange = page => {
+        setArtist(null);
+        setPage(page);
+        props.onPageChange(page);
     }
 
-class SearchArtists extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {artists: null, paginate: null, page: this.props.page ? this.props.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) {
-            this.loadArtists(this.props.query, this.state.page)
-
-            if (prevState.page !== this.state.page) {
-                this.setState({artists: null})
-            } else {
-                this.setState({artists: null, paginate: null})
-            }
-        }
-    };
-
-    makeLink = page => `/search/artist?query=${this.props.query}&page=${page}`;
-
-    handlePageChange = page => {
-        this.setState({artists: null, page: page})
-        this.props.onPageChange(page);
-    }
-
-    loadArtists = (query, page) => {
+    const loadArtists = (query, page) => {
         page = page ? page : 1;
 
         searchArtist(query, page).then((response) => {
-            this.setState({
-                artists: response.artists,
-                paginate: response.paginate
-            })
+            setArtist(response.artists);
+            setPaginate(response.paginate);
         })
     };
 
-    render = () => {
-        let artists = <SearchPlaceholder className='artist'/>;
-        if (this.state.artists) {
-            artists = this.state.artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
+    let artistsContent = <SearchPlaceholder className='artist'/>;
+    if (artists) {
+        artistsContent = artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
     }
 
-        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;
+    let paginateContent;
+    if (paginate) {
+        const total = paginate.total;
+        const currentPage = paginate.current_page;
+        const pageLimit = paginate.per_page;
 
-            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
+        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
     }
 
     return (
         <Fragment>
             <ul className='entity_list'>
-                    {artists}
+                {artistsContent}
             </ul>
-                {paginate}
+            {paginateContent}
         </Fragment>
     )
-    };
 }
 
-class SearchTabs extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleSelect = this.handleSelect.bind(this);
-    }
-
-    nameToIndex(name) {
+const SearchTabs = (props) => {
+    const nameToIndex = (name) => {
         if (name === 'artist') return 0
         if (name === 'disc') return 1
         if (name === 'song') return 2
         else return 0;
     }
 
-    indexToName(index) {
+    const indexToName = (index) => {
         if (index === 0) return 'artist'
         if (index === 1) return 'disc'
         if (index === 2) return 'song'
         else return 'artist';
     }
 
-    handleSelect(index) {
-        if (this.props.onTabChanged) this.props.onTabChanged(this.indexToName(index))
+    const handleSelect = (index) => {
+        props.onTabChanged(indexToName(index))
     }
 
-    handlePageChange = (who) => (index) => {
-        this.props.onPageChange(who, index);
-    }
+    const handlePageChange = (who) => (index) => props.onPageChange(who, index);
 
-    render() {
     return (
-            <Tabs selectedIndex={this.nameToIndex(this.props.selected)} onSelect={this.handleSelect}>
+        <Tabs selectedIndex={nameToIndex(props.selected)} onSelect={handleSelect}>
             <TabList className='tabs'>
                 <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
                 <Tab className='tab' selectedClassName='selected'>Discos</Tab>
                 <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
             </TabList>
-                <TabPanel><SearchArtists query={this.props.query} page={this.props.page} onPageChange={this.handlePageChange('artist')}/></TabPanel>
-                <TabPanel><SearchDiscs query={this.props.query} page={this.props.page} onPageChange={this.handlePageChange('disc')}/></TabPanel>
-                <TabPanel><SearchSongs query={this.props.query} page={this.props.page} onPageChange={this.handlePageChange('song')}/></TabPanel>
+            <TabPanel><SearchArtists query={props.query} page={props.page} onPageChange={handlePageChange('artist')}/></TabPanel>
+            <TabPanel><SearchDiscs query={props.query} page={props.page} onPageChange={handlePageChange('disc')}/></TabPanel>
+            <TabPanel><SearchSongs query={props.query} page={props.page} onPageChange={handlePageChange('song')}/></TabPanel>
         </Tabs>
     )
 }
-}
 
-export class Search extends React.Component {
-    constructor(props) {
-        super(props);
-        const parsed = queryString.parse(this.props.location.search);
-        this.state = {
-            who: this.props.match.params['who'] ? this.props.match.params['who'] : 'artist',
-            query: parsed.query,
-            page: !isNaN(+parsed.page) ? +parsed.page : 1,
+export const Search = (props) => {
+    const parsedParams = queryString.parse(props.location.search);
+    const [who, setWho] = useState(props.match.params['who'] ? props.match.params['who'] : 'artist')
+    const [query, setQuery] = useState(parsedParams.query)
+    const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
+
+    const navigateTo = (who, query, page) => props.history.push(`/search/${who}?query=${query}&page=${page}`);
+
+    const handleQueryChange = query => {
+        setQuery(query);
+        setPage(1);
+        navigateTo(who, query, 1)
     };
 
-        console.log(this.state);
-    }
-
-    navigateToState = () => {
-        const link = `/search/${this.state.who}?query=${this.state.query}&page=${this.state.page}`;
-        this.props.history.push(link);
+    const handleTabChange = who => {
+        setWho(who);
+        setPage(1)
+        navigateTo(who, query, 1)
     };
 
-    handleQueryChange = query => {
-        this.setState({query: query, page: 1}, this.navigateToState);
-    };
+    const handlePageChange = (who, page) => {
+        setWho(who);
+        setPage(page);
+        navigateTo(who, query, page);
 
-    handleTabChange = name => {
-        this.setState({who: name, page: 1}, this.navigateToState);
-    };
-
-    handlePageChange = (who, page) => {
-        this.setState({who: who, page: page}, this.navigateToState);
         window.scroll({left: 0, top: 0, behavior: 'smooth'});
     };
 
-    render = () => (
+    const content = _ => {
+        if (query) {
+            return <SearchTabs query={query} onTabChanged={handleTabChange} onPageChange={handlePageChange} selected={who} page={page}/>
+        } else {
+            return null;
+        }
+    }
+
+    return (
         <Fragment>
             <h1>Búsqueda</h1>
-            <SearchBar query={this.state.query} onQueryChanged={this.handleQueryChange} history={this.props.history}/>
-            {this.state.query &&
-                <SearchTabs query={this.state.query} onTabChanged={this.handleTabChange} onPageChange={this.handlePageChange} selected={this.state.who} page={this.state.page}/>
-            }
+            <SearchBar query={query} onQueryChanged={handleQueryChange} history={props.history}/>
+            {content()}
         </Fragment>
     );
 }