diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx index 456766b..0861b7a 100644 --- a/src/components/Paginate.jsx +++ b/src/components/Paginate.jsx @@ -143,14 +143,14 @@ export default class Paginate extends Component { if (page === LEFT_PAGE) return (
  • - « Anterior + «
  • ); if (page === RIGHT_PAGE) return (
  • - Siguiente » + »
  • ); diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 3b1e754..0afa554 100644 --- a/src/components/Search.jsx +++ b/src/components/Search.jsx @@ -7,6 +7,11 @@ import Paginate from "./Paginate"; import {Link} from "react-router-dom"; import {Tab, TabList, TabPanel, Tabs} from "react-tabs"; +const SearchPlaceholder = () => ( + + {[...Array(10)].map((e, i) =>
  • )} + +) class SearchArtist extends React.Component { render() { @@ -32,8 +37,13 @@ class SearchArtists extends React.Component { componentDidUpdate = (prevProps, prevState) => { if(prevProps.query !== this.props.query || prevState.page !== this.state.page) { - this.setState({artists: null, paginate: null}) 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}) + } } }; @@ -48,7 +58,6 @@ class SearchArtists extends React.Component { page = page ? page : 1; searchArtist(query, page).then((response) => { - console.log(response); this.setState({ artists: response.artists, paginate: response.paginate @@ -57,7 +66,7 @@ class SearchArtists extends React.Component { }; render = () => { - let artists =

    Cargando...

    ; + let artists = ; if(this.state.artists) { artists = this.state.artists.map((artist) => ); } diff --git a/src/styles/main.css b/src/styles/main.css index 4268105..b1a0d1d 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -61,7 +61,7 @@ h1, h2, h3, h4 { } .nav .branding { - margin: 0; + margin: 0; } .nav-links { @@ -89,6 +89,12 @@ ul.pagination { padding: 0 1rem; } +@media (max-width: 767px) { + .page-link { + padding: 0 .4rem; + } +} + .page-item.active { background-color: var(--accent); }