import React from 'react';




class GetUser extends React.Component {
    state = {
        arrayUsers: []
    }
    componentDidMount() {
        const { user } = this.props;
        this.setState({ arrayUsers: user })

    }
    componentWillReceiveProps(nextProps) {
        const { isFetching, data, deleteUsers, initialValues} = nextProps;
        const { arrayUsers } = this.state;
        if (isFetching){
            for (let key in arrayUsers) {
                if (arrayUsers[key]._id == data._id) {
                    this.setState(prevState => {
                        const newArray = prevState.arrayUsers.slice();
                        newArray.splice(key, 1, data)
                        return {
                            arrayUsers: newArray
                        }
                    })
                    break;

                }
            }
        }
        if(deleteUsers.isFetching){
            for (let key in arrayUsers) {
                if (arrayUsers[key]._id ==initialValues._id) {
                    this.setState(prevState => {
                        const newArray = prevState.arrayUsers.slice();
                        newArray.splice(key, 1)
                        return {
                            arrayUsers: newArray
                        }
                    })
                    break;
                }

        }
        }
    }


        render() {
            const { handlers: { handelClick } } = this.props;
            const { arrayUsers } = this.state;


            return (
                <div class="list-group">

                    {arrayUsers && arrayUsers.map(el =>
                        <button type="button" class="text-center overflow-hidden rounded-pill btn-outline-light btn mb-4 borber bg-rgba border-0  font-ci font-ci-bold " id={el._id} onClick={handelClick.bind(null, { el })}>{el.name}</button>
                    )}
                </div>

            )
        }
    }




    export default GetUser