<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import { commaFormatted, currencyFormatted } from 'utils/utils'
import DashboardPopover from '../Dashboard/DashboardPopover'
import RaisedButton from 'material-ui/RaisedButton'
import {
  goToInviteFriends
} from 'navigation/navigation'

import appTheme, {
  dashboardIconActiveColor,
  dashboardIconInactiveColor
} from 'theme/default'

class MoneyRaised extends React.Component {
  constructor (props) {
    super(props)
    this.timer = 0
    this.state = {
      amountDonated: 0,
      hovering: false,
      open: false
    }
  }

  incrementAmount () {
    var latestAmountRaised = this.state.amountDonated
    var newAmountRaisedRounded = +(latestAmountRaised + 0.01).toFixed(2)
    this.setState({
      amountDonated: newAmountRaisedRounded
    })
  }

  componentDidMount () {
    this.setCounter(this.props.app)
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.app && nextProps.app) {
      this.setCounter(nextProps.app)
    }
  }

  setCounter (app) {
    if (!app) { return }

    const secondsInDay = 864
      // Recalculate based on time that elapsed since the base amount.
    const moneyRaised = app.moneyRaised
    const dollarsPerDayRate = app.dollarsPerDayRate
    const secondsPerPenny = secondsInDay / (dollarsPerDayRate)

    this.setState({
      amountDonated: moneyRaised
    })

    if (!(secondsPerPenny <= 0)) {
      var millisecondsPerPenny = Math.round(Math.abs(secondsPerPenny) * 1000)
      this.timer = setInterval(this.incrementAmount.bind(this), millisecondsPerPenny)
    }
  }

  componentWillUnmount () {
    clearInterval(this.timer)
  }

  onHover (hovering) {
    this.setState({
      hover: hovering
    })
  }

  onClick (event) {
    this.setState({
      open: !this.state.open,
      anchorEl: event.currentTarget
    })
  }

  handlePopoverRequestClose () {
    this.setState({
      open: false
    })
  }

  render () {
    if (!this.props.app) { return null }

    const containerStyle = {
      userSelect: 'none',
      cursor: 'default'
    }

    const textStyle = Object.assign({}, {
      color: (
        this.state.hover
        ? dashboardIconActiveColor
        : dashboardIconInactiveColor
      ),
      transition: 'color 300ms ease-in',
      cursor: 'pointer',
      fontSize: 18,
      fontFamily: appTheme.fontFamily,
      fontWeight: 'normal'
    }, this.props.style)

    const moneyRaised = this.state.amountDonated
    var amountDonated = '$' + commaFormatted(currencyFormatted(moneyRaised))

    return (
      <div
        onClick={this.onClick.bind(this)}
        onMouseEnter={this.onHover.bind(this, true)}
        onMouseLeave={this.onHover.bind(this, false)}
        style={containerStyle}>
        <span
          style={textStyle}>{amountDonated}</span>
        <DashboardPopover
          style={{ width: 180 }}
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onRequestClose={this.handlePopoverRequestClose.bind(this)}>
          <div style={{ padding: 10, paddingTop: 0 }}>
            <p>This is how much money Tabbers have raised for charity.</p>
            <p>Recruit your friends to raise more!</p>
            <RaisedButton
              label='Invite Friends'
              primary
              onClick={goToInviteFriends}
            />
          </div>
        </DashboardPopover>
      </div>
    )
  }
}

MoneyRaised.propTypes = {
  app: PropTypes.shape({
    moneyRaised: PropTypes.number.isRequired,
    dollarsPerDayRate: PropTypes.number.isRequired
  }),
  style: PropTypes.object
}

MoneyRaised.defaultProps = {
  style: {}
}

export default MoneyRaised<commit_msg>Center money raised popover button.<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import { commaFormatted, currencyFormatted } from 'utils/utils'
import DashboardPopover from '../Dashboard/DashboardPopover'
import RaisedButton from 'material-ui/RaisedButton'
import {
  goToInviteFriends
} from 'navigation/navigation'

