<commit_before>import React from "react";
import { Chance }from "chance";

import WriteMessage from "./components/WriteMessage";
import Messages from "./components/Messages";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: chance.name(), messages: [] }
  }

  componentDidMount() {
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    this.chatsock = new ReconnectingWebSocket(ws_scheme + '://' + window.location.host + "/chat" + window.location.pathname);

    this.chatsock.onmessage = (message) => {
      console.log(message);
      let messages = this.state.messages.slice();
      messages.push(JSON.parse(message.data));
      this.setState({messages: messages})
    };
  }

  sendMessage(msg) {
    const payload = {
      handle: this.state.user,
      message: msg
    };
    this.chatsock.send(JSON.stringify(payload));
  }

  render() {
    return (
      <div>
        <h1>M O O N Y</h1>
        <Messages
          messages={this.state.messages}
        />
        <WriteMessage
          sendMessage={this.sendMessage.bind(this)}
        />
      </div>
    )
  }
}<commit_msg>Put a connected visual help<commit_after>import React from "react";
import { Chance }from "chance";

import WriteMessage from "./components/WriteMessage";
import Messages from "./components/Messages";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: chance.name(), messages: [], connected: false }
  }

  componentDidMount() {
    var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    this.chatsock = new ReconnectingWebSocket(ws_scheme + '://' + window.location.host + "/chat" + window.location.pathname);

    this.chatsock.onopen = event => {
      this.setState({
        connected: true
      })
      console.log(this.chatsock);
    };

    this.chatsock.onclose = event => {
      this.setState({
        connected: false
      })
    };

    this.chatsock.onmessage = (message) => {
      console.log(message);
      let messages = this.state.messages.slice();
      messages.push(JSON.parse(message.data));
      this.setState({messages: messages})
    };
  }

  sendMessage(msg) {
    const payload = {
      handle: this.state.user,
      message: msg
    };
    this.chatsock.send(JSON.stringify(payload));
  }

  render() {
    return (
      <div>
        <h1>M O O N Y (<span>{this.state.connected ? 'connected' : 'disconnected'}</span>)</h1>
        <Messages
          messages={this.state.messages}
        />
        <WriteMessage
          sendMessage={this.sendMessage.bind(this)}
        />
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.1482847657690889, 'fraction_numerical': 0.0014754703061600886, 'mean_word_length': 2.5968169761273208, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '3496663', 'n_tokens_mistral': 839, 'n_tokens_neox': 826, 'n_words': 162}