AdminUsersList.js

import React, { Component } from 'react';
import _ from 'lodash'
import { connect } from 'react-redux';
import { getUsers, deleteUser, updateRole } from './actions'
import { Table, Icon, Header } from 'semantic-ui-react'

import RoleDropDown from './sub_components/RoleDropDown'

class AdminUsersList extends Component {
  componentDidMount(){
    this.props.startLoading()
  }
  render(){
    return (
      <div>
       { this.props.users.isLoaded ? loaded(this.props.users.list, this.props) : <div> Loading </div> }
      </div>
    );
  }
}

//TODO: Extract stateless components

const userToRow = ({user,roleUpdate, deleteCallback } ) => {
  return (<Table.Row key={user.id}>
    <Table.Cell> { user.email } </Table.Cell>
    <Table.Cell> <RoleDropDown selectedRole={user.role} handleChange={ (e, { value }) => roleUpdate(user.id, value)} /> </Table.Cell>
    <Table.Cell> <Icon name="edit" /> </Table.Cell>
    <Table.Cell> <Icon name="delete" onClick={ () => deleteCallback(user.id)} /> </Table.Cell>
  </Table.Row>)
}

const loaded = ({users} = props) => {
  const transformed = (
  <div>
    <Header
      as='h1'
      content='Manage Users'
      textAlign='center'
    />
    <Table celled>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Email</Table.HeaderCell>
          <Table.HeaderCell>Role</Table.HeaderCell>
          <Table.HeaderCell> Edit </Table.HeaderCell>
          <Table.HeaderCell> Delete </Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        { _.map(users.list, (user) => userToRow({...props, user})) }
      </Table.Body>
    </Table>
  </div>)
  return transformed
}

export default connect(
  (state) => ({users: state.userManager}),
  (dispatch) => ({
    startLoading: () => {
      dispatch(getUsers)
    },
    deleteCallback: (uid) => dispatch(deleteUser(uid)),
    roleUpdate: (uid, newRole) => {
      dispatch(updateRole(uid, newRole))
    }
  })
)(AdminUsersList)