Design fixed

graphql/schema.graphql

@@ -3,6 +3,7 @@ type Building {
   street_number: String,
   street_name: String,
   building_name: String,
+  display_name: String,
   postcode: String,
   ward: String,
   conservation_area: String,

helpers/createDataObj.js

@@ -1,10 +1,19 @@
 const createDataObj = (data) => {
   return data.map((item, i) => {
+
+    let display_name;
+    if (item['Lower Case Building Name']) {
+      display_name = item['Lower Case Building Name']
+    } else {
+      display_name = item['Lower Case Street Name'];
+    }
+
     return {
       id: ++i,
       street_number: item['Street Number'],
       street_name: item['Lower Case Street Name'],
       building_name: item['Lower Case Building Name'],
+      display_name: display_name,
       postcode: item['Post Code'],
       ward: item['Ward'],
       conservation_area: item['Conservation Area'],

middleware/graphql.js

@@ -9,7 +9,7 @@ const grapqlSchema = buildSchema(
 );
 
 const getBuildings = async () => {
-  return await islington.find().sort({ id: 1 });
+  return await islington.find().sort({ display_name: 1 });
 };
 
 module.exports = graphqlHTTP({

models/islington.js

@@ -20,6 +20,7 @@ const islingtonSchema = new Schema({
   street_number: String,
   street_name: String,
   building_name: String,
+  display_name: String,
   postcode: String,
   ward: String,
   conservation_area: String,

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: {}
     });
   }
 
@@ -145,6 +146,7 @@ const query = gql`
       postcode
       ward
       building_name
+      display_name
       conservation_area
       date_built_actual
       date_built_estimate

src/components/BuildingDetails.js

@@ -120,7 +120,7 @@ class BuildingDetails extends Component {
       </section>
 
         <section>
-          <h4 className="ma0 f5 b"> Description  </h4>
+          <h4 className="f5 b"> Description  </h4>
           <p>{description}</p>
         </section>
 

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}/>
     })
 

src/components/Footer.js

@@ -30,12 +30,12 @@ const Footer = () => {
       </section>
 
       <section className="w-33-l pa2">
-        <div className="flex align-center justify-end">
+        <div className="flex items-center justify-center justify-end-l">
           <div>
-          <img className="w4" alt="Partner: Historic England" src={historicEngland} />
+          <img className="w5" alt="Partner: Historic England" src={historicEngland} />
           </div>
           <div>
-          <img className="w4" alt="Partner: London Borough of Islington" src={islington} />
+          <img className="w5" alt="Partner: London Borough of Islington" src={islington} />
           </div>
         </div>
       </section>

src/components/Map.js

@@ -36,9 +36,6 @@ class Map extends Component {
 
   shouldComponentUpdate(nextProps, prevState) {
     if (nextProps.building.significance && !prevState.selectedBuildingId) {
-      console.log(nextProps.building.id, 'building id nextprop')
-      console.log(nextProps.building.longitude, 'building longitude nextprop')
-      console.log(nextProps.building.latitude, 'building latitude nextprop')
       this.selectedBuilding(nextProps.building.id);
       let longitude = nextProps.building.longitude;
       let latitude = nextProps.building.latitude;
@@ -76,7 +73,6 @@ class Map extends Component {
   }
 
   hoveringItem = (id) => {
-    console.log('hovering in hovering item')
     this.setState({ hovering: !this.state.hovering, id } )
   }
 

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>

src/components/Nav.js

@@ -12,7 +12,7 @@ const Nav = ({ handleIsHomePage, handleIsAboutPage, isAbout }) => {
       </div>
 
       <p
-        className="ma0 primary pointer pt1 pl1 pr3" onClick = { () => { handleIsAboutPage()} }
+        className="ma0 primary pointer pt1 pl1 pr3 b underline f4-l" onClick = { () => { handleIsAboutPage()} }
         > { isAbout ? 'Home' : 'About' } </p>
     </nav>
   );