From e90d3d6719cd67406bd2fe77e4e7c49dc3fc1d19 Mon Sep 17 00:00:00 2001
From: sohilpandya <sohilpandya@me.com>
Date: Thu, 1 Feb 2018 12:34:22 +0000
Subject: [PATCH] fixed alphabetical oredring related to #55

---
 src/components/App.js           |  5 +++--
 src/components/BuildingsList.js |  8 ++++----
 src/components/Markers.js       | 13 ++++++-------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 6fadf06..ef2c39f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -50,7 +50,7 @@ class App extends Component {
       this.setState({
         building: building,
         mapCenter: [building.longitude, building.latitude],
-        mapZoom: [15.5],
+        mapZoom: 15.5,
       })
     }
 
@@ -64,7 +64,8 @@ class App extends Component {
   isHomePage = () => {
     this.setState({
       isHome: true,
-      isAbout: false
+      isAbout: false,
+      building: {}
     });
   }
 
diff --git a/src/components/BuildingsList.js b/src/components/BuildingsList.js
index 7f34715..d8f4a0f 100644
--- a/src/components/BuildingsList.js
+++ b/src/components/BuildingsList.js
@@ -12,10 +12,10 @@ class BuildingsList extends Component {
   render() {
     const { buildings = [], handleBuildingDetails } = this.props;
     const buildingCards = buildings.map((building, i) => {
-      return <BuildingCard 
-        key={i} 
-        building={building} 
-        handleBuildingDetails={handleBuildingDetails} 
+      return <BuildingCard
+        key={i}
+        building={building}
+        handleBuildingDetails={handleBuildingDetails}
         inputRef={this.props.inputRef}/>
     })
 
diff --git a/src/components/Markers.js b/src/components/Markers.js
index 2567b07..1a2ca7f 100644
--- a/src/components/Markers.js
+++ b/src/components/Markers.js
@@ -11,28 +11,27 @@ const Markers = ({
   buildings = [], handleBuildingDetails, hoveringItem, selectedBuilding,
   goToViewport, hovering, id, selectedBuildingId
 }) => {
-const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
-  let counter = ++i;
 
+const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
     return (
       <Marker
-      key={counter}
+      key={i}
       longitude={buildingObj.longitude}
       latitude={buildingObj.latitude}>
 
       <div
         onMouseEnter={(obj) => {
-          hoveringItem(counter);
+            hoveringItem(buildingObj.id);
         }}
         onClick={() => {
-          selectedBuilding(counter);
+          selectedBuilding(buildingObj.id);
           handleBuildingDetails(buildingObj);
           let longitude = buildingObj.longitude;
           let latitude = buildingObj.latitude;
           goToViewport({longitude, latitude});
         }}
         onTouchStart={() => {
-          selectedBuilding(counter);
+          selectedBuilding(buildingObj.id);
           handleBuildingDetails(buildingObj);
           let longitude = buildingObj.longitude;
           let latitude = buildingObj.latitude;
@@ -44,7 +43,7 @@ const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
       >
 
       {
-        (hovering && id === counter) || selectedBuildingId === counter ? <MarkerFilled /> : <MarkerEmpty />
+        (hovering && buildingObj.id === id) ||  buildingObj.id === selectedBuildingId  ? <MarkerFilled /> : <MarkerEmpty />
       }
 
       </div>