import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import UserListItem from './UserListItem';

export default class UserList extends Component {
    componentWillMount() {
        this.props.fetchUsers();
    }

    renderUsers(users) {
        const removeUser = this.props.deleteUser;
        return users.map((user) => {
            return (
                <UserListItem user={user} key={user.id} onRemove={()=>removeUser(user.id)}/>
            );
        });
    }

    render() {
        const {users, loading, error} = this.props.userList;
        if (loading) {
            return <div className="row"><h1>Użytkownicy</h1><h3>Loading...</h3></div>
        } else if (error) {
            return <div className="alert alert-danger">Error: {error.message}</div>
        }

        return (
            <div className="row">
                <h1>Użytkownicy</h1>
                <Button onClick={ () => this.props.refreshUsers() }>Odświerz</Button>
                <table className="table table-sripped">
                    <thead>
                    <tr>
                        <td>Id</td>
                        <td>Nazwa użytkownika</td>
                        <td>Email</td>
                        <td>Akcja</td>
                        <td>Akcja</td>
                    </tr>
                    </thead>
                    <tbody>
                    {this.renderUsers(users)}
                    </tbody>
                </table>
            </div>
        );
    }
}