Added button for getting user position

src/App.js

@@ -16,7 +16,8 @@ class Application extends React.Component {
     this.state = {
       showModal: false,
       selectedGasStation: {},
-      selectedGasType: 'E85'
+      selectedGasType: 'E85',
+      needUpdateUserLocation: false
     };
   }
 
@@ -68,6 +69,15 @@ class Application extends React.Component {
     }));
   }
 
+  /**
+   * Méthode permettant de demander à l'app de géoloc ou non l'utilisateur
+   */
+  setNeedUpdateUserLocation = (needUpdateUserLocation) => {
+    this.setState({
+      needUpdateUserLocation
+    })
+  }
+
   /**
    * Méthode gérant le rendu de la vue
    */
@@ -76,6 +86,8 @@ class Application extends React.Component {
       selectedGasType,
       showModal,
       selectedGasStation,
+      userLocation,
+      needUpdateUserLocation,
     } = this.state;
 
     return (
@@ -87,8 +99,8 @@ class Application extends React.Component {
           selectedGasStation={selectedGasStation}
           selectedGasType={selectedGasType}
         />
-        <Map selectedGasType={selectedGasType} showGasStation={this.showGasStation} />
-        <Footer selectedGasType={selectedGasType} selectGasType={this.selectGasType} />
+        <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/Footer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navbar } from "react-bootstrap";
+import { Navbar, Button } from "react-bootstrap";
 import PropTypes from 'prop-types';
 
 import GasTypes from "./GasTypes";
@@ -8,11 +8,20 @@ const Footer = (props) => {
   const {
     selectGasType,
     selectedGasType,
+    setNeedUpdateUserLocation,
   } = props;
 
   return (
     <Navbar bg="light" variant="light" fixed="bottom">
       <GasTypes selectedGasType={selectedGasType} selectGasType={selectGasType} />
+      <Button
+        variant="link"
+        onClick={() => setNeedUpdateUserLocation(true)}
+        onFocus={() => { }}
+        onBlur={() => { }}
+      >
+        <img src="/gps.png" alt="Géolocalisez moi" />
+      </Button>
     </Navbar>
   );
 };
@@ -20,6 +29,7 @@ const Footer = (props) => {
 Footer.propTypes = {
   selectedGasType: PropTypes.string.isRequired,
   selectGasType: PropTypes.func.isRequired,
+  setNeedUpdateUserLocation: PropTypes.func.isRequired,
 };
 
 export default Footer;

src/Components/GasStation.js

@@ -6,6 +6,11 @@ import { gasTypes } from "../config";
 import { capitalizeFirstLetter} from "../helpers";
 
 class GasStation extends React.Component {
+  /**
+   * Méthode permettant de convertir un type de carburant en un nom lisible
+   * @param {string} gasType
+   * @return {mixed}
+   */
   renderGasType = (gasType) => {
     for( let i = 0 ; i < gasTypes.length ; i +=1 ) {
       if ( gasTypes[i].type === gasType) {
@@ -16,6 +21,10 @@ class GasStation extends React.Component {
     return (null);
   }
 
+  /**
+   * Méthode permettant de générer la liste des prix
+   * return {string}
+   */
   renderPrices = () => {
     const {
       selectedGasType,

src/Components/Map.js

@@ -35,10 +35,31 @@ class Map extends React.Component {
     this.loadGasStations();
   }
 
+  /**
+   * Méthode appelée au premier chargement du module
+   */
   componentDidMount() {
     this.setUserLocation();
   }
 
+  /**
+   * Méthode appelée à chaque modificiation de l'état
+   * @param {Object} prevProps 
+   */
+  componentDidUpdate( prevProps ) {
+    const {
+      setNeedUpdateUserLocation,
+    } = this.props;
+
+    // L'utilisateur souhaite que l'app le géoloc
+    if ( prevProps.needUpdateUserLocation ) {
+      setNeedUpdateUserLocation(false);
+      this.setUserLocation(() => {
+        this.loadGasStations();
+      });     
+    }
+  }
+
   /**
    * Méthode permettant de mettre à jour la position de la map
    * @param {Object} viewport
@@ -51,8 +72,9 @@ class Map extends React.Component {
 
   /**
    * Méthode permettant de sauvegarder la position de l'utilisateur
+   * @param {Function} [cb]
    */
-  setUserLocation() {
+  setUserLocation(cb) {
     navigator.geolocation.getCurrentPosition((position) => {
       const setUserLocation = {
         latitude: position.coords.latitude,
@@ -68,10 +90,20 @@ class Map extends React.Component {
       this.setState({
         viewport: newViewport,
         userLocation: setUserLocation,
+      }, () => {
+        if ( cb ) {
+          cb();
+        }
       });
     });
   }
 
+  /**
+   * Méthode récursive permettant de charger tous les stations d'une zone
+   * @param {Number} start 
+   * @param {Number} newLoadId 
+   * @param {Function} callback 
+   */
   loadAllGasStations(start, newLoadId, callback) {
     const limit = 20;
 
@@ -214,9 +246,15 @@ class Map extends React.Component {
   }
 }
 
+Map.defaultProps = {
+  needUpdateUserLocation: false
+};
+
 Map.propTypes = {
+  needUpdateUserLocation: PropTypes.bool,
   selectedGasType: PropTypes.string.isRequired,
   showGasStation: PropTypes.func.isRequired,
+  setNeedUpdateUserLocation: PropTypes.func.isRequired,
   toastManager: PropTypes.shape({
     add: PropTypes.func,
     removeAll: PropTypes.func,