website/src/App.js

91 lines
2.1 KiB
JavaScript
Raw Normal View History

2020-03-01 20:40:51 +01:00
import React from 'react';
import { ToastProvider } from 'react-toast-notifications';
import Footer from './Components/Footer';
import GasStation from "./Components/GasStation";
import Map from "./Components/Map";
import 'mapbox-gl/dist/mapbox-gl.css';
import './App.css';
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
selectedGasStation: {},
selectedGasType: 'E85'
};
}
/**
* Méthode permettant de sélectionner le type de carburant à afficher
* @param {Object} e
*/
selectGasType = (e) => {
const {
value,
} = e.target;
this.setState(prevState => ({
...prevState,
selectedGasType: value
}));
}
/**
* Méthode permettant de fermer la modale contenant les détails de la station
* @param {Boolean} goToWaze
*/
hideModal = (goToWaze) => {
const {
selectedGasStation,
} = this.state;
if (goToWaze) {
window.open(`https://www.waze.com/livemap/directions?navigate=yes&latlng=${selectedGasStation.latitude}%2C${selectedGasStation.longitude}&zoom=17`);
}
this.setState(prevState => ({
...prevState,
selectedGasStation: {},
showModal: false
}));
}
/**
* Méthode permettant de sélectionner et d'afficher le détails d'une station
* @param {Object} selectedGasStation
*/
showGasStation = (selectedGasStation) => {
this.setState(prevState => ({
...prevState,
showModal: true,
selectedGasStation
}));
}
/**
* Méthode gérant le rendu de la vue
*/
render() {
const {
selectedGasType,
showModal,
selectedGasStation,
} = this.state;
return (
<ToastProvider>
<GasStation
showModal={showModal}
hideModal={this.hideModal}
selectedGasStation={selectedGasStation}
/>
<Map selectedGasType={selectedGasType} showGasStation={this.showGasStation} />
<Footer selectedGasType={selectedGasType} selectGasType={this.selectGasType} />
</ToastProvider>
);
}
}
export default Application;