import appTheme, {
  dashboardIconActiveColor,
  dashboardIconInactiveColor
} from 'theme/default'

class MoneyRaised extends React.Component {
  constructor (props) {
    super(props)
    this.timer = 0
    this.state = {
      amountDonated: 0,
      hovering: false,
      open: false
    }
  }

  incrementAmount () {
    var latestAmountRaised = this.state.amountDonated
    var newAmountRaisedRounded = +(latestAmountRaised + 0.01).toFixed(2)
    this.setState({
      amountDonated: newAmountRaisedRounded
    })
  }

  componentDidMount () {
    this.setCounter(this.props.app)
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.app && nextProps.app) {
      this.setCounter(nextProps.app)
    }
  }

  setCounter (app) {
    if (!app) { return }

    const secondsInDay = 864
      // Recalculate based on time that elapsed since the base amount.
    const moneyRaised = app.moneyRaised
    const dollarsPerDayRate = app.dollarsPerDayRate
    const secondsPerPenny = secondsInDay / (dollarsPerDayRate)

    this.setState({
      amountDonated: moneyRaised
    })

    if (!(secondsPerPenny <= 0)) {
      var millisecondsPerPenny = Math.round(Math.abs(secondsPerPenny) * 1000)
      this.timer = setInterval(this.incrementAmount.bind(this), millisecondsPerPenny)
    }
  }

  componentWillUnmount () {
    clearInterval(this.timer)
  }

  onHover (hovering) {
    this.setState({
      hover: hovering
    })
  }

  onClick (event) {
    this.setState({
      open: !this.state.open,
      anchorEl: event.currentTarget
    })
  }

  handlePopoverRequestClose () {
    this.setState({
      open: false
    })
  }

  render () {
    if (!this.props.app) { return null }

    const containerStyle = {
      userSelect: 'none',
      cursor: 'default'
    }
    const popoverStyle = {
      width: 180
    }
    const buttonContainerStyle = {
      textAlign: 'center'
    }
    const textStyle = Object.assign({}, {
      color: (
        this.state.hover
        ? dashboardIconActiveColor
        : dashboardIconInactiveColor
      ),
      transition: 'color 300ms ease-in',
      cursor: 'pointer',
      fontSize: 18,
      fontFamily: appTheme.fontFamily,
      fontWeight: 'normal'
    }, this.props.style)

    const moneyRaised = this.state.amountDonated
    var amountDonated = '$' + commaFormatted(currencyFormatted(moneyRaised))

    return (
      <div
        onClick={this.onClick.bind(this)}
        onMouseEnter={this.onHover.bind(this, true)}
        onMouseLeave={this.onHover.bind(this, false)}
        style={containerStyle}>
        <span
          style={textStyle}>{amountDonated}</span>
        <DashboardPopover
          style={popoverStyle}
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onRequestClose={this.handlePopoverRequestClose.bind(this)}>
          <div style={{ padding: 10, paddingTop: 0 }}>
            <p>This is how much money Tabbers have raised for charity.</p>
            <p>Recruit your friends to raise more!</p>
            <div style={buttonContainerStyle}>
              <RaisedButton
                label='Invite Friends'
                primary
                onClick={goToInviteFriends}
              />
            </div>
          </div>
        </DashboardPopover>
      </div>
    )
  }
}

MoneyRaised.propTypes = {
  app: PropTypes.shape({
    moneyRaised: PropTypes.number.isRequired,
    dollarsPerDayRate: PropTypes.number.isRequired
  }),
  style: PropTypes.object
}

MoneyRaised.defaultProps = {
  style: {}
}

export default MoneyRaised
{'fraction_non_alphanumeric': 0.10798738833420915, 'fraction_numerical': 0.006568575932737782, 'mean_word_length': 2.6286939942802667, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 31, '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': '371049', 'n_tokens_mistral': 2418, 'n_tokens_neox': 2316, 'n_words': 458}