renderDetailViewButtons()

in components/base-ui/packages/base-ui/lib/parts/users/UpdateUser.js [151:228]
71 lines of code
11 McCabe index (conditional complexity)

  renderDetailViewButtons() {
    const makeButton = ({ label = '', color = 'blue', floated = 'left', disabled = false, ...props }) => {
      const attrs = {};
      if (color) attrs.color = color;
      return (
        <Button floated={floated} disabled={disabled} className="ml2" {...attrs} {...props}>
          {label}
        </Button>
      );
    };

    const currentUser = this.currentUser;

    const cancelButton = makeButton({
      label: 'Cancel',
      floated: 'left',
      color: '',
      onClick: this.handleCancel,
      disabled: this.processing,
    });

    const deleteButton =
      // TODO: deletion actions should be confirmed by user first
      this.view === 'detail'
        ? makeButton({
            label: 'Delete',
            floated: 'right',
            color: 'red',
            onClick: this.handleDeleteClick,
            disabled: this.processing,
          })
        : '';

    const activeButton =
      this.props.user.status === 'pending' || this.props.user.status === 'inactive'
        ? makeButton({
            label: 'Activate User',
            floated: 'right',
            color: 'blue',
            onClick: () => this.handleApproveDisapproveClick('active'),
            disabled: this.processing,
          })
        : '';

    const deactivateButton =
      this.props.user.status === 'active' || this.props.user.status === 'pending'
        ? makeButton({
            label: 'Deactivate User',
            floated: 'right',
            disabled: this.processing,
            onClick: () => this.handleApproveDisapproveClick('inactive'),
          })
        : '';

    const editButton =
      currentUser.status === 'active' || currentUser.status === 'inactive' // do not show "edit" button for other status(es) such as "pending"
        ? makeButton({ label: 'Edit', onClick: this.handleEditClick, floated: 'right', disabled: this.processing })
        : '';

    return this.props.adminMode ? (
      <div className="mt4 mb4">
        <Modal.Actions>
          {cancelButton}
          {deleteButton}
          {deactivateButton}
          {activeButton}
          {editButton}
        </Modal.Actions>
      </div>
    ) : (
      <div className="mt4 mb4">
        <Modal.Actions>
          {cancelButton}
          {editButton}
        </Modal.Actions>
      </div>
    );
  }