Added about

src/App.js

@@ -3,6 +3,7 @@ import { ToastProvider } from 'react-toast-notifications';
 import Header from './Components/Header';
 import Footer from './Components/Footer';
 import GasStation from "./Components/GasStation";
+import About from "./Components/About";
 import Map from "./Components/Map";
 
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -15,6 +16,7 @@ class Application extends React.Component {
 
     this.state = {
       showModal: false,
+      showAboutModal: false,
       selectedGasStation: {},
       selectedGasType: 'E85',
       needUpdateUserLocation: false
@@ -78,6 +80,12 @@ class Application extends React.Component {
     })
   }
 
+  toggleAboutModal = () => {
+    this.setState(prevState => ({
+      showAboutModal: !prevState.showAboutModal
+    }));
+  }
+
   /**
    * Méthode gérant le rendu de la vue
    */
@@ -85,6 +93,7 @@ class Application extends React.Component {
     const {
       selectedGasType,
       showModal,
+      showAboutModal,
       selectedGasStation,
       userLocation,
       needUpdateUserLocation,
@@ -92,13 +101,17 @@ class Application extends React.Component {
 
     return (
       <ToastProvider>
-        <Header />
+        <Header toggleAboutModal={this.toggleAboutModal} />
         <GasStation
           showModal={showModal}
           hideModal={this.hideModal}
           selectedGasStation={selectedGasStation}
           selectedGasType={selectedGasType}
         />
+        <About
+          showModal={showAboutModal}
+          toggleAboutModal={this.toggleAboutModal}
+        />
         <Map selectedGasType={selectedGasType} userLocation={userLocation} needUpdateUserLocation={needUpdateUserLocation} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} showGasStation={this.showGasStation} />
         <Footer selectedGasType={selectedGasType} selectGasType={this.selectGasType} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} />
       </ToastProvider>

src/Components/About.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import PropTypes from 'prop-types';
+
+const About = (props) => {
+  const {
+    toggleAboutModal,
+    showModal
+  } = props;
+
+  return (
+    <Modal
+      size="xl"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      show={showModal}
+      onHide={() => {toggleAboutModal(false)}}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>À propos</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <strong>Prix carburant</strong>
+        {' '}
+        est une simple application ayant pour objectif d&apos;afficher facilement sur smartphone l&apos;ensemble des stations services à proximité.
+        <br />
+        Ce service est entièrement gratuit et libre.
+        <br />
+        La liste des stations est issue des 
+        {' '}
+        <a href="https://www.prix-carburants.gouv.fr/rubrique/opendata/" rel="noopener noreferrer" target="_blank">Open Data</a>
+        {' '}
+        fournies par le gouvernement.
+        <br />
+        L&apos;application est développée et maintenue par 
+        {' '}
+        <a href="https://darkou.fr" rel="noopener noreferrer" target="_blank">Damien Broqua</a>
+        .
+        <br />
+        Le code source de l&apos;application est librement téléchargeable sur 
+        {' '}
+        <a href="https://framagit.org/dbroqua/prix-carburants" rel="noopener noreferrer" target="_blank">framagit</a>
+        .
+      </Modal.Body>
+    </Modal>
+  );
+
+};
+
+About.propTypes = {
+  toggleAboutModal: PropTypes.func.isRequired,
+  showModal: PropTypes.bool.isRequired
+};
+
+export default About;

src/Components/Header.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Navbar, Nav } from "react-bootstrap";
+import PropTypes from 'prop-types';
 
-const Header = () => {
+const Header = (props) => {
+  const {
+    toggleAboutModal,
+  } = props;
 
   return (
     <Navbar expand="lg" bg="light" variant="light" fixed="top">
@@ -14,11 +18,19 @@ const Header = () => {
           alt="DarKou.fr"
         />
       </Navbar.Brand>
-      <Nav>
+      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-        <Nav.Link href="https://www.darkou.fr/contact/">Contact</Nav.Link>
+      <Navbar.Collapse id="basic-navbar-nav">
-      </Nav>    
+        <Nav className="mr-auto">
+          <Nav.Link onClick={toggleAboutModal}>A propros</Nav.Link>
+          <Nav.Link href="https://www.darkou.fr/contact/">Contact</Nav.Link>
+        </Nav>
+      </Navbar.Collapse>
     </Navbar>
   );
 };
 
+Header.propTypes = {
+  toggleAboutModal: PropTypes.func.isRequired,
+};
+
 export default Header;