<repo_name>Dianakove32/api<file_sep>/src/components/ItemList.js
import React, { Component } from 'react'
import GetInfo from './GetInfo'
import '../App.css'
import Spiner from './Spiner.js'
import Search from './Search';

export default class ItemList extends Component {
    constructor() {
        super()
          this.handleSort = this.handleSort.bind(this)
    }
    getInfo = new GetInfo()
    state = {
        peopleList: null,
        characterforSearch: ''
    }
    componentDidMount() {
        this.getInfo.getAllCharacters()
            .then((peopleList) => {
                this.setState({
                    peopleList
                })
            })

    }
    handleSort(characterName) {
        this.setState({
            ...this.state,
            characterforSearch: characterName
        })
    }

    renderItems( ) {


        return this.state.peopleList.filter(person=>person.name.includes(this.state.characterforSearch)).map((person) => {

            console.log(this.state.characterforSearch)
            return (
                <li className="item_li"

                    key={person.char_id}
                    onClick={() => this.props.hendleInfo(person.char_id)}>
                    {person.name}
                </li>
            )
        })
    }



    render() {
        const { peopleList } = this.state



        if (!peopleList) {
            return <Spiner />
        }
        const items = this.renderItems()

        return (
            <div>


                <ul className="item_ul">
                    <Search handleSort={this.handleSort} />

                    {items}</ul>
            </div>
        )
    }
}
<file_sep>/src/components/Search.js
import React, { Component } from 'react'
import '../App.css'
export default class Search extends Component {
    render() {
        return (
            <div>
                <input type='text' placeholder='Search character...'
                  onChange={(e)=>this.props.handleSort(e.target.value)}/>
            </div>
        )
    }
}
<file_sep>/src/components/PersonInfo.js
import React, { Component } from 'react'
import GetInfo from './GetInfo'
import '../App.css'
import Spiner from './Spiner'

export default class PersonInfo extends Component {
    getInfo = new GetInfo()
    constructor(props) {
        super(props)
        this.state = {
            person: null
        }
    }
    componentDidMount() {
        this.updatePerson()
    }


    componentDidUpdate(prevProps) {
        if (this.props.info !== prevProps.info) {
            this.updatePerson();
        }
    }
    updatePerson() {
        const { info } = this.props
        if (!info) {
            return
        }

        this.getInfo.getPerson(info)
            .then((person) => {

                this.setState({
                    person
                })
            })
    }

    render() {

        const { person } = this.state
        if (!person) {
            return <Spiner />

        }



        return (

            <div>
                {person.map(el => {
                    return <div className="PersonInfo" key={el.char_id}>
                        <img src={el.img} alt="pict" />
                        <p><b>Name: </b>{el.name}</p>
                        <p><b>Nickname: </b>{el.nickname}</p>
                        <p><b>Portrayed: </b>{el.portrayed}</p>
                        <p><b>Status: </b>{el.status}</p>
                    </div>

                })}

            </div>
        )
    }
}
<file_sep>/src/App.js
import './App.css';
import GetInfo from './components/GetInfo';
import ItemList from './components/ItemList';
import PersonInfo from './components/PersonInfo';


import React, { Component } from 'react'



export default class App extends Component {
  constructor() {
    super()
    this.state = {
      info: 1,

    }
    this.hendleInfo = this.hendleInfo.bind(this)

  }

  hendleInfo(id) {
    this.setState({
      info: id
    })

  }
  render() {

    return (
      <div>
        <h1>The Breaking  Bad Characters</h1>
        <h3>Information received using API</h3>
        <div className="App">

          <ItemList hendleInfo={this.hendleInfo} />
          <PersonInfo info={this.state.info} />

        </div>
        <h3><NAME>  <span>WildCodeSchool</span> </h3>
      </div>

    );
  }
}













// fetch(urlCharacters)
// .then((res)=>{
// return res.json()
// })
// .then((body)=>{
//   console.log('what we have2', body)
// })