Added feedback on button (#1) and some changes

cron.sh

@@ -1,8 +0,0 @@
-#! /bin/bash
-
-mkdir ./extracts
-cd ./extracts
-wget https://donnees.roulez-eco.fr/opendata/jour
-unzip jour 
-mv *.xml ../gasStations.xml
-rm jour

package.json

@@ -16,6 +16,7 @@
     "react": "^16.13.0",
     "react-bootstrap": "^1.0.0-beta.17",
     "react-dom": "^16.13.0",
+    "react-icons": "^3.9.0",
     "react-map-gl": "^5.2.3",
     "react-moment": "^0.9.7",
     "react-scripts": "3.4.0",
@@ -64,4 +65,4 @@
     "husky": "^4.2.3",
     "lint-staged": "^10.0.8"
   }
-}
+}

src/App.css

@@ -1,9 +1,17 @@
 .locationIcon {
   width: 32px;
+}
+
+div.mapboxgl-marker {
   margin-top: -16px;
   margin-left: -16px;
 }
 
+div.mapboxgl-marker.gasStation {
+  margin-top: -24px;
+  margin-left: -30px;
+}
+
 div.react-toast-notifications__container {
   z-index: 1031 ;
 }

src/App.js

@@ -113,7 +113,7 @@ class Application extends React.Component {
           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} />
+        <Footer selectedGasType={selectedGasType} isLocating={needUpdateUserLocation} selectGasType={this.selectGasType} setNeedUpdateUserLocation={this.setNeedUpdateUserLocation} />
       </ToastProvider>
     );
   }

src/Components/Footer.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Navbar, Button } from "react-bootstrap";
+import {
+  Navbar,
+  Button,
+  Spinner 
+} from "react-bootstrap";
 import PropTypes from 'prop-types';
+import { MdGpsFixed } from "react-icons/md";
 
 import GasTypes from "./GasTypes";
 
@@ -9,24 +14,34 @@ const Footer = (props) => {
     selectGasType,
     selectedGasType,
     setNeedUpdateUserLocation,
+    isLocating,
   } = 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>
+      <div style={{width: "36px", display: "flex", justifyContent: "center", paddingLeft: "1rem"}}>
+        {isLocating ? (
+          <Spinner animation="border" size="sm" role="status">
+            <span className="sr-only">Chargement...</span>
+          </Spinner>
+      ) : ( 
+        <Button
+          variant="link"
+          onClick={() => setNeedUpdateUserLocation(true)}
+          onFocus={() => { }}
+          onBlur={() => { }}
+        >
+          <MdGpsFixed />
+        </Button>
+      )}
+      </div>
     </Navbar>
   );
 };
 
 Footer.propTypes = {
+  isLocating: PropTypes.bool.isRequired,
   selectedGasType: PropTypes.string.isRequired,
   selectGasType: PropTypes.func.isRequired,
   setNeedUpdateUserLocation: PropTypes.func.isRequired,

src/Components/GasStation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, Button, ListGroup } from "react-bootstrap";
 import PropTypes from 'prop-types';
+import { FaWaze } from "react-icons/fa";
 import { gasTypes } from "../config";
 
 import { capitalizeFirstLetter} from "../helpers";
@@ -69,11 +70,7 @@ class GasStation extends React.Component {
         </Modal.Body>
         <Modal.Footer>
           <Button variant="primary" onClick={() => hideModal(true)}>
-            <img
-              className="locationIcon"
-              src="/waze.png"
-              alt="S'y rendre"
-            />
+            <FaWaze size="2em" />
           </Button>
         </Modal.Footer>
       </Modal>

src/Components/Map.js

@@ -4,6 +4,8 @@ import ReactMapGL, { Marker } from 'react-map-gl';
 import { Button } from "react-bootstrap";
 import { withToastManager } from 'react-toast-notifications';
 import PropTypes from 'prop-types';
+import { MdLocalGasStation } from "react-icons/md";
+import { GiPositionMarker } from "react-icons/gi";
 import { haveSelectedGas } from '../helpers';
 import { mapboxToken, radius, baseApiUrl } from "../config";
 
@@ -215,7 +217,7 @@ class Map extends React.Component {
                 latitude={userLocation.latitude}
                 longitude={userLocation.longitude}
               >
-                <img className="locationIcon" src="/car.png" alt="My position" />
+                <GiPositionMarker size="2em"  />
               </Marker>
             ) : (null)
           }
@@ -224,6 +226,7 @@ class Map extends React.Component {
               key={gasStation.stationId}
               latitude={gasStation.location.coordinates[1]}
               longitude={gasStation.location.coordinates[0]}
+              className="gasStation"
             >
               <Button
                 variant="link"
@@ -231,11 +234,7 @@ class Map extends React.Component {
                 onFocus={() => { }}
                 onBlur={() => { }}
               >
-                <img
-                  className="locationIcon"
-                  src="/gas-station.png"
-                  alt={`${gasStation.stationId}`}
-                />
+                <MdLocalGasStation size="2em" />
               </Button>
 
             </Marker>

yarn.lock

@@ -4394,11 +4394,6 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
 eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
@@ -5449,13 +5444,6 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.1.tgz#b2425d3c7b18f7219f2ca663d103bddb91718d64"
-  integrity sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -9149,6 +9137,13 @@ react-error-overlay@^6.0.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.6.tgz#ac4d9dc4c1b5c536c2c312bf66aa2b09bfa384e2"
   integrity sha512-Yzpno3enVzSrSCnnljmr4b/2KUQSMZaPuqmS26t9k4nW7uwJk6STWmH9heNjPuvqUTO3jOSPkHoKgO4+Dw7uIw==
 
+react-icons@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"
+  integrity sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@^16.3.2, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
@@ -11521,26 +11516,11 @@ ws@^6.1.2, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-xml-lexer@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/xml-lexer/-/xml-lexer-0.2.2.tgz#518193a4aa334d58fc7d248b549079b89907e046"
-  integrity sha1-UYGTpKozTVj8fSSLVJB5uJkH4EY=
-  dependencies:
-    eventemitter3 "^2.0.0"
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml-reader@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/xml-reader/-/xml-reader-2.4.3.tgz#9f810caf7c425a5aafb848b1c45103c9e71d7530"
-  integrity sha1-n4EMr3xCWlqvuEixxFEDyecddTA=
-  dependencies:
-    eventemitter3 "^2.0.0"
-    xml-lexer "^0.2.2"
-
 xmlchars@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"