// components/ListUsers.js
import { IN_PROGRESS, FAILED, SUCCESS } from "redux-blackbox/constants";
 
const ListUsers = (users) => {
  if (users.uiState === IN_PROGRESS) {
    return <div>Loading...</div>
  }
  if (users.uiState === FAILED) {
    return <div className="notification is-danger">{users.error.message}</div>
  }
  if (users.uiState === SUCCESS) {
    if (users.listing.length) {
      return (
        <div>
          <ul>
            { users.listing.map(user =>{
                return <li>{user.name}</li>
              }) 
            }
          </ul>
        </div>
      )
    } else {
      return <div>Users list is empty</div>
    }
  }
  return null;
}
 
const mapStateToProps = (state) =>{
  return {
    users: state.users
  }
}
 
const mapDispatchToProps = {
  fetchUsersAction
}
 
export default connect(mapStateToProps, mapDispatchToProps)(ListUsers);