<commit_before>import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Input extends Component {
  render() {
    return (
      <div className="Input">
        <input type="text" className="inputBox"
               onChange={this.props.changefun} />
        <div className="sendButton"
             onClick={() => {this.props.send()}}>
              Send
            </div>
      </div>
    );
  }
}

class Message extends Component {
  render() {
    var style = {
      "backgroundColor": this.props.background_color
    };
    return (
      <div className="Message" style={style}>{this.props.message}</div>
    );
  }
}

class DisplayArea extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="DisplayArea">
        {this.props.messages.map((m, i) =>
          <Message message={m}
            key={i}
            background_color={i%2==0 ? "grey" : "lightgrey"}/>
        )}
      </div>
    );
  }
}

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      socket: new WebSocket("ws://" + location.hostname + ":8080/websocket"),
      message: "",
      messages: [],
      greyBackground: false
    };

    // this.onMessageChange = this.onMessageChange.bind(this);
    // this.sendMessage = this.sendMessage.bind(this);

    this.state.socket.onopen = () => {
      var username = prompt("Username", "");
      this.state.socket.send(username);Joe
    }

    this.state.socket.onmessage = (event) => {
      var data = JSON.parse(event.data);
      this.messageReceived(data.message);
    };
  }

  onMessageChange(e) {
    this.setState({message: e.target.value});
  }

  sendMessage() {
    var data = {
      type: "message",
      message: this.state.message
    };
    this.state.socket.send(JSON.stringify(data));
  }

  messageReceived(message) {
    var messages = this.state.messages;
    messages.push(message);
    this.setState({messages: messages});
  }

  render() {
    return (
      <div className="App">
        <DisplayArea messages={this.state.messages}/>
        <Input send={this.sendMessage.bind(this)} changefun={this.onMessageChange.bind(this)}/>
      </div>
    );
  }
}

export default App;<commit_msg>message box empties after message is sent<commit_after>import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Input extends Component {
  render() {
    return (
      <div className="Input">
        <input type="text" className="inputBox"
               onChange={this.props.changefun} value={this.props.message}/>
        <div className="sendButton"
             onClick={() => {this.props.send()}}>
              Send
            </div>
      </div>
    );
  }
}

class Message extends Component {
  render() {
    var style = {
      "backgroundColor": this.props.background_color
    };
    return (
      <div className="Message" style={style}>{this.props.message}</div>
    );
  }
}

class DisplayArea extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="DisplayArea">
        {this.props.messages.map((m, i) =>
          <Message message={m}
            key={i}
            background_color={i%2==0 ? "grey" : "lightgrey"}/>
        )}
      </div>
    );
  }
}

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      socket: new WebSocket("ws://" + location.hostname + ":8080/websocket"),
      message: "Please Enter a Message",
      messages: [],
      greyBackground: false
    };

    // this.onMessageChange = this.onMessageChange.bind(this);
    // this.sendMessage = this.sendMessage.bind(this);

    this.state.socket.onopen = () => {
      var username = prompt("Username", "");
      this.state.socket.send(username);Joe
    }

    this.state.socket.onmessage = (event) => {
      var data = JSON.parse(event.data);
      this.messageReceived(data.message);
    };
  }

  onMessageChange(e) {
    this.setState({message: e.target.value});
  }

  sendMessage() {
    var data = {
      type: "message",
      message: this.state.message
    };
    this.state.socket.send(JSON.stringify(data));
    this.setState({message: ""});
  }

  messageReceived(message) {
    var messages = this.state.messages;
    messages.push(message);
    this.setState({messages: messages});
  }

  render() {
    return (
      <div className="App">
        <DisplayArea messages={this.state.messages}/>
        <Input message={this.state.message} send={this.sendMessage.bind(this)} changefun={this.onMessageChange.bind(this)}/>
      </div>
    );
  }
}

export default App;
{'fraction_non_alphanumeric': 0.1586998087954111, 'fraction_numerical': 0.0025493945188017845, 'mean_word_length': 2.4516129032258065, 'pattern_counts': {'":': 4, '<': 31, '<?xml version=': 0, '>': 39, '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': '2732313', 'n_tokens_mistral': 1451, 'n_tokens_neox': 1428, 'n_words': 260}