<commit_before>import React from 'react'
import { DropTarget } from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'

const spec = {
  drop (props, monitor) {
    const bundle = monitor.getItem()
    const file = bundle.files[0]
    const reader = new FileReader()
    reader.onload = event => props.onDrop(event.target.result)
    reader.readAsText(file, 'UTF-8');
  }
}

const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })

class ReadFileDropContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isFileOver: false }
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isOver && nextProps.isOver) {
      this.setState({ isFileOver: true })
    }

    if (this.props.isOver && !nextProps.isOver) {
      this.setState({ isFileOver: false })
    }
  }

  render() {
    const content = (
      <div className="dnd-container">
        { this.state.isFileOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
        { this.props.children }
        <style jsx>{`
          .dnd-container {
            position: relative;
          }

          .dnd-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            height: 100%;
            z-index: 999;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.85);
          }
        `}</style>
      </div>
    )

    return this.props.connectDropTarget(content)
  }
}

export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)<commit_msg>Remove state from components/ReadFileDropContainer<commit_after>import React from 'react'
import { DropTarget } from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'

const spec = {
  drop (props, monitor) {
    const bundle = monitor.getItem()
    const file = bundle.files[0]
    const reader = new FileReader()
    reader.onload = event => props.onDrop(event.target.result)
    reader.readAsText(file, 'UTF-8');
  }
}

const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })

const ReadFileDropContainer = props => props.connectDropTarget(
  <div className="dnd-container">
    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
    {props.children}
    <style jsx>{`
      .dnd-container {
        position: relative;
      }

      .dnd-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: 100%;
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.85);
      }
    `}</style>
  </div>
)

export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
{'fraction_non_alphanumeric': 0.12875250166777852, 'fraction_numerical': 0.0133422281521014, 'mean_word_length': 2.4872093023255815, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 20, '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': '802425', 'n_tokens_mistral': 943, 'n_tokens_neox': 906, 'n_words': 213}