{"size": 1485, "ext": "js", "max_stars_repo_path": "src/containers/App.js", "max_stars_repo_name": "martincomito/robotic-search", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/containers/App.js", "max_issues_repo_name": "martincomito/robotic-search", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/containers/App.js", "max_forks_repo_name": "martincomito/robotic-search", "max_forks_repo_forks_event_min_datetime": "2019-03-11T16:53:16.000Z", "max_forks_repo_forks_event_max_datetime": "2019-03-11T16:53:16.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 22.8461538462, "max_line_length": 76, "alphanum_fraction": 0.6457912458}
import React, { Component } from 'react';
import CardList from '../components/CardList';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import './App.css';

class App extends Component {
	constructor(){
		super()
		this.state = {
			robots: [],
			searchfield: ''
		}
	}

	

	componentDidMount(){
		fetch('https://jsonplaceholder.typicode.com/users')
			.then(response => response.json())
			.then(users => this.setState({ robots: users}));
		
	}

	onSearchChange = (event) => {
		this.setState({ searchfield: event.target.value })

	}


	render(){
		const { robots, searchfield } = this.state;
		const filteredRobots = robots.filter(robot =>{
			return robot.name.toLowerCase().includes(searchfield.toLowerCase())
		})
		// Si no hay información o demora para cargar muestra animación de loading
		// si hay información la muestra
		return !robots.length ?
		(
			<div>	
				<h1 className="loadingTitle"> Loading </h1>
				<div class="cssload-square">
					<div class="cssload-square-part cssload-square-green"></div>
					<div class="cssload-square-part cssload-square-pink"></div>
					<div class="cssload-square-blend"></div>
				</div>
			</div>	
		)
		  
		  :
		  
	  (
			<div className='tc'>
				<h1 className='f1'>Robotic Search</h1>
				<SearchBox className= 'searchBox' searchChange={this.onSearchChange} />
				<br/>
				<Scroll>
					<CardList robots={filteredRobots}/>
				</Scroll>
			</div>	
		);	
	}
}

export default App;