stitch-ui/src/admin/components/RootAdminUsers.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable import/prefer-default-export */
/* eslint-disable react/prefer-es6-class */
/* eslint-disable react/no-string-refs */
/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable jsx-a11y/href-no-hash */
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Button } from "../../core";
import { addAlert } from "../../alert";
import RootAdminUserDisplay from "./RootAdminUserDisplay";
import * as actions from "../actions";

const ALERTKEY_PREFIX = "rootadmin/";

class RootAdminUsers extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.loadMore = this.loadMore.bind(this);
    this.impersonate = this.impersonate.bind(this);
  }

  componentDidMount() {
    this.loadMore();
  }

  loadMore() {
    this.props.loadUsers(
      this.props.lastUserId ? { after: this.props.lastUserId } : {}
    );
  }

  impersonate(uid) {
    this.props.client
      ._startImpersonation(uid)
      .then(() => this.context.router.history.replace("/"));
  }

  render() {
    return (
      <div>
        <div className="section-header">
          <div className="section-header-title">
            <div className="section-header-title-text">Users</div>
          </div>
        </div>
        <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 =>
              <RootAdminUserDisplay
                client={this.props.client}
                revoke={this.props.revoke}
                impersonate={this.impersonate}
                addAlert={this.props.addAlert}
                alertKey={ALERTKEY_PREFIX + u._id}
                key={u._id}
                user={u}
              />
            )}
          {this.props.lastUserId
            ? <Button onClick={this.loadMore}>Load more</Button>
            : null}
        </div>
      </div>
    );
  }
}

RootAdminUsers.contextTypes = {
  router: PropTypes.object
};

const mapDispatchToProps = dispatch => ({
  loadUsers: filter => dispatch(actions.loadUsers(filter)),
  revoke: uid => dispatch(actions.revokeSessions(uid)),
  addAlert: (id, message) => dispatch(addAlert(id, message))
});

const mapStateToProps = state => ({
  client: state.base.client,
  users: state.admin.users,
  lastUserId: state.admin.lastUserId
});

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