Commit e654e7d4 authored by CodeDuSoir's avatar CodeDuSoir
Browse files

add basic unframed pagination system

parent c34c8731
......@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import SearchBar from './searchbar';
import Header from './header';
import ResultCards from './result-cards';
import Pagination from './pagination';
// URL API adrien
const urlAPI = 'https://annuaire.interhop.org/providers?search='
......@@ -9,30 +11,40 @@ import ResultCards from './result-cards';
export default class Body extends Component {
state = {
'searchValue': 'Paris',
'searchResult': ''
}
handleChange = input => e => {
this.setState({[input]: e.target.value});
'searchResult': '',
'page': 1
}
searchFunction = searchValue => e => {
e.preventDefault();
fetch(urlAPI + this.state.searchValue + '&origin=*', { header: {'Access-Control-Allow-Origin': '*'}})
fetchData() {
fetch(urlAPI + this.state.searchValue + '&page=' + this.state.page + '&origin=*', { header: {'Access-Control-Allow-Origin': '*'}})
.then(res => res.json())
.then(data => {
this.setState({ 'searchResult': data });
})
}
searchFunction = () => e => {
e.preventDefault();
this.fetchData();
}
handleChange = input => e => {
this.setState({[input]: e.target.value});
}
handleIndentation = input => e => {
this.setState({[input]: parseInt(e.target.value) + this.state.page});
this.fetchData();
}
render() {
const { searchValue, searchResult } = this.state;
const { searchValue, searchResult, page } = this.state;
return (
<main>
<Header/>
<SearchBar handleChange={this.handleChange} searchValue={searchValue} searchFunction={this.searchFunction} />
<ResultCards searchValue={searchValue} searchResult={searchResult}/>
<Pagination searchResult={searchResult} page={page} handleIndentation={this.handleIndentation} searchFunction={this.searchFunction} />
</main>
);
}
......
import React, { Component } from 'react';
export default class Pagination extends Component {
render() {
const { handleIndentation, searchFunction } = this.props;
return(
<nav className aria-label="Pagination" class="columns is-centered">
<button value="-1" onClick={handleIndentation("page")} className="pagination-previous">
<span className="screen-reader-text">Page précédente</span>
<svg className="icon icon-arrow-left-mini" width="14" height="14" viewBox="-100.9 99.1 61.9 105.9">
<path d="M-98.2 158.8l43.5 43.5c1.7 1.7 4 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.7-6.5l-37.2-37.2 37.2-37.2c1.7-1.7 2.7-4 2.7-6.5s-1-4.8-2.6-6.5c-1.8-1.9-4.2-2.8-6.6-2.8-2.3 0-4.6.9-6.5 2.6-11.5 11.4-41.2 41-43.3 43l-.2.2c-3.6 3.6-3.6 10.3 0 13.9z"></path>
</svg>
Précédente
</button>
<button value="1" onClick={handleIndentation("page")} className="pagination-next">
<span className="screen-reader-text">Page suivante</span>
Suivante
<svg width="14" height="14" viewBox="-100.9 99.1 61.9 105.9" class=" icon icon-arrow-right-mini">
<path d="M-41.7 145.3l-43.5-43.5c-1.7-1.7-4-2.7-6.5-2.7s-4.8 1-6.5 2.7c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.7 6.5L-61 152l-37.2 37.2c-1.7 1.7-2.7 4-2.7 6.5s1 4.8 2.6 6.5c1.8 1.9 4.2 2.8 6.6 2.8 2.3 0 4.6-.9 6.5-2.6 11.5-11.4 41.2-41 43.3-43l.2-.2c3.6-3.6 3.6-10.4 0-13.9z"></path>
</svg>
</button>
</nav>
)
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment