skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Por fin un paginado que funciona

Browse Source 
Entiedo mucho mejor esto de react que angular~~~

Tengo que usar mas los callbacks cuando haog navegaciones para volver a
leer las props, como cambia la  query string y esta en props~
This commit is contained in:
Daniel Cortes
2020-06-01 23:34:17 -04:00
parent 4a78534870
commit fcd3428a46
3 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Paginate.jsx
View File

@@ -149,21 +149,21 @@ export class Paginate extends Component {
<ul className="pagination">
{pages.map((page, index) => {
if (page === LEFT_PAGE) return (
<li key={index} className="page-item">
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
<span>&laquo;</span>
<span>&laquo; Anterior</span>
</a>
</li>
);
if (page === RIGHT_PAGE) return (
<li key={index} className="page-item">
<li key={page} className="page-item">
<a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
<span>&raquo;</span>
<span>Siguiente &raquo;</span>
</a>
</li>
);
return (
<li key={index} className={`page-item ${currentPage === page ? 'active' : ''}`}>
<li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
<a className="page-link" href={this.makePageLink(index)}
onClick={this.handleClick(page)}>{page}</a>
</li>

87
src/components/Search.jsx
View File

@@ -1,10 +1,9 @@
import React from "react";
import React, {Fragment} from "react";
import queryString from "query-string";
import ReactJson from "react-json-view";
import {searchArtist} from "../services/search_service";
import SearchBar from "./SearchBar";
import {Paginate} from "./Paginate";
import {navigate} from "@reach/router";
class SearchList extends React.Component {
@@ -25,75 +24,82 @@ class SearchList extends React.Component {
}
export class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
artists: null
};
this.getParams = this.getParams.bind(this);
this.loadParams = this.loadParams.bind(this);
this.makeLink = this.makeLink.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
}
this.handleQueryChange = this.handleQueryChange.bind(this);
static getDerivedStateFromProps(props, state) {
if (props.location.search !== state.prevSearch) {
return {
this.state = {
artists: null,
prevSearch: props.location.search
}
}
return null;
paginate: null,
params: this.loadParams()
};
}
componentDidMount() {
this.loadArtists(this.getParams().query, this.getParams().page);
this.loadArtists(this.state.params.query, this.state.params.page);
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.artists == null) {
this.loadArtists(this.getParams().query, this.getParams().page);
if (prevState.params !== this.state.params) {
this.loadArtists(this.state.params.query, this.state.params.page);
}
}
makeLink(page) {
return `/search?query=${this.getParams().query}&page=${page}`
return `/search?query=${this.state.params.query}&page=${page}`
}
handlePageChange(page) {
navigate(page);
this.props.navigate(page).then(() => {
this.setState({
artists: null,
params: this.loadParams()
});
})
}
handleQueryChange(query) {
this.setState({artists: null, paginate: null, params: this.loadParams()})
}
render() {
let paginate = null;
let artists = null;
if (this.state.paginate) {
const total = this.state.paginate.total;
const currentPage = this.state.paginate.current_page;
const pageLimit = this.state.paginate.per_page;
paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage}
pageNeighbours={2} onPageChanged={this.handlePageChange}
makeLink={this.makeLink}/>
}
if (this.state.artists) {
const total = this.state.artists.paginate.total;
const currentPage = this.state.artists.paginate.current_page;
const pageLimit = this.state.artists.paginate.per_page;
return (
<main>
<h1>Busqueda</h1>
<SearchBar query={this.getParams().query}/>
<SearchList artists={this.state.artists.artists}/>
<Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={1} onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
artists = (
<Fragment>
<SearchList artists={this.state.artists}/>
<ReactJson src={this.state.artists} enableClipboard={false} displayDataTypes={false}/>
</main>
</Fragment>
);
} else {
}
return (
<main>
<h1>Busqueda</h1>
<SearchBar query={this.query}/>
<p>Loading...</p>
<SearchBar query={this.state.params.query} onQueryChanged={this.handleQueryChange}/>
{paginate && paginate}
{artists ? artists : <p>Loading...</p>}
</main>
);
}
}
getParams() {
loadParams() {
return queryString.parse(this.props.location.search);
}
@@ -103,7 +109,10 @@ export class Search extends React.Component {
}
searchArtist(query, page).then((response) => {
this.setState({artists: response})
this.setState({
artists: response.artists,
paginate: response.paginate,
})
})
}
}

16
src/components/SearchBar.jsx
View File

@@ -5,11 +5,9 @@ import {navigate} from "@reach/router";
export default class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {query: ''};
if (this.props.query) {
this.state = {query: this.props.query};
}
this.state = {
query: this.props.query ? this.props.query : ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
@@ -22,15 +20,17 @@ export default class SearchBar extends React.Component {
handleSubmit(event, who) {
if (event.key === 'Enter' || who === 'button') {
navigate(`/search?query=${this.state.query}`);
const query = this.state.query;
const onQueryChanged = this.props.onQueryChanged;
navigate(`/search?query=${query}`).then(() => onQueryChanged(query));
}
}
render() {
return (
<div className='input-with-icon'>
<input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit}
onChange={this.handleChange}/>
<input className='full-width' value={this.state.query} onKeyUp={this.handleSubmit} onChange={this.handleChange}/>
<button onClick={(e) => this.handleSubmit(e, 'button')}><FaSearch/></button>
</div>
);