From 65b53a2be46ebb35f89fff53ff83e0e7c5fdf34b Mon Sep 17 00:00:00 2001
From: Karina Algarra <kaalgarra04@gmail.com>
Date: Tue, 6 Oct 2020 18:07:07 -0500
Subject: [PATCH] [ADD]changes

---
 src/components/MapContainer.jsx | 91 ++++++++++++++++++++++++++++-----
 src/styles/containers/App.styl  |  5 +-
 2 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/src/components/MapContainer.jsx b/src/components/MapContainer.jsx
index 72f8b09..75fe56a 100644
--- a/src/components/MapContainer.jsx
+++ b/src/components/MapContainer.jsx
@@ -1,20 +1,85 @@
 import React from 'react';
 import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
 
-const MapContainer = ({ google }) => {
-  return (
-    <Map
-      google={google}
-      zoom={5}
-      initialCenter={{ lat: 19.5943885, lng: -97.9526044 }}
-    >
-      <Marker
-        position={{ lat: 19.4267261, lng: -99.1718706 }}
-      />
-    </Map>
-  );
+import '../styles/components/MapContainer.styl';
+
+
+class MapContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.google = props.google;
+    this.state = {
+      data: [],
+      show: false,
+    };
+  }
+
+  componentDidMount() {
+    this.getData();
+  }
+
+  getData = () => {
+    fetch('http://localhost:3000/db')
+      .then(response => response.json())
+      .then(data => this.setState({ data: data }));
+  };
+
+  componentWillUnmount() {
+    clearImmediate(this.setStateShow);
+    clearImmediate(this.map);
+  }
+
+  handleClick = e => {
+    this.flipFlop();
+  };
+
+  flipFlop = () => {
+    const maps = document.getElementById('map');
+    if (!this.state.show) {
+      maps.classList.add('hire');
+      this.state.show = true;
+    } else {
+      maps.classList.remove('hire');
+      this.state.show = false;
+    }
+  };
+
+  render() {
+    console.log(this.state.data.db);
+
+    return (
+      <React.Fragment>
+        <div>
+          <button onClick={() => this.handleClick()} className="button">
+            Ocultar
+          </button>
+        </div>
+        <div id="map">
+          <Map
+            style={{ height: '95%' }}
+            google={this.google}
+            zoom={5}
+            initialCenter={{ lat: 19.5943885, lng: -97.9526044 }}
+          >
+            {data.locations.map((location, id) => {
+              return (
+                <Marker
+                  key={id}
+                  position={{ lat: location.venueLat, lng: location.venueLon }}
+                >
+                  <InfoWindow>
+                    <h1>{location.venueName}</h1>
+                  </InfoWindow>
+                </Marker>
+              );
+            })}
+          </Map>
+        </div>
+      </React.Fragment>
+    );
+  }
 }
 
 export default GoogleApiWrapper({
-  apiKey: 'AIzaSyCmjvkXB_DMnBUNwxQztLMStyQmA_szbNw'
+  apiKey: 'AIzaSyCmjvkXB_DMnBUNwxQztLMStyQmA_szbNw',
 })(MapContainer);
\ No newline at end of file
diff --git a/src/styles/containers/App.styl b/src/styles/containers/App.styl
index ad93502..bacddb6 100644
--- a/src/styles/containers/App.styl
+++ b/src/styles/containers/App.styl
@@ -5,4 +5,7 @@ body
 
 section
   margin 0
-  paddin 0
\ No newline at end of file
+  paddin 0
+
+.hire
+ display none
\ No newline at end of file