From f336fd67ed472a08595f1e7392e5ed39155cb0e5 Mon Sep 17 00:00:00 2001
From: dbroqua <dbroqua@mousur.org>
Date: Fri, 6 Mar 2020 15:52:33 +0100
Subject: [PATCH] Added station name on modal

---
 src/App.js                   |  4 ++--
 src/Components/GasStation.js | 35 +++++++++++++++++++++++++----------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5e376c3..4d286dc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -105,8 +105,8 @@ class Application extends React.Component {
         <GasStation
           showModal={showModal}
           hideModal={this.hideModal}
-          selectedGasStation={selectedGasStation}
-          selectedGasType={selectedGasType}
+          station={selectedGasStation}
+          gasType={selectedGasType}
         />
         <About
           showModal={showAboutModal}
diff --git a/src/Components/GasStation.js b/src/Components/GasStation.js
index 54a753d..5b547a6 100644
--- a/src/Components/GasStation.js
+++ b/src/Components/GasStation.js
@@ -24,19 +24,19 @@ class GasStation extends React.Component {
 
   /**
    * Méthode permettant de générer la liste des prix
-   * return {string}
+   * @return {string}
    */
   renderPrices = () => {
     const {
-      selectedGasType,
-      selectedGasStation,
+      gasType,
+      station,
     } = this.props;
 
     return (
       <ListGroup variant="flush">
-        {selectedGasStation.prices ? selectedGasStation.prices.map(price => {
+        {station.prices ? station.prices.map(price => {
           return (
-            <ListGroup.Item key={price._id} className={selectedGasType === price.gasType ? "selected-gasType" : ""}>
+            <ListGroup.Item key={price._id} className={gasType === price.gasType ? "selected-gasType" : ""}>
               {`${this.renderGasType(price.gasType)} : ${price.price} € `}
             </ListGroup.Item>            
           );
@@ -45,11 +45,25 @@ class GasStation extends React.Component {
     )
   }
 
+  /**
+   * Méthode permettant de formater le titre de la modale en fonction des infos reçues
+   * @return {string}
+   */
+  renderFormatTitle = () => {
+    const {
+      station,
+    } = this.props;
+
+    if ( station.name ) {
+      return station.name;
+    }
+    return `${lowerCaseString(station.address)} - ${capitalizeFirstLetter(station.city)}`;
+  }
+
   render () {
     const {
       showModal,
       hideModal,
-      selectedGasStation,
     } = this.props;
   
     return (
@@ -62,7 +76,7 @@ class GasStation extends React.Component {
       >
         <Modal.Header closeButton>
           <Modal.Title>
-            {`${lowerCaseString(selectedGasStation.address)} - ${capitalizeFirstLetter(selectedGasStation.city)}`}
+            {this.renderFormatTitle()}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -79,7 +93,7 @@ class GasStation extends React.Component {
 }
 
 GasStation.defaultProps = {
-  selectedGasStation: {
+  station: {
     address: null,
     city: null,
     prices: []
@@ -87,10 +101,11 @@ GasStation.defaultProps = {
 };
 
 GasStation.propTypes = {
-  selectedGasType: PropTypes.string.isRequired,
+  gasType: PropTypes.string.isRequired,
   showModal: PropTypes.bool.isRequired,
   hideModal: PropTypes.func.isRequired,
-  selectedGasStation: PropTypes.shape({
+  station: PropTypes.shape({
+    name: PropTypes.string,
     address: PropTypes.string,
     city: PropTypes.string,
     prices: PropTypes.array