Commit 508053f6 authored by CodeDuSoir's avatar CodeDuSoir
Browse files

essai sans succes d'ajouter le loading screen

parent f688496d
......@@ -4,7 +4,6 @@ import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-d
import Body from './components/body';
import ToobibPage from './components/toobibPage';
import error from './components/error';
import SuspenseToobibPage from './components/toobibPageSuspense';
const urlAPI = 'https://annuaire.interhop.org/providers?search='
......
import React, { Component } from 'react';
import React, { Component, Suspense } from 'react';
import Header from './header';
const urlAPI = 'https://annuaire.interhop.org/provider/'
const urlAPI = 'http://www.omdbapi.com/?apikey=9515cda&t='
function ProfileDetails(data) {
const resources = data;
console.log(resources);
return (
<div>
<Header />
<div className="container column is-10">
<div className="card toobib_data">
<div className="IMG_container">
<img className="IMG_container__img--doctor"/>
</div>
<h3 className="toobib_resources__title">{resources.prenom} {resources.nom}</h3>
<h4 className="toobib_resources__position">{resources.libelleProfession}</h4>
<p className="toobib_resources__number">{resources.telephone}</p>
<p className="toobib_resources__email">{resources.email}</p>
<p className="toobib_resources__convention">Conventionnement: {resources.conventionnement}</p>
</div>
<br/>
<div className="card location_data">
<h3 className="location_data__title">Adresse</h3>
<p className="location_data__address">Centre de consultations Courlancy</p>
<p className="location_data__address">XX rue TEST TEST, {resources.libelleCommune}</p>
<h3 className="location_data__title">Informations supplémentaires</h3>
<p className="location_data__info">TEST TEST INFO SUP</p>
<p className="location_data__info">TEST INFO HANDICAPE</p>
<p className="location_data__info">TEST INFO Parking </p>
<div className="MAP_container">
<img className="MAP_container__map--doctor"/>
</div>
</div>
</div>
</div>
)
}
export default class ToobibPage extends Component {
state = {
data: null,
id: this.props.match.params.Id
id: 'batman' // this.props.match.params.Id
};
componentDidMount() {
fetch(urlAPI + this.state.id, { header: {'Access-Control-Allow-Origin': '*'}})
.then(data => data.json())
.then(data => this.setState({ data }));
.then(async data => await this.setState({ data }));
}
render() {
if(this.data) {
return (
<div>
<Header />
<div className="container column is-10">
<div className="card toobib_data">
<div className="IMG_container">
<img className="IMG_container__img--doctor"/>
</div>
<h3 className="toobib_this.data__title">{this.data.prenom} {this.data.nom}</h3>
<h4 className="toobib_this.data__position">{this.data.libelleProfession}</h4>
<p className="toobib_this.data__number">{this.data.telephone}</p>
<p className="toobib_this.data__email">{this.data.email}</p>
<p className="toobib_this.data__convention">Conventionnement: {this.data.conventionnement}</p>
</div>
<br/>
<div className="card location_data">
<h3 className="location_data__title">Adresse</h3>
<p className="location_data__address">Centre de consultations Courlancy</p>
<p className="location_data__address">XX rue TEST TEST, {this.data.libelleCommune}</p>
<h3 className="location_data__title">Informations supplémentaires</h3>
<p className="location_data__info">TEST TEST INFO SUP</p>
<p className="location_data__info">TEST INFO HANDICAPE</p>
<p className="location_data__info">TEST INFO Parking </p>
<div className="MAP_container">
<img className="MAP_container__map--doctor"/>
</div>
</div>
</div>
</div>
);
} else {
return(
<h1> Loading </h1>
);
}
<Suspense fallback={<h1>Loading...</h1>}>
<ProfileDetails data={this.state.data} />
</Suspense>
);
}
};
......
import React, { Suspense } from "react";
import ToobibPage from "./toobibPage";
const SuspenseToobibPage = (props) => {
return(
<Suspense fallback={<div>Fetching employees...</div>}>
<ToobibPage resource={props}/>
</Suspense>
)
};
export default SuspenseToobibPage;
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