solution-react-challenge-01

PULL_REQUEST_TEMPLATE.md

@@ -2,11 +2,11 @@
 
 Solución al reto 01 de React
 
-Nombre:
-Usuario Platzi:
+Nombre: Jhoan Canchila
+Usuario Platzi: jcanchila
 
 ## Reto:
-  - [ ] Primer problema
-  - [ ] Segundo problema
-  - [ ] Tercer problema
-  - [ ] Cuarto Problema (Opcional)
+  - [x] Primer problema
+  - [x] Segundo problema
+  - [x] Tercer problema
+  - [x] Cuarto Problema (Opcional)

locations.json

@@ -1,11 +1,13 @@
 {
   "locations": [
     {
+      "id":1,
       "venueLat": 19.42672619,
       "venueLon": -99.1718706,
       "venueName": "Platzi HQ CDMX"
     },
     {
+      "id":2,
       "venueLat": 4.6560716,
       "venueLon": -74.0595918,
       "venueName": "Platzi HQ Bogota"

package.json

@@ -28,6 +28,7 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
+    "classnames": "^2.2.6",
     "css-loader": "^3.2.0",
     "google-maps-react": "^2.0.2",
     "html-loader": "^0.5.5",
@@ -58,4 +59,4 @@
     "url": "https://github.com/gndx/react-challenge-01/issues"
   },
   "homepage": "https://github.com/gndx/react-challenge-01#readme"
-}
+}

src/components/MapContainer.jsx

@@ -1,18 +1,67 @@
-import React from 'react';
-import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
+import React, { Component } from 'react';
+import { Map, InfoWindow, GoogleApiWrapper, Marker } from 'google-maps-react';
+import '../styles/containers/Button.css';
 
-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>
-  );
+class MapContainer extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false,
+      showingInfoWindow: false,
+      activeMarker: {},
+      selectedPlace: {},
+    }
+    this.handleViewMap = () => {
+      this.setState({ show: !this.state.show })
+    }
+    this.handleMarkerClick=(props, marker,e)=>{
+      this.setState({
+        selectedPlace: props,
+        activeMarker: marker,
+        showingInfoWindow: true,
+      })
+    }
+  }
+
+  render() {
+    if (!this.state.show) {
+      return (
+        <>
+          <button className='style__button-hide' type='button' onClick={this.handleViewMap}>OCULTAR MAPA</button>
+          <Map
+            google={this.props.google}
+            zoom={5}
+            initialCenter={{ lat: 19.5943885, lng: -97.9526044 }}
+          >
+            {
+              this.props.markers.map(marker => (
+                  <Marker
+                    key={marker.id}
+                    name={marker.venueName}
+                    position={{ lat: marker.venueLat, lng: marker.venueLon }}
+                    onClick={this.handleMarkerClick}
+                  />
+                )
+              )
+            }
+            <InfoWindow 
+              marker={this.state.activeMarker}
+              visible={this.state.showingInfoWindow}
+            >
+              <div>
+                <h1>{this.state.selectedPlace.name}</h1>
+              </div>
+            </InfoWindow>
+          </Map>
+        </>
+      );
+    } else {
+      return (
+        <button className='style__button-show' type='button' onClick={this.handleViewMap}>MOSTRAR MAPA</button>
+      );
+    }
+  }
 }
 
 export default GoogleApiWrapper({

src/containers/App.jsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import MapContainer from "../components/MapContainer";
 import '../styles/containers/App.styl';
 
 const App = () => {
+  const API ='http://localhost:3000/locations';
+  const [markers, setMarkers]=useState([]);
+
+  useEffect(() => {
+    fetch(API)
+      .then(response => response.json())
+      .then(data => { setMarkers(data)})
+  }, [])
   return (
+
     <div className="App">
-      <MapContainer />
+       <MapContainer markers={markers} />
     </div>
   )
 };

src/styles/containers/Button.css

@@ -0,0 +1,21 @@
+.style__button-hide{
+  padding: 8px;
+  color: white;
+  background-color: aqua;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  border-radius: 3px;
+  margin: 5px 4.6em;
+}
+.style__button-show{
+   padding: 8px;
+   color: white;
+   background-color: green;
+   border: none;
+   cursor: pointer;
+   outline: none;
+   border-radius: 3px;
+   margin: 5px 4.6em;
+
+}