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

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/href-no-hash */
import React from "react";
import { Link } from "react-router-dom";
import DropdownMenu from "react-dd-menu";
import { AlertContainer } from "../../alert";
import { User } from "../../user";
import { Button } from "../../core";

class UserDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = { dropdownOpen: false };
    this.revoke = this.revoke.bind(this);
  }

  revoke() {
    const { _id: userId } = this.props.user;
    const { _id: appId } = this.props.app;
    this.props.revoke(appId, userId).then(() => {
      this.props.addAlert(this.props.alertKey, "Sessions revoked.");
    });
  }

  render() {
    const menuOptions = {
      isOpen: this.state.dropdownOpen,
      close: () => {
        this.setState({ dropdownOpen: false });
      },
      toggle: (
        <Button
          small
          className="dropdowntoggle"
          onClick={() => {
            this.setState({ dropdownOpen: !this.state.dropdownOpen });
          }}
        >
          …
        </Button>
      ),
      align: "right"
    };
    const user = new User(this.props.user);
    // TODO use absolute position for alert containers here.
    return (
      <div className="users-list-item">
        <div className="users-list-item-column users-list-item-pic">
          {user.getImage()}
        </div>
        <div className="users-list-item-column users-list-item-name">
          {user.getDisplayName()}
        </div>
        <div className="users-list-item-column users-list-item-id">
          {user.getId()}
        </div>
        <div className="users-list-item-column users-list-item-type">
          {user.getType()}
        </div>
        <div className="users-list-item-column users-list-item-identities">
          <div>
            {user.getProviderDisplayName()}
          </div>
          <AlertContainer alertKey={this.props.alertKey} />
        </div>
        <DropdownMenu {...menuOptions}>
          <li>
            <Link
              to={`/groups/${this.props.app.groupId}/apps/${this.props.app
                ._id}/debug?user_id=${user.getId()}`}
            >
              Open in debug console
            </Link>
          </li>
          <li>
            <Link
              to={`/groups/${this.props.app.groupId}/apps/${this.props.app
                ._id}/logs?user_id=${user.getId()}`}
            >
              View activity
            </Link>
          </li>
          <li>
            <a href="#" onClick={this.revoke}>
              Revoke all sessions
            </a>
          </li>
        </DropdownMenu>
      </div>
    );
  }
}
export default UserDisplay;