{"size": 2994, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "jamiecatania/baltimore-homeless-shelter-listing", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "jamiecatania/baltimore-homeless-shelter-listing", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "jamiecatania/baltimore-homeless-shelter-listing", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 34.4137931034, "max_line_length": 128, "alphanum_fraction": 0.5911823647}
import React, { Component } from 'react';
import { Navbar, Grid, Row, Col } from 'react-bootstrap';
import './App.css';
import { GoogleApiWrapper } from 'google-maps-react';
import MapContainer from './Components/MapContainer';
import FilteredShelterList from './Components/FilteredShelterList';
import FilterNav from './Components/FilterNav';
import shelter_black from './assets/shelter_black-01.png';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      shelterData: [],
      filteredData: [],
      currentlySelectedShelter: '',
      currentlySelectedIndex: null,
      activeFilter: 'all',
      isDataLoaded: false
    }
  }

  //Fetches the raw data set just before the App Component mounts to the DOM.
  componentWillMount() {
    //Fetch the dataset from https://data.baltimorecity.gov/Health/Homeless-Services/uukz-aw5g via Socrata Open Data API (SODA).
    const URL = "https://data.baltimorecity.gov/resource/4adc-a5y9.json";
    fetch(URL).then(res => res.json()).then(json => {
      this.setState({ shelterData: json, filteredData: json, isDataLoaded: true });
    });
  }

  render() {
    const that = this; // Explicitly declaring the meaning of 'this'
    const activeFilter = that.state.activeFilter;

    return (
      <div>
        <Navbar>
          <Navbar.Header>
            <h1 className='site-brand'>
              <img className='site-logo' src={shelter_black} />
              Baltimore Homeless Shelter Listings
            </h1>
          </Navbar.Header>
        </Navbar>
        <Grid>
          <Col sm={12}>
            <FilterNav activeFilter={activeFilter} activeKey={that.state.activeFilter} onChange={function (eventKey) {
              const tempFilterData = eventKey === 'all' ? that.state.shelterData : that.state.shelterData.filter(el => {
                return el[eventKey] === "1";
              })
              that.setState({ activeFilter: eventKey, filteredData: tempFilterData });
            }} />
          </Col>
          <Row>
            <Col xs={12} md={4}>
              <FilteredShelterList
                filteredShelters={that.state.filteredData}
                currentlySelectedShelter={that.state.currentlySelectedShelter}
                selectShelter={function (address) {
                  that.setState({ currentlySelectedShelter: address });
                }}
              />
            </Col>
            <Col xs={12} md={8}>
              <MapContainer
                google={that.props.google}
                currentlySelectedShelter={that.state.currentlySelectedShelter}
                filteredShelters={that.state.filteredData}
                selectShelter={function (address) {
                  that.setState({ currentlySelectedShelter: address });
                }}
              />
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyAKbBX63r3ioFdUGQyChz_5hajqWdA26Io',
})(App)
