<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import { registerKeypress, deregisterKeypress } from './keypress'
import './ScrollIndicators.scss'

class ScrollIndicators extends React.PureComponent {
  static propTypes = {
    scrollIndicatorsLeft: PropTypes.number,
    scrollIndicatorsRight: PropTypes.number,
    scrollStreet: PropTypes.func.isRequired,
    scrollTop: PropTypes.number.isRequired
  }

  static defaultProps = {
    scrollIndicatorsLeft: 0,
    scrollIndicatorsRight: 0
  }

  componentDidMount () {
    registerKeypress(['left', 'shift left'], this.handleLeftScroll)
    registerKeypress(['right', 'shift right'], this.handleRightScroll)
  }

  componentWillUnmount () {
    deregisterKeypress(['left', 'shift left'], this.handleLeftScroll)
    deregisterKeypress(['right', 'shift right'], this.handleRightScroll)
  }

  handleLeftScroll = (event) => {
    this.props.scrollStreet(true, event.shiftKey)
  }

  handleRightScroll = (event) => {
    this.props.scrollStreet(false, event.shiftKey)
  }

  render () {
    const { scrollTop, scrollIndicatorsLeft, scrollIndicatorsRight } = this.props
    const style = {
      top: scrollTop + 'px'
    }

    return (
      <div className="street-scroll-indicators" style={style}>
        <div
          className="street-scroll-indicator-left"
          onClick={this.handleLeftScroll}
        >
          {Array(scrollIndicatorsLeft + 1).join('‹')}
        </div>
        <div
          className="street-scroll-indicator-right"
          onClick={this.handleRightScroll}
        >
          {Array(scrollIndicatorsRight + 1).join('›')}
        </div>
      </div>
    )
  }
}

export default ScrollIndicators
<commit_msg>refactor(ScrollIndicators): convert to functional component<commit_after>import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { registerKeypress, deregisterKeypress } from './keypress'
import './ScrollIndicators.scss'

const ScrollIndicators = (props) => {
  const { scrollTop, scrollStreet, scrollIndicatorsLeft, scrollIndicatorsRight } = props

  const doLeftScroll = (event) => {
    scrollStreet(true, event.shiftKey)
  }

  const doRightScroll = (event) => {
    scrollStreet(false, event.shiftKey)
  }

  useEffect(() => {
    registerKeypress(['left', 'shift left'], doLeftScroll)
    registerKeypress(['right', 'shift right'], doRightScroll)
    return () => {
      deregisterKeypress(['left', 'shift left'], doLeftScroll)
      deregisterKeypress(['right', 'shift right'], doRightScroll)
    }
  })

  return (
    <div className="street-scroll-indicators" style={{ top: `${scrollTop}px` }}>
      <div
        className="street-scroll-indicator-left"
        onClick={doLeftScroll}
      >
        {Array(scrollIndicatorsLeft + 1).join('‹')}
      </div>
      <div
        className="street-scroll-indicator-right"
        onClick={doRightScroll}
      >
        {Array(scrollIndicatorsRight + 1).join('›')}
      </div>
    </div>
  )
}

ScrollIndicators.propTypes = {
  scrollIndicatorsLeft: PropTypes.number,
  scrollIndicatorsRight: PropTypes.number,
  scrollStreet: PropTypes.func.isRequired,
  scrollTop: PropTypes.number.isRequired
}

ScrollIndicators.defaultProps = {
  scrollIndicatorsLeft: 0,
  scrollIndicatorsRight: 0
}

export default React.memo(ScrollIndicators)

{'fraction_non_alphanumeric': 0.12646089301768054, 'fraction_numerical': 0.00239736290080911, 'mean_word_length': 3.566347469220246, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 22, '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': '6873835', 'n_tokens_mistral': 1044, 'n_tokens_neox': 1015, 'n_words': 185}