From 0faf2359de6be83b0098b1e373f8071550d098c3 Mon Sep 17 00:00:00 2001
From: dbroqua <dbroqua@mousur.org>
Date: Tue, 3 Mar 2020 10:10:00 +0100
Subject: [PATCH] Added button for getting user position

---
 public/gps.png               | Bin 0 -> 649 bytes
 src/App.js                   |  18 +++++++++++++---
 src/Components/Footer.js     |  12 ++++++++++-
 src/Components/GasStation.js |   9 ++++++++
 src/Components/Map.js        |  40 ++++++++++++++++++++++++++++++++++-
 5 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 public/gps.png

diff --git a/public/gps.png b/public/gps.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ff3406af4df490eb9df6be900a5ad9827ab8f7e
GIT binary patch
literal 649
zcmV;40(Sk0P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000ie
z000ie0hKEb8vp<TJ4r-AR7l6Il(9}5Q4mGXeQ*8NTFb$TSQk;`(nUTZMT%5>Kq`bN
zEW`&ybWz%Ll$3~q5)mp&q#)wT1ws@EQMhtJfl@fK6r3Wnu(8+n5^|-{N;`M%%p1)N
z%s~htk+cpR0)60@Ssyr*v>rl8cq&@0mNVf2FkWB-N$agv%asz3<2Xp#%L()(ZFuk7
zX_{7>&1Thm-<Gri^fI2Ly*Q4;T=6tbouqvW8cOOcEiKKgtkGyVNgZHlN%ohQmuJ7k
zsu}}B=iJ+}Ej4bIWTTK&sZ?G7w?^vZg5LmL;7-y|(h#@<y5`G@>sWEOrZrXlX4dnp
zE%xm?=T>XA+QYQeYPG~Uw+eJ8xIHUyv*;1W`6o*1JLk55lR4cvan5Z?>QA)zxQILe
z#@_ojKpe+a;D*P!?*V6KJs$Vs#<*DQ*tDiF2F7Wc2CL=+a1HD-dk1!bYvW?EnGb*{
zmtX|s=eP}g3n6?SjYg}$7vQJ)s=!C{eKIZ+T2r{nw@A_&i?=vivbBj8T|G=;F2Q$z
z`}_NMM*d1kWZWz^)A|dNRxEq3(P(6ee*i~ww2zE~#bjf;GR3Ud>k)9l#G;i&ZqY7G
zYZ}hE_dN4dn8w^ncE}yOT)U=FaO`##Rue*~@@JWf&UHxBG!&g{;LKtd!+YNZE-5*t
zz@^2Mhxh(9wi^rV%D7L5_x=@dK1clAIRB0)ie3Vz1>&dXdp;_aN&+0@#1HJ>|3i`_
jk)&-&+ewl{W#fJW2E5DR_TBRY00000NkvXXu0mjf4!|tP

literal 0
HcmV?d00001

diff --git a/src/App.js b/src/App.js
index 728316d..9681342 100644
--- a/src/App.js
+++ b/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>
     );
   }
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index 0311ae4..ead4cfb 100644
--- a/src/Components/Footer.js
+++ b/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;
\ No newline at end of file
diff --git a/src/Components/GasStation.js b/src/Components/GasStation.js
index ee3d270..db0d0b9 100644
--- a/src/Components/GasStation.js
+++ b/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,
diff --git a/src/Components/Map.js b/src/Components/Map.js
index a6d7d17..1457f28 100644
--- a/src/Components/Map.js
+++ b/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,