gistfile1.txt

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './App.css';
import Link from '../Components/Link';
import SearchBox from '../Components/SearchBox';
import Cardlist from '../Components/Cardlist';
import Scroll from '../Components/Scroll';
import ErrorBoundary from '../Components/ErrorBoundary';

import { setSearchField, requestRobots } from '../actions';

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 {

 render() {
  const { searchField, onSearchChange, robots, isPending } = this.props;
  const filteredRobots = robots.filter(robot => {
      return robot.name.toLowerCase().includes(searchField.toLowerCase())
    })
    return isPending ? 
      <h1>Loading</h1>:

      (
        <div className='tc'>
          <h1 className='f1'>Robofriends</h1>
          <SearchBox searchChange={onSearchChange}/>
          <Scroll>
          <ErrorBoundary>
            <Cardlist robots={filteredRobots}/>
          </ErrorBoundary>
          </Scroll>
          <Link />
        </div>
      );

 }
  componentDidMount() {
    this.props.onRequestRobots();
  }

}
 
export default connect(mapStateToProps, mapDispatchToProps)(App);