stitch-ui/src/debugconsole/components/UserModal.js

/* eslint-disable react/no-array-index-key */
import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import Modal from "react-modal";
import { List } from "immutable";
import { User } from "../../user";
import UserOption from "./UserOption";
import { Button } from "../../core";

function UserModal({
  open,
  onClose,
  users,
  loadUsers,
  selectUser,
  selectedUser,
  lastUserId
}) {
  const loadMore = () => {
    loadUsers(lastUserId ? { after: lastUserId } : {});
  };
  return (
    <Modal
      isOpen={open}
      onRequestClose={onClose}
      onAfterOpen={loadMore}
      contentLabel="Choose User"
      className="view-modal-dialog"
      overlayClassName="view-modal-overlay"
    >
      <div className="view-modal-content">
        <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-identities">
              Providers
            </div>
          </div>
          {users
            .toJS()
            .map((u, i) =>
              <UserOption
                selectUser={selectUser}
                key={i}
                selected={selectedUser && selectedUser.getId() === u._id}
                user={new User(u)}
              />
            )}
          {lastUserId
            ? <Button small default onClick={loadMore}>
                Load more
              </Button>
            : null}
          <Button primary small onClick={onClose}>
            Done
          </Button>
        </div>
      </div>
    </Modal>
  );
}

UserModal.propTypes = {
  // Funcs
  onClose: PropTypes.func.isRequired,
  loadUsers: PropTypes.func.isRequired,
  selectUser: PropTypes.func.isRequired,
  // Data
  open: PropTypes.bool,
  lastUserId: PropTypes.string,
  selectedUser: PropTypes.instanceOf(User),
  users: PropTypes.instanceOf(List).isRequired
};

UserModal.defaultProps = {
  open: false,
  lastUserId: null,
  selectedUser: null
};

export default UserModal;