<commit_before>import React from 'react';
import Relay from 'react-relay';

import Emojify from '../../shared/Emojify';
import Duration from '../../shared/Duration';

import PusherStore from '../../../stores/PusherStore';
import BuildState from '../../icons/BuildState';

import { buildStatus } from '../../../lib/builds';
import { shortMessage } from '../../../lib/commits';
import { getDateString } from '../../../lib/date';

class BuildsDropdownBuild extends React.Component {
  static propTypes = {
    build: React.PropTypes.object,
    relay: React.PropTypes.object.isRequired
  }

  state = {
    hover: false
  }

  componentDidMount() {
    PusherStore.on("websocket:event", this.handlePusherWebsocketEvent);
  }

  componentWillUnmount() {
    PusherStore.off("websocket:event", this.handlePusherWebsocketEvent);
  }

  render() {
    const messageClassName = `semi-bold ${this.state.hover ? 'lime' : 'black'}`;
    const buildTime = buildStatus(this.props.build).timeValue;

    return (
      <div>
        <a href={this.props.build.url} className="flex text-decoration-none dark-gray hover-lime mb2" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
          <div className="pr2 center">
            <BuildState.Small className="block" state={this.props.build.state} />
          </div>
          <div className="flex-auto">
            <span className="block line-height-3 overflow-hidden overflow-ellipsis">
              <Emojify className={messageClassName} text={shortMessage(this.props.build.message)} /> in <span className={messageClassName}>{this.props.build.pipeline.name}</span>
            </span>
            <span className="block" title={getDateString(buildTime)}><Duration.Full from={buildTime} overrides={{ length: 1 }} tabularNumerals={false} /> ago</span>
          </div>
        </a>
      </div>
    );
  }

  handleMouseOver = () => {
    this.setState({ hover: true });
  }

  handleMouseOut = () => {
    this.setState({ hover: false });
  }

  handlePusherWebsocketEvent = (payload) => {
    if (payload.event === "build:updated" && payload.graphql.id === this.props.build.id) {
      this.props.relay.forceFetch();
    }
  };
}

export default Relay.createContainer(BuildsDropdownBuild, {
  fragments: {
    build: () => Relay.QL`
      fragment on Build {
        id
        message
        state
        createdAt
        canceledAt
        finishedAt
        url
        commit
        pipeline {
          name
        }
      }
    `
  }
});<commit_msg>Convert Build link to use Styled Components<commit_after>import React from 'react';
import Relay from 'react-relay';
import styled from 'styled-components';

import Emojify from '../../shared/Emojify';
import Duration from '../../shared/Duration';

import PusherStore from '../../../stores/PusherStore';
import BuildState from '../../icons/BuildState';

import { buildStatus } from '../../../lib/builds';
import { shortMessage } from '../../../lib/commits';
import { getDateString } from '../../../lib/date';

const BuildLink = styled.a`
  &:hover .build-link-message {
    color: inherit;
  }
`;

class BuildsDropdownBuild extends React.Component {
  static propTypes = {
    build: React.PropTypes.object,
    relay: React.PropTypes.object.isRequired
  }

  componentDidMount() {
    PusherStore.on("websocket:event", this.handlePusherWebsocketEvent);
  }

  componentWillUnmount() {
    PusherStore.off("websocket:event", this.handlePusherWebsocketEvent);
  }

  handlePusherWebsocketEvent = (payload) => {
    if (payload.event === "build:updated" && payload.graphql.id === this.props.build.id) {
      this.props.relay.forceFetch();
    }
  };

  render() {
    const buildTime = buildStatus(this.props.build).timeValue;
    const buildTimeAbsolute = getDateString(buildTime);

    return (
      <BuildLink href={this.props.build.url} className="flex text-decoration-none dark-gray hover-lime mb2">
        <div className="pr2 center">
          <BuildState.Small
            className="block"
            state={this.props.build.state}
          />
        </div>
        <div className="flex-auto">
          <span className="block line-height-3 overflow-hidden overflow-ellipsis">
            <Emojify
              className="build-link-message semi-bold black"
              text={shortMessage(this.props.build.message)}
            />
            {' in '}
            <span className="build-link-message semi-bold black">
              {this.props.build.pipeline.name}
            </span>
          </span>
          <span className="block" title={buildTimeAbsolute}>
            <Duration.Full from={buildTime} overrides={{ length: 1 }} tabularNumerals={false} /> ago
          </span>
        </div>
      </BuildLink>
    );
  }
}

export default Relay.createContainer(BuildsDropdownBuild, {
  fragments: {
    build: () => Relay.QL`
      fragment on Build {
        id
        message
        state
        createdAt
        canceledAt
        finishedAt
        url
        commit
        pipeline {
          name
        }
      }
    `
  }
});
{'fraction_non_alphanumeric': 0.14623105687856722, 'fraction_numerical': 0.001574493209998032, 'mean_word_length': 2.5, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 41, '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': '966330', 'n_tokens_mistral': 1491, 'n_tokens_neox': 1516, 'n_words': 295}