<commit_before>import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { OverlayTrigger, Popover } from 'react-bootstrap';

import Utils from '../../../utils';

import RequestStar from '../../requests/RequestStar';

const errorDescription = (requestAPI) => {
  switch (requestAPI.statusCode) {
    case 404:
      return 'Request not found';
    case 401:
      return 'Not authorized';
    default:
      return requestAPI.error;
  }
};

class RequestTitle extends Component {
  static propTypes = {
    requestId: PropTypes.string.isRequired,
    requestAPI: PropTypes.object
  };

  render() {
    const {requestAPI, requestId} = this.props;
    let maybeInfo;
    if (Utils.api.isFirstLoad(requestAPI)) {
      maybeInfo = <em>Loading...</em>;
    } else if (requestAPI.error) {
      const errorText = errorDescription(requestAPI);
      maybeInfo = <p className="text-danger">{requestAPI.statusCode}: {errorText}</p>;
    } else {
      const requestParent = requestAPI.data;
      const {request, state} = requestParent;
      maybeInfo = (
        <span>
          <RequestStar requestId={request.id} />
          <span className="request-state" data-state={state}>
            {Utils.humanizeText(state)}
          </span>
          <span className="request-type">
            {Utils.humanizeText(request.requestType)}
          </span>
        </span>
      );
    }

    const requestIdToDisplay = Utils.maybe(requestAPI, ['data', 'request', 'id']) || requestId;
    const copyLinkPopover = (
      <Popover id="popover-trigger-focus">
        Click to copy
      </Popover>
    );

    return (
      <div>
        <h4>
          {maybeInfo}
        </h4>
        <h2>
          <OverlayTrigger trigger={['hover', 'focus', 'click']} placement="left" overlay={copyLinkPopover}>
            <span className="copy-btn" data-clipboard-text={requestIdToDisplay}>{requestIdToDisplay}</span>
          </OverlayTrigger>
        </h2>
      </div>
    );
  }
}

RequestTitle.propTypes = {
  requestId: PropTypes.string.isRequired,
  requestAPI: PropTypes.object
};

const mapStateToProps = (state, ownProps) => ({
  requestAPI: Utils.maybe(state.api.request, [ownProps.requestId])<commit_msg>Make the component a function<commit_after>import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { OverlayTrigger, Popover } from 'react-bootstrap';

import Utils from '../../../utils';

import RequestStar from '../../requests/RequestStar';

const errorDescription = (requestAPI) => {
  switch (requestAPI.statusCode) {
    case 404:
      return 'Request not found';
    case 401:
      return 'Not authorized';
    default:
      return requestAPI.error;
  }
};

const RequestTitle = ({requestAPI, requestId}) => {
  let maybeInfo;
  if (Utils.api.isFirstLoad(requestAPI)) {
    maybeInfo = <em>Loading...</em>;
  } else if (requestAPI.error) {
    const errorText = errorDescription(requestAPI);
    maybeInfo = <p className="text-danger">{requestAPI.statusCode}: {errorText}</p>;
  } else {
    const requestParent = requestAPI.data;
    const {request, state} = requestParent;
    maybeInfo = (
      <span>
        <RequestStar requestId={request.id} />
        <span className="request-state" data-state={state}>
          {Utils.humanizeText(state)}
        </span>
        <span className="request-type">
          {Utils.humanizeText(request.requestType)}
        </span>
      </span>
    );
  }

  const requestIdToDisplay = Utils.maybe(requestAPI, ['data', 'request', 'id']) || requestId;
  const copyLinkPopover = (
    <Popover id="popover-trigger-focus">
      Click to copy
    </Popover>
  );

  return (
    <div>
      <h4>
        {maybeInfo}
      </h4>
      <h2>
        <OverlayTrigger trigger={['hover', 'focus', 'click']} placement="left" overlay={copyLinkPopover}>
          <span className="copy-btn" data-clipboard-text={requestIdToDisplay}>{requestIdToDisplay}</span>
        </OverlayTrigger>
      </h2>
    </div>
  );
};

RequestTitle.propTypes = {
  requestId: PropTypes.string.isRequired,
  requestAPI: PropTypes.object
};

const mapStateToProps = (state, ownProps) => ({
  requestAPI: Utils.maybe(state.api.request, [ownProps.requestId])
{'fraction_non_alphanumeric': 0.14595103578154425, 'fraction_numerical': 0.004708097928436911, 'mean_word_length': 2.9125230202578267, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 54, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5527419', 'n_tokens_mistral': 1284, 'n_tokens_neox': 1280, 'n_words': 271}