Movidas vistas a una carpeta distinta de components
Realmente no son lo mismo, un componente es reutilizable y se utiliza en vistas, la vista es una composicion distintos componentes :3
This commit is contained in:
Daniel Cortes
266
src/views/Search.jsx
Normal file
266
src/views/Search.jsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import React, {Fragment, useEffect, useState} from "react";
|
||||
import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
|
||||
import queryString from "query-string";
|
||||
|
||||
import {searchArtist, searchDisc, searchSong} from "../services/search_service";
|
||||
|
||||
import {SearchBar} from "../components/SearchBar";
|
||||
import {Paginate} from "../components/Paginate";
|
||||
import {CoverArt} from "../components/CoverArt";
|
||||
import {EntityList} from "../components/EntityList";
|
||||
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user