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
@@ -1,108 +0,0 @@
|
||||
import React, {Fragment, useEffect, useState} from 'react'
|
||||
import {getArtist, getArtistDiscs} from "../services/entity_service";
|
||||
import {CoverArt} from './CoverArt';
|
||||
import {Paginate} from "./Paginate";
|
||||
import {EntityList} from "./EntityList";
|
||||
import {Entity} from "./Entity";
|
||||
import queryString from "query-string";
|
||||
|
||||
|
||||
const Discs = (props) => {
|
||||
const discs = props.discs ? props.discs : null;
|
||||
const paginate = props.paginate ? props.paginate : null;
|
||||
|
||||
const handlePageChanged = (page) => {
|
||||
props.onPageChanged(page);
|
||||
}
|
||||
|
||||
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} grid={true}/>
|
||||
}
|
||||
|
||||
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={handlePageChanged} makeLink={props.makeLink}/>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='discs'>
|
||||
<h2>Discos</h2>
|
||||
{discsComponent}
|
||||
{paginateContent}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Artist = (props) => {
|
||||
const artist = props.artist;
|
||||
if (artist){
|
||||
return <Entity title={artist.name}
|
||||
subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
|
||||
tags={artist.tags.map((tag) => (tag.name))}
|
||||
buttonText='Agregar a mi list'/>
|
||||
}else {
|
||||
return <Fragment></Fragment>
|
||||
}
|
||||
}
|
||||
|
||||
export const ArtistView = (props) => {
|
||||
const parsedParams = queryString.parse(props.location.search);
|
||||
|
||||
const [artist, setArtist] = useState(null);
|
||||
const [discs, setDiscs] = useState(null);
|
||||
const [discsPaginate, setDiscsPaginate] = useState(null);
|
||||
const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
|
||||
|
||||
const mbid = props.match.params.mbid;
|
||||
|
||||
useEffect(() => {
|
||||
if (mbid) {
|
||||
getArtist(mbid).then((result) => setArtist(result));
|
||||
getArtistDiscs(mbid, page, 16).then((result) => {
|
||||
setDiscs(result.discs);
|
||||
setDiscsPaginate(result.paginate);
|
||||
});
|
||||
}
|
||||
}, [mbid, page])
|
||||
|
||||
const makeLink = (page) => {
|
||||
return `/artist/${mbid}?page=${page}`;
|
||||
}
|
||||
|
||||
const handleDiscPageChanged = (page) => {
|
||||
setDiscs(null);
|
||||
setPage(page);
|
||||
|
||||
getArtistDiscs(mbid, page, 16).then((result) => {
|
||||
setDiscs(result.discs);
|
||||
setDiscsPaginate(result.paginate);
|
||||
});
|
||||
props.history.push(makeLink(page));
|
||||
}
|
||||
|
||||
const handleNavigateToDisc = (disc) => {
|
||||
console.log(disc);
|
||||
props.history.push(`/disc/${disc.id}`)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='artist-view'>
|
||||
<Artist artist={artist}/>
|
||||
{artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import React, {Fragment, useEffect, useState} from 'react';
|
||||
import {getDisc, getDiscVersions} from "../services/entity_service";
|
||||
import {CoverArt} from "./CoverArt";
|
||||
import {Entity} from "./Entity";
|
||||
import {EntityList} from "./EntityList";
|
||||
import {Paginate} from "./Paginate";
|
||||
import queryString from "query-string";
|
||||
|
||||
const capitalize = (string) => {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
|
||||
const Versions = (props) => {
|
||||
const versions = props.versions ? props.versions : null;
|
||||
const paginate = props.paginate ? props.paginate : null;
|
||||
|
||||
const handlePageChanged = (page) => {
|
||||
props.onPageChanged(page);
|
||||
}
|
||||
|
||||
let versionsComponent = <Fragment/>;
|
||||
if(versions) {
|
||||
const items = versions.map((version) => ({
|
||||
'cover': <CoverArt release={version}/>,
|
||||
'link': `/release/${version.id}`,
|
||||
'title': version.title,
|
||||
'subtitle': <Fragment>
|
||||
<div>{version.date}</div>
|
||||
<div>{version.country}</div>
|
||||
<div>{capitalize(version.disambiguation)}</div>
|
||||
</Fragment>
|
||||
|
||||
}));
|
||||
versionsComponent = <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={handlePageChanged} makeLink={props.makeLink}/>
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h2>Versiones</h2>
|
||||
{versionsComponent}
|
||||
{paginateContent}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
const Disc = (props) => {
|
||||
const disc = props.disc;
|
||||
if (disc){
|
||||
return <Entity title={disc.title}
|
||||
subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
|
||||
buttonText='Agregar a mi lista'
|
||||
cover={<CoverArt disc={disc}/>}/>
|
||||
}else {
|
||||
return <Fragment></Fragment>
|
||||
}
|
||||
}
|
||||
|
||||
export const DiscView = (props) => {
|
||||
const mbid = props.match.params.mbid;
|
||||
const parsedParams = queryString.parse(props.location.search);
|
||||
|
||||
const [disc, setDisc] = useState(null);
|
||||
const [versions, setVersions] = useState(null);
|
||||
const [versionsPaginate, setVersionsPaginate] = useState(null);
|
||||
const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
|
||||
|
||||
useEffect(() => {
|
||||
if (mbid) {
|
||||
getDisc(mbid).then((result) => setDisc(result));
|
||||
getDiscVersions(mbid, page).then((result) => {
|
||||
setVersions(result.releases);
|
||||
setVersionsPaginate(result.paginate);
|
||||
});
|
||||
}
|
||||
}, [mbid, page])
|
||||
|
||||
const makeLink = (page) => {
|
||||
return `/disc/${mbid}?page=${page}`;
|
||||
}
|
||||
|
||||
const handleVersionPageChanged = (page) => {
|
||||
setVersions(null);
|
||||
setPage(page);
|
||||
props.history.push(makeLink(page));
|
||||
}
|
||||
|
||||
const handleNavigateToVersion= (disc) => {
|
||||
props.history.push(`/release/${disc.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Disc disc={disc}/>
|
||||
<Versions versions={versions} paginate={versionsPaginate}
|
||||
onPageChanged={handleVersionPageChanged} makeLink={makeLink}
|
||||
navigateToVersion={handleNavigateToVersion}/>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
@@ -1,264 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user