src/Components/GasStation.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Modal, Button, ListGroup } from "react-bootstrap";
 import PropTypes from 'prop-types';
 import { FaWaze } from "react-icons/fa";
+import { GiPositionMarker } from "react-icons/gi";
 import { gasTypes } from "../config";
 
 import { capitalizeFirstLetter, lowerCaseString } from "../helpers";
@@ -37,8 +38,8 @@ class GasStation extends React.Component {
         {station.prices ? station.prices.map(price => {
           return (
             <ListGroup.Item key={price._id} className={gasType === price.gasType ? "selected-gasType" : ""}>
-              {`${this.renderGasType(price.gasType)} : ${price.price} € `}
+              {`${this.renderGasType(price.gasType)} : ${price.price.toString().replace('.', ',')} € `}
-            </ListGroup.Item>            
+            </ListGroup.Item>
           );
         }) : (null)}
       </ListGroup>
@@ -60,6 +61,21 @@ class GasStation extends React.Component {
     return `${lowerCaseString(station.address)} - ${capitalizeFirstLetter(station.city)}`;
   }
 
+  renderAddress = () => {
+    const {
+      station,
+    } = this.props;
+
+    return (
+      <p>
+        <GiPositionMarker /> 
+        {lowerCaseString(station.address)}
+        {' - '}
+        {capitalizeFirstLetter(station.city)}
+      </p>
+    );
+  }
+
   render () {
     const {
       showModal,
@@ -80,6 +96,7 @@ class GasStation extends React.Component {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
+          {this.renderAddress()}
           {this.renderPrices()}
         </Modal.Body>
         <Modal.Footer>