text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { setSearchField, requestRobots } from '../actions'
  
  import CardList from '../components/CardList/CardList';
  import Scroll from '../components/Scroll/Scroll';
  import SearchBox from '../components/SearchBox/SearchBox';
  import ErrorBoundry from '../components/ErrorBoundry/ErrorBoundry'
  
  import './App.css'
  
  const mapStateToProps = (state) => {
    return {
      searchField: state.searchRobots.searchField,
      robots: state.requestRobots.robots,
      isPending: state.requestRobots.isPending,
      error: state.requestRobots.error
    }
  }
  
  const mapDispatchToProps = (dispatch) => {
    return {
      onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
      onRequestRobots: () => dispatch(requestRobots())
    }
  }
  
  class App extends Component {
    componentDidMount() {
      this.props.onRequestRobots();
    }
  
    render() {
      const { searchField, onSearchChange, robots, isPending } = this.props;
      const filteredRobots = robots.filter(robot => {
        return robot.name.toLowerCase().includes(searchField.toLowerCase());
      })
      if (isPending) {
        return <h1>Loading</h1>
      } else {
        return (
          <div className='tc'>
            <h1 className='f-headline'>RoboFriends</h1>
            <p className='slogan'><strong>Creating our favourite friends!</strong></p>
            <SearchBox searchChange={onSearchChange} />
            <Scroll>
              <ErrorBoundry>
                <CardList robots={filteredRobots} />
              </ErrorBoundry>
            </Scroll>
          </div>
        );
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);