stitch-ui/src/auth/components/Users.js

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { List } from "immutable";
import { addAlert } from "../../alert";
import { Button } from "../../core";
import UserDisplay from "./UserDisplay";
import AddUserModal from "./AddUserModal";
import * as actions from "../actions";

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.loadMore = this.loadMore.bind(this);
    this.openAddUserModal = this.openAddUserModal.bind(this);
    this.closeAddUserModal = this.closeAddUserModal.bind(this);
    this.addUser = this.addUser.bind(this);
    this.state = {
      addUserModalIsOpen: false
    };
  }

  componentDidMount() {
    const { groupId, _id: appId } = this.props.app;
    this.props.loadProviders(groupId, appId);
    this.props.resetUsers();
    this.loadMore();
  }

  loadMore(after) {
    const { groupId, _id: appId } = this.props.app;
    this.props.loadUsers(groupId, appId, after ? { after } : {});
  }

  openAddUserModal() {
    const { groupId, _id: appId } = this.props.app;
    this.props.resetUsers();
    this.props.loadUsers(groupId, appId, {});
    this.setState({ addUserModalIsOpen: true });
  }

  closeAddUserModal() {
    this.loadMore(this.props.lastUserId);
    this.setState({ addUserModalIsOpen: false });
  }

  addUser({ email, password }) {
    const user = { email, password };
    return this.props.addUser(this.props.app.groupId, this.props.app._id, user);
  }

  render() {
    const localUserpassEnabled = "local/userpass" in this.props.providers;

    const addUserButton = (
      <div className="tabs-content-actions">
        <div className="tabs-content-actions-left">
          <Button primary small onClick={this.openAddUserModal}>
            + Add User
          </Button>
        </div>
      </div>
    );
    const addUserModal = (
      <AddUserModal
        addUser={this.addUser}
        open={this.state.addUserModalIsOpen}
        onClose={this.closeAddUserModal}
        localUserpassEnabled={localUserpassEnabled}
      />
    );

    if (this.props.users.size === 0) {
      return (
        <div>
          {addUserButton}
          <div className="users-list-is-empty">No users found.</div>
          <div>
            {addUserModal}
          </div>
        </div>
      );
    }

    return (
      <div>
        {addUserButton}
        <div className="users-list">
          <div className="users-list-item">
            <div className="users-list-item-column users-list-item-header users-list-item-pic" />
            <div className="users-list-item-column users-list-item-header users-list-item-name">
              Name
            </div>
            <div className="users-list-item-column users-list-item-header users-list-item-id">
              Id
            </div>
            <div className="users-list-item-column users-list-item-header users-list-item-type">
              Type
            </div>
            <div className="users-list-item-column users-list-item-header users-list-item-identities">
              Providers
            </div>
          </div>
          {this.props.users
            .toJS()
            .map(u =>
              <UserDisplay
                revoke={this.props.revoke}
                app={this.props.app}
                addAlert={this.props.addAlert}
                alertKey={`authusers/${u._id}`}
                key={u._id}
                user={u}
              />
            )}
          {this.props.lastUserId &&
            <Button
              small
              default
              onClick={() => this.loadMore(this.props.lastUserId)}
            >
              Load more
            </Button>}
          {addUserModal}
        </div>
      </div>
    );
  }
}

Users.propTypes = {
  lastUserId: PropTypes.string,
  addAlert: PropTypes.func.isRequired,
  revoke: PropTypes.func.isRequired,
  app: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    groupId: PropTypes.string.isRequired
  }).isRequired,
  providers: PropTypes.objectOf(PropTypes.object).isRequired,
  users: PropTypes.instanceOf(List).isRequired,
  loadUsers: PropTypes.func.isRequired,
  addUser: PropTypes.func.isRequired,
  resetUsers: PropTypes.func.isRequired,
  loadProviders: PropTypes.func.isRequired
};

Users.defaultProps = {
  lastUserId: null
};

const mapStateToProps = state => {
  const { app } = state.app.root;
  const { users, lastUserId } = state.auth.users;
  const { providers } = state.auth.auth;
  return { users, lastUserId, app, providers };
};

const mapDispatchToProps = dispatch => ({
  addAlert: (k, m) => dispatch(addAlert(k, m)),
  revoke: (appId, userId) => dispatch(actions.revokeSessions(appId, userId)),
  resetUsers: () => dispatch(actions.resetUsersAction()),
  loadUsers: (groupId, appId, filter) =>
    dispatch(actions.loadUsers(groupId, appId, filter)),
  addUser: (groupId, appId, user) =>
    dispatch(actions.addUser(groupId, appId, user)),
  loadProviders: (groupId, appId) =>
    dispatch(actions.loadProviders(groupId, appId))
});

export default connect(mapStateToProps, mapDispatchToProps)(Users);