Commit bf5fe8df authored by CodeDuSoir's avatar CodeDuSoir
Browse files

Made the app functional components a class component, made the body class...

Made the app functional components a class component, made the body class component a functional component
parent 7c3e0d25
import React from 'react';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Body from './components/body';
import ToobibPage from './components/toobibPage';
import error from './components/error';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Body} />
<Route path="/toobibPage" component={ToobibPage} />
<Route exact path="/404" component={error} />
<Redirect to="/404" />
</Switch>
</Router>
);
const urlAPI = 'https://annuaire.interhop.org/providers?search='
export default class App extends Component {
state = {
'searchValue': 'Paris',
'lastSearchTitle': '',
'searchResult': '',
'page': '1'
}
async fetchData() {
const response = await fetch(urlAPI + this.state.lastSearchTitle + '&page=' + this.state.page + '&origin=*', { header: {'Access-Control-Allow-Origin': '*'}})
const json = await response.json();
this.setState({ 'searchResult': json });
}
resetSearch() {
this.setState({'page': '1'});
this.setState({'lastSearchTitle': this.state.searchValue});
}
searchFunction = () => e => {
this.resetSearch();
e.preventDefault();
this.fetchData();
}
handleChange = input => e => {
this.setState({[input]: e.target.value});
}
handleIndentation = input => async e => {
let newNumber = parseInt(e.target.value) + parseInt(this.state.page);
await this.setState({[input]: newNumber.toString()});
this.fetchData();
}
render() {
const { searchValue, searchResult, lastSearchTitle, page } = this.state;
return (
<Router>
<Switch>
<Route exact path="/" render={(props) => <Body {...props} searchResult={searchResult} page={page} handleIndentation={this.handleIndentation} lastSearchTitle={lastSearchTitle} searchResult={searchResult} fetchData={this.fetchData} handleChange={this.handleChange} searchValue={searchValue} searchFunction={this.searchFunction} /> } />
<Route path="/toobibPage" component={ToobibPage} />
<Route exact path="/404" component={error} />
<Redirect to="/404" />
</Switch>
</Router>
);
}
}
export default App;
......@@ -8,52 +8,15 @@ import Pagination from './pagination';
// URL API adrien
const urlAPI = 'https://annuaire.interhop.org/providers?search='
export default class Body extends Component {
state = {
'searchValue': 'Paris',
'lastSearchTitle': '',
'searchResult': '',
'page': '1'
}
async fetchData() {
const response = await fetch(urlAPI + this.state.lastSearchTitle + '&page=' + this.state.page + '&origin=*', { header: {'Access-Control-Allow-Origin': '*'}})
const json = await response.json();
this.setState({ 'searchResult': json });
}
resetSearch() {
this.setState({'page': '1'});
this.setState({'lastSearchTitle': this.state.searchValue});
}
searchFunction = () => e => {
this.resetSearch();
e.preventDefault();
this.fetchData();
}
handleChange = input => e => {
this.setState({[input]: e.target.value});
}
handleIndentation = input => async e => {
let newNumber = parseInt(e.target.value) + parseInt(this.state.page);
await this.setState({[input]: newNumber.toString()});
this.fetchData();
}
export default function Body(props) {
render() {
const { searchValue, searchResult, lastSearchTitle, page } = this.state;
const { searchValue, searchResult, lastSearchTitle, page,fetchData, handleChange, searchFunction, handleIndentation } = props;
return (
<main>
<Header/>
<SearchBar fetchData={this.fetchData} handleChange={this.handleChange} searchValue={searchValue} searchFunction={this.searchFunction} />
<SearchBar fetchData={fetchData} handleChange={handleChange} searchValue={searchValue} searchFunction={searchFunction} />
<ResultCards lastSearchTitle={lastSearchTitle} searchResult={searchResult}/>
<Pagination searchResult={searchResult} page={page} handleIndentation={this.handleIndentation} />
<Pagination searchResult={searchResult} page={page} handleIndentation={handleIndentation} />
</main>
);
}
}
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