Permalink
Browse files

added code

  • Loading branch information...
JimHaff committed Nov 7, 2019
1 parent ef526b2 commit 93c4726a26d3ff2729bfd7a9641e45070c00e9a4
Showing with 233 additions and 21 deletions.
  1. +124 −0 package-lock.json
  2. +3 −1 package.json
  3. +76 −20 src/App.js
  4. +29 −0 src/CrimesList/index.js
  5. +1 −0 src/index.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -5,7 +5,9 @@
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
"react-scripts": "3.2.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.88.1"
},
"scripts": {
"start": "react-scripts start",
@@ -1,26 +1,82 @@
import React from 'react';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import CrimesList from './CrimesList';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends Component {
constructor(){
super();
// constructor only ever gets called once

this.state = {
crimes: []
}
}
getCrimes = async () => {

try {
// the endpoint is the url we are making are request too.
// fetch is a native js function that makes http requests
// by default it makes a get request
// we use fetch when we don't want to refresh our page
const crimes = await fetch('https://data.cityofchicago.org/resource/w98m-zvie.json')
// our response will be in the form of JSON, a string
// data is sent across the internet as JSON
// parse the json, is turn the string into objects
const parsedCrimes = await crimes.json();
console.log(parsedCrimes);
this.setState({
crimes: parsedCrimes // parsed crimes is an array
})
// we should always log out the response before write
// any other code!

} catch(err){
console.log(err);
}


}
componentDidMount(){
// gets called once, after the intial render
// is the component on the dom? ComponentDidMOunt
// any calles to an external data source that we want connected
// as soon as our app is loaded we call it in componentDidMount
this.getCrimes();
}
deleteCrime = (crimeId) => {
console.log(crimeId, ' crimeId')

// function to setState, YOU DON"T HAVE TO DO IT THIS WAY
// IT's just another way
// arrow function we are defining a function
// the () to right of the arrow, means return
// argumenet to a functional setState is always the
// previousState

// const filteredArray = this.state.crimes.filter((crime) => {
// return crime.id !== crimeId
// })

// this.setState({
// crimes: filteredArray
// })


this.setState((previousState) => (
{crimes: previousState.crimes.filter((crime) => crime.id !== crimeId)}
))

}
render(){
// render method gets called everytiime we use this.setState
// and on the intial load up
return (
<CrimesList crimes={this.state.crimes} deleteCrime={this.deleteCrime}/>
)
}
}



export default App;
@@ -0,0 +1,29 @@
import React from 'react';
import { Button, Segment } from 'semantic-ui-react';



function CrimesList(props){
// render out a list
const crimesList = props.crimes.map((crime, i) => {
return (
<Segment key={crime.id}>
<span>Block: {crime.block}</span> - <br/>
<strong>Description: {crime.description}</strong>
<Button onClick={() => props.deleteCrime(crime.id)}>Delete</Button>
</Segment>
)
})

return (
<React.Fragment>
<h5>Crimes</h5>
<ul>
{crimesList}
</ul>
</React.Fragment>
)
}


export default CrimesList
@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css'; // above are global stylesheet
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

0 comments on commit 93c4726

Please sign in to comment.