Skip to content

Commit

Permalink
ByBorough component up and running
Browse files Browse the repository at this point in the history
  • Loading branch information
Eloise Barrow authored and Eloise Barrow committed Aug 26, 2019
1 parent 8eb45ac commit e0face8
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 55 deletions.
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Project Overview

## Project Links
Github repo: https://github.com/eloisebarrow/recycle-nyc
Deployment: TBD

## Project Description

Expand Down Expand Up @@ -67,19 +70,20 @@ The footer component will contain a simple copyright logo and a link to go to th

| Component | Priority | Estimated Time | Time Invested | Actual Time |
| --- | :---: | :---: | :---: | :---: |
| Design site, architecture & wireframe | H | 4hrs| 6hrs | 6hrs |
| Establish each component | H | 30mins| 30mins | TBA |
| Put router in place | H | 2hrs | 40mins | TBA |
| Pull data into each Filter component ('near you' and 'by borough') | H | 2hrs | 30mins | TBA |
| Pseudocode logic for retrieving data from 'by borough' | H | 2hrs | TBA | TBA |
| Code logic for retrieving 'by borough' data & render it | H | 4hrs | 3hrs 10mins | TBA |
| Code logic for retrieving 'by borough' data & render it | H | 4hrs | 3hrs 40mins | TBA |
| Research geolocation API data | H | 1hr | 10mins | TBA |
| Pull data into 'near you' using geolocation API | H | 2hrs | 5mins | TBA |
| Pseudocode logic for retrieving data from 'near you' | H | 2hrs | TBA | TBA |
| Render data for 'near you' | H | 2hrs | TBA | TBA |
| Style header | H | 1hr | 10mins | TBA |
| Style main | M | 2hrs | TBA | TBA |
| Style footer | M | 30mins | 15mins | TBA |
| Total | | 21hrs | | |
| Total | | 25hrs | | |

## Additional Libraries
From the start of the project, I am planning to use axios and react router dom. Axios will allow me to efficiently call the API and react router dom will allow my site to be efficient in its content delivery. Also react-map-gl for geolocation.
Expand All @@ -97,8 +101,8 @@ function reverse(string) {
## Issues and Resolutions
Here I'll list all major issues encountered and their resolution.

**ERROR**: (sample) app.js:34 Uncaught SyntaxError: Unexpected identifier
**RESOLUTION**: (sample) Missing comma after first object in sources {} object
**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.

## Questions

Expand Down
30 changes: 16 additions & 14 deletions src/components/ByBorough.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react'

const ByBorough = (props) => {
const [borough, setBorough] = React.useState(null);

const dropdownStyles = {
margin: '1% 0',
fontSize: '0.9rem',
Expand All @@ -9,33 +11,33 @@ const ByBorough = (props) => {
const allBins = props.apiData.map( (d, i) => {
return(
<li key={i}>
Borough: {d.borough} Park Name: {d.park_site_name} Address: {d.address}
BOROUGH: {d.borough} PARK NAME: {d.park_site_name} ADDRESS: {d.address}
</li>
)
})

const bronx = props.apiData.forEach( (d, i) => {
if (props.apiData && d.borough === 'Bronx') {
return(
const boroughData = props.apiData
.filter((d) => d.borough === borough)
.map((d, i) => {
return (
<li key={i}>
Park Name: {d.park_site_name} Address: {d.address}
BOROUGH: {d.borough} PARK NAME: {d.park_site_name} ADDRESS: {d.address}
</li>
)
}
})
// console.table('tests from ByBorough', this.props.apiData[0] && this.props.apiData[0].borough)
return (
<div>
<h2>Select your borough:</h2>
<select style={dropdownStyles} name="boroughs" id="boroughs">
<option value="bronx">Bronx</option>
<option value="brooklyn">Brooklyn</option>
<option value="manhattan">Manhattan</option>
<option value="queens">Queens</option>
<option value="staten-island">Staten Island</option>
<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>
<option value="Brooklyn">Brooklyn</option>
<option value="Manhattan">Manhattan</option>
<option value="Queens">Queens</option>
<option value="Staten Island">Staten Island</option>
</select>

{allBins}
{boroughData}
</div>
)
}
Expand Down
40 changes: 3 additions & 37 deletions src/components/Main.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,61 +9,27 @@ import Resources from './Resources'
class Main extends React.Component {
state = {
data: [],
bronxData: [],
brooklynData: [],
statenIslandData: [],
queensData: [],
manhattanData: []
}

makeApiCall = async () => {
const response = await axios.get('https://data.cityofnewyork.us/resource/sxx4-xhzg.json')
const data = response.data;
this.setState({
data
}, () => {
for (let i = 0; i < data.length; i++) {
if (data[i].borough === 'Bronx') {
this.setState({
bronxData: data[i]
}) // ends inner this.setState
} else if (data[i].borough === 'Brooklyn') {
this.setState({
brooklynData: data[i]
}) // ends inner this.setState
} else if (data[i].borough === 'Staten Island') {
this.setState({
statenIslandData: data[i]
}) // ends inner this.setState
} else if (data[i].borough === 'Queens') {
this.setState({
queensData: data[i]
}) // ends inner this.setState
} else if (data[i].borough === 'Manhattan') {
this.setState({
manhattanData: data[i]
}) // ends inner this.setState
} // ends if statement
} // ends for loop
}) // closes 1st this.setState
} // closes makeApiCall
})
}

componentDidMount() {
this.makeApiCall();
}

render() {
// console.log('this is data from render', this.state.bronxData, this.state.brooklynData, this.state.statenIslandData, this.state.queensData, this.state.manhattanData)
return (
<Switch>
<Route path="/about" render={() => <About />}></Route>
<Route path="/resources" render={() => <Resources />}></Route>
<Route path="/by-borough" render={() => <ByBorough apiData={this.state.data}
bronxData={this.state.bronxData}
brooklynData={this.state.brooklynData}
statenIslandData={this.state.statenIslandData}
queensData={this.state.queensData}
manhattanData={this.state.manhattanData} />}></Route>
borough={'Staten Island'} />}></Route>
<Route path="/near-you" render={() => <NearYou apiData={this.state.data} />}></Route>
<Route path="/"></Route>
</Switch>
Expand Down

0 comments on commit e0face8

Please sign in to comment.