Commit c34c8731 authored by CodeDuSoir's avatar CodeDuSoir
Browse files

Initial commit

parent ab123de3
This diff is collapsed.
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Body from './components/body';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Body/>
);
}
......
import React, { Component } from 'react';
import SearchBar from './searchbar';
import Header from './header';
import ResultCards from './result-cards';
// URL API adrien
const urlAPI = 'https://annuaire.interhop.org/providers?search='
export default class Body extends Component {
state = {
'searchValue': 'Paris',
'searchResult': ''
}
handleChange = input => e => {
this.setState({[input]: e.target.value});
}
searchFunction = searchValue => e => {
e.preventDefault();
fetch(urlAPI + this.state.searchValue + '&origin=*', { header: {'Access-Control-Allow-Origin': '*'}})
.then(res => res.json())
.then(data => {
this.setState({ 'searchResult': data });
})
}
render() {
const { searchValue, searchResult } = this.state;
return (
<main>
<Header/>
<SearchBar handleChange={this.handleChange} searchValue={searchValue} searchFunction={this.searchFunction} />
<ResultCards searchValue={searchValue} searchResult={searchResult}/>
</main>
);
}
}
import React, { Component } from 'react';
export default class header extends Component {
render() {
return(
<React.Fragment>
<section className="hero is-small is-info">
<div className="hero-body has-text-centered">
<div className="container">
<h1 className="title">
Annuaire
</h1>
<h2 className="subtitle">
Trouvez votre practicien-ne
</h2>
</div>
</div>
</section>
</React.Fragment>
)
}
}
import React, { Component } from 'react';
export default class ResultCards extends Component {
render() {
const { searchResult, searchValue } = this.props;
if(!searchResult)
{
return(
<React.Fragment>
<h2>faites une recherche !</h2>
</React.Fragment>
)
}
else
{
return(
<React.Fragment>
<h2>Voici les resultats pour: "{searchValue}"</h2>
<nav className="columns is-multiline is-centered">
{
searchResult.providers.map((e) => {
return(
<div className="column is-one-quarter has-text-centered">
<div className="card">
<div className="card-content">
<div className="container">
<div className="media-content">
<p className="title is-4">{e.prenom} {e.nom}</p>
<b>
<p className="is-bold is-4">{e.libelleCommune}</p>
</b>
</div>
</div>
<div className="content">
{e.libelleProfession}
<br />
</div>
<a className="button is-link is-light has-text-right">Consulter</a>
</div>
</div>
</div>
)
})
}
</nav>
</React.Fragment>
)
}
}
}
import React, { Component } from 'react';
export default class SearchBar extends Component {
render() {
const { searchValue, handleChange, searchFunction } = this.props;
return(
<React.Fragment>
<div className="level">
<div className="level-item">
<form action="" method="GET">
<div className="field">
<div className="control">
<input className="input" value={searchValue} onChange={handleChange('searchValue')} placeholder="search" name="q" type="text"/>
</div>
<div className="control">
<input type="submit" className="button is-link" onClick={searchFunction(searchValue)} value="Rechercher"></input>
</div>
</div>
</form>
</div>
</div>
</React.Fragment>
)
}
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
......
@import 'bulma/bulma.sass';
@import './app.scss';
.pointer {
cursor: pointer !important;
}
.text-overflow {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
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