musiclist-client/src/components/Search.jsx

import React, {Fragment, useEffect, useState} from "react";
import queryString from "query-string";

import {searchArtist, searchDisc, searchSong} from "../services/search_service";
import {SearchBar} from "./SearchBar";
import {Paginate} from "./Paginate";
import {CoverArt} from "./CoverArt";
import {EntityList} from "./EntityList";
import {Tab, TabList, TabPanel, Tabs} from "react-tabs";

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

    const loadSongs = (query, page) => {
        page = page ? page : 1;

        searchSong(query, page).then((response) => {
            setSongs(response.recordings);
            setPaginate(response.paginate);
        })
    };


    let songsComponent = <Fragment/>;
    if (songs) {
        const items = songs.map((song) => {
          return {
            'cover': null,
            'link': `/song/${song.id}`,
            'title': song.title,
            'subtitle': song.artist.name
          };
        });
        songsComponent = <EntityList items={items}/>
    }

    let paginateComponent;
    if (paginate) {
        const total = paginate.total;
        const currentPage = paginate.current_page;
        const pageLimit = paginate.per_page;

        paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
    }

    return (
        <Fragment>
            <ul className='entity_list'>
                {songsComponent}
            </ul>
            {paginateComponent}
        </Fragment>
    )
}

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

    const loadDiscs = (query, page) => {
        page = page ? page : 1;

        searchDisc(query, page).then((response) => {
            setDiscs(response.discs);
            setPaginate(response.paginate);
        })
    };

    let discsComponent = <Fragment/>;
    if (discs) {
        const items = discs.map((disc) => ({
          'cover': <CoverArt disc={disc}/>,
          'link': `/disc/${disc.id}`,
          'title': disc.title,
          'subtitle': disc.artist.name
        }));
        discsComponent = <EntityList items={items}/>
    }

    let paginateComponent;
    if (paginate) {
        const total = paginate.total;
        const currentPage = paginate.current_page;
        const pageLimit = paginate.per_page;

        paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
    }

    return (
        <Fragment>
            <ul className='entity_list'>
                {discsComponent}
            </ul>
            {paginateComponent}
        </Fragment>
    )
}

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

    const loadArtists = (query, page) => {
        page = page ? page : 1;

        searchArtist(query, page).then((response) => {
            setArtist(response.artists);
            setPaginate(response.paginate);
        })
    };

    let artistsContent = <Fragment/>;
    if (artists) {
        const items = artists.map((artist) => ({
          'cover': null,
          'link': `/artist/${artist.id}`,
          'title': artist.name,
          'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
        }));
        artistsContent = <EntityList items={items}/>
    }

    let paginateContent;
    if (paginate) {
        const total = paginate.total;
        const currentPage = paginate.current_page;
        const pageLimit = paginate.per_page;

        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
    }

    return (
        <Fragment>
            <ul className='entity_list'>
                {artistsContent}
            </ul>
            {paginateContent}
        </Fragment>
    )
}

const SearchTabs = (props) => {
    const nameToIndex = (name) => {
        if (name === 'artist') return 0
        if (name === 'disc') return 1
        if (name === 'song') return 2
        else return 0;
    }

    const indexToName = (index) => {
        if (index === 0) return 'artist'
        if (index === 1) return 'disc'
        if (index === 2) return 'song'
        else return 'artist';
    }

    const handleSelect = (index) => {
        props.onTabChanged(indexToName(index))
    }

    const handlePageChange = (who) => (index) => props.onPageChange(who, index);

    return (
        <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={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 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)
    };

    const handleTabChange = who => {
        setWho(who);
        setPage(1)
        navigateTo(who, query, 1)
    };

    const handlePageChange = (who, page) => {
        setWho(who);
        setPage(page);
        navigateTo(who, query, page);
    };

    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={query} onQueryChanged={handleQueryChange} history={props.history}/>
            {content()}
        </Fragment>
    );
}