Installed dotenv, added mapbox access token and minor map styles - Ma…

…pbox now working

.env

@@ -1 +1,3 @@
 SKIP_PREFLIGHT_CHECK=true
+
+REACT_APP_MAPBOX_ACCESS_TOKEN='pk.eyJ1IjoiZWxvaXNlYmFycm93IiwiYSI6ImNqenNpZGwyYzFtamIzY281ZThoZWNrMGEifQ.SWnRqoz8mwfwUpg0ci3Xkw'

README.md

@@ -104,6 +104,9 @@ function reverse(string) {
 **ERROR**: I can't return individual borough data in the ByBorough component - tried looping through using .filter and .forEach, neither updated the DOM. Also tried looping through all data in Main's async function and distributing borough data to state but that only returned 1 object each time instead of all borough data.
 **RESOLUTION**: My code in .forEach was correct but despite including a return statement forEach will not return any data.
 
+**ERROR**: I can't get my mapbox to render in the NearYou component.
+**RESOLUTION**: My MapboxAccessToken environment variable in my .env file needed REACT_APP_ in front of it & I had to restart my react server.
+
 ## Questions
 
 **QUESTION**:                               

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "dotenv": "^8.1.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-map-gl": "^5.0.10",

public/index.html

@@ -15,7 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css' rel='stylesheet' />
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,37 +1,17 @@
 import React from 'react';
 import './App.css';
-import axios from 'axios'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import Main from './components/Main'
 
-class App extends React.Component {
-  state = {
-    data: [],
-  }
-
-  makeApiCall = async () => {
-    const response = await axios.get('https://data.cityofnewyork.us/resource/sxx4-xhzg.json')
-    const data = response.data;
-
-    this.setState({
-      data
-    })
-  }
-
-  componentDidMount() {
-    this.makeApiCall();
-  }
-
-  render() {
-    return (
-      <div className="App">
-        <Header />
-        <Main apiData={this.state.data} />
-        <Footer />
-      </div>
-    );
-  }
+function App() {
+  return (
+    <div className="App">
+      <Header />
+      <Main />
+      <Footer />
+    </div>
+  );
 }
 
 export default App;

src/components/ByBorough.js

@@ -8,14 +8,6 @@ const ByBorough = (props) => {
     fontSize: '0.9rem',
   }
 
-  const allBins = props.apiData.map( (d, i) => {
-    return(
-      <li key={i}>
-      BOROUGH: {d.borough} PARK NAME: {d.park_site_name} ADDRESS: {d.address}
-      </li>
-    )
-  })
-
   const boroughData = props.apiData
     .filter((d) => d.borough === borough)
     .map((d, i) => {
@@ -27,7 +19,7 @@ const ByBorough = (props) => {
   })
   return (
     <div>
-    <h2>Select your borough:</h2>
+    <h2>View recycling bins by borough</h2>
     <select style={dropdownStyles} onChange={(e) => setBorough(e.target.value)} name="boroughs" id="boroughs">
       <option value="null">Choose Your Borough</option>
       <option value="Bronx">Bronx</option>

src/components/NearYou.js

@@ -1,24 +1,39 @@
 import React from 'react'
 import ReactMapGL from 'react-map-gl'
+require('dotenv').config()
 
 class NearYou extends React.Component {
   state = {
+    mapStyle: '',
     viewport: {
       width: 400,
       height: 400,
-      latitude: 37.7577,
-      longitude: -122.4376,
+      latitude: 40.7401491,
+      longitude: -73.9897853,
       zoom: 8
     }
   }
+
+
+  // implement setViewport method and setstate from there
+  // setViewport = () => {
+  //   this.setState({ viewport })
+  // }
+
   render() {
+    const mapStyles = {
+      'display': 'flex',
+      'flexDirection': 'column',
+      'alignItems': 'center',
+    }
+
     return (
-      <div>
+      <div style={mapStyles}>
         <h2>Public recycling bins near you:</h2>
         <ReactMapGL
+          mapboxAccessToken={process.env.MapboxAccessToken}
           {...this.state.viewport}
           onViewportChange={(viewport) => this.setState({viewport})}
-
         />
       </div>
     )