<commit_before>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { RootState, QueueItem } from 'types';
import { ResourceList } from '@shopify/polaris';
import QueueItemInfo from './QueueItemInfo';
import { ReturnAction, returnHitRequest } from 'actions/return';
import { generateContinueWorkUrl } from 'utils/urls';
import { truncate } from 'utils/formatting';
import QueueCollapsibleInfo from './QueueCollapsibleInfo';
import {
  hitDatabaseToRequesterMap,
  numSubmittedHitsToRequester,
  numRejectedHitsToRequester
} from 'selectors/hitDatabase';
import { clickDidNotOccurOnActionButton } from 'utils/resourceList';
import { toggleQueueItemExpand } from 'actions/toggleExpand';
import { generateQueueCardExceptions } from 'utils/exceptions';

interface Props {
  readonly hit: QueueItem;
  readonly knownRequester: boolean;
  readonly requesterWorkHistorySize: number;
  readonly requesterRejectedHitsSize: number;
}

interface OwnProps {
  readonly hitId: string;
}

interface Handlers {
  readonly onReturn: (queueItem: QueueItem) => void;
  readonly onToggleExpand: (hitId: string) => void;
}

class QueueItemCard extends React.PureComponent<
  Props & OwnProps & Handlers,
  never
> {
  private handleExpand = (e: React.MouseEvent<HTMLDivElement>) => {
    const fresh = this.props.hit.fresh;
    if (clickDidNotOccurOnActionButton(e) && fresh) {
      this.props.onToggleExpand(this.props.hitId);
    }
  };

  public render() {
    const {
      hit,
      knownRequester,
      requesterRejectedHitsSize,
      requesterWorkHistorySize
    } = this.props;
    const { reward, timeLeftInSeconds } = hit;
    const actions = [
      {
        content: 'Return',
        accessibilityLabel: 'Return',
        onClick: () => this.props.onReturn(hit)
      },
      {
        external: true,
        content: 'Work',
        accessibilityLabel: 'Work',
        url: generateContinueWorkUrl(hit)
      }
    ];

    const exceptions = generateQueueCardExceptions({
      knownRequester,
      numSubmittedHits: requesterWorkHistorySize,
      numRejectedHits: requesterRejectedHitsSize
    });

    return (
      <React.Fragment>
        <div onClick={this.handleExpand}>
          <ResourceList.Item
            actions={actions}
            attributeOne={truncate(hit.requester.name, 40)}
            attributeTwo={truncate(hit.title, 120)}
            attributeThree={
              <QueueItemInfo reward={reward} timeLeftInSeconds={timeLeftInSeconds} />
              // tslint:disable-next-line:jsx-curly-spacing
            }
            exceptions={exceptions}
          />
        </div>
        <QueueCollapsibleInfo
          hitId={hit.hitId}
          knownRequester={knownRequester}
          requesterId={hit.requester.id}
          requesterName={hit.requester.name}
        />
      </React.Fragment>
    );
  }
}

const mapState = (state: RootState, ownProps: OwnProps): Props => {
  const hit = state.queue.get(ownProps.hitId);
  return {
    hit,
    knownRequester: hitDatabaseToRequesterMap(state).has(hit.requester.id),
    requesterWorkHistorySize: numSubmittedHitsToRequester(hit.requester.id)(
      state
    ),
    requesterRejectedHitsSize: numRejectedHitsToRequester(hit.requester.id)(
      state
    )
  };
};

const mapDispatch = (dispatch: Dispatch<ReturnAction>): Handlers => ({
  onReturn: (queueItem: QueueItem) => dispatch(returnHitRequest(queueItem)),
  onToggleExpand: (hitId: string) => dispatch(toggleQueueItemExpand(hitId))
});

export default connect(mapState, mapDispatch)(QueueItemCard);<commit_msg>Update QueueItemCard to use Polaris 2.0 ResourceList.Item.<commit_after>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { RootState, QueueItem } from 'types';
import { ResourceList, Stack } from '@shopify/polaris';
// import QueueItemInfo from './QueueItemInfo';
import { ReturnAction, returnHitRequest } from 'actions/return';
// import { generateContinueWorkUrl } from 'utils/urls';
// import { truncate } from 'utils/formatting';
import QueueCollapsibleInfo from './QueueCollapsibleInfo';
import {
  toggleQueueItemExpand,
  ToggleQueueItemExpand
} from 'actions/toggleExpand';
import { generateContinueWorkUrl } from 'utils/urls';
import RequesterName from '../SearchCard/RequesterName';
import { Text } from '@blueprintjs/core';
import QueueItemInfo from './QueueItemInfo';
import QueueItemExceptionList from './QueueItemExceptionList';
// import { generateQueueCardExceptions } from 'utils/exceptions';

interface Props {
  readonly hit: QueueItem;
  readonly expanded: boolean;
}

interface OwnProps {
  readonly hitId: string;
}

interface Handlers {
  readonly onReturn: (queueItem: QueueItem) => void;
  readonly onToggleExpand: (hitId: string) => void;
}

class QueueItemCard extends React.PureComponent<
  Props & OwnProps & Handlers,
  never
> {
  public render() {
    const { hit } = this.props;
    const actions = [
      {
        content: 'Return',
        accessibilityLabel: 'Return',
        onClick: () => this.props.onReturn(hit)
      },
      {
        external: true,
        content: 'Work',
        accessibilityLabel: 'Work',
        url: generateContinueWorkUrl(hit)
      }
    ];
    return (
      <React.Fragment>
        <ResourceList.Item
          id={hit.assignmentId}
          onClick={this.props.onToggleExpand}
          shortcutActions={actions}
        >
          <Stack vertical={false} wrap={false} alignment="center">
            <Stack.Item>
              <RequesterName requesterName={hit.requester.name} />
            </Stack.Item>
            <Stack.Item fill>
              <Text ellipsize>{hit.title}</Text>
            </Stack.Item>
            <Stack.Item>
              <QueueItemInfo
                reward={hit.reward}
                timeLeftInSeconds={hit.timeLeftInSeconds}
              />
            </Stack.Item>
          </Stack>
          <QueueItemExceptionList hit={hit} />
        </ResourceList.Item>
        <QueueCollapsibleInfo
          hitId={hit.hitId}
          requesterId={hit.requester.id}
          requesterName={hit.requester.name}
        />
      </React.Fragment>
    );
  }
}

const mapState = (state: RootState, { hitId }: OwnProps): Props => ({
  hit: state.queue.get(hitId),
  expanded: state.expandedQueueItems.has(hitId)
});

const mapDispatch = (
  dispatch: Dispatch<ReturnAction | ToggleQueueItemExpand>
): Handlers => ({
  onReturn: (queueItem: QueueItem) => dispatch(returnHitRequest(queueItem)),
  onToggleExpand: (hitId: string) => dispatch(toggleQueueItemExpand(hitId))
});

export default connect(mapState, mapDispatch)(QueueItemCard);
{'fraction_non_alphanumeric': 0.11485979907032538, 'fraction_numerical': 0.001049632628579997, 'mean_word_length': 3.18706842435656, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 48, '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': '3209743', 'n_tokens_mistral': 1981, 'n_tokens_neox': 1959, 'n_words': 395}