<commit_before>const React = require('react');
const ReactRouter = require('react-router')

class UsersList extends React.Component {
	render() {
		return (
			<div className='users'>
				<h3> TOAD Users </h3>
				<ul>
					{
						this.props.users.map((user, i) => {
							return (
								<li key={i}>
									{user}
								</li>
							);
						})
					}
				</ul>
			</div>
		);
	}
};

class Message extends React.Component {
	render() {
		return (
			<div className="message">
				<strong>{this.props.user} :</strong>
				<span>{this.props.text}</span>
			</div>
		);
	}
};

class MessageList extends React.Component {
	render() {
		return (
			<div className='messages'>
				<h2> Conversation: </h2>
				{
					this.props.messages.map((message, i) => {
						return (
							<Message
								key={i}
								user={message.user}
								text={message.text}
							/>
						);
					})
				}
			</div>
		);
	}
};
class MessageForm extends React.Component {
  constructor() {
    super();
    this.state = {
      text: ''
    };
  }

	handleSubmit(e) {
		e.preventDefault();
		var message = {
			user : this.props.user,
			text : this.state.text
		}
		this.props.onMessageSubmit(message);
		this.setState({ text: '' });
	}

	changeHandler(e) {
		this.setState({ text : e.target.value });
	}

	render() {
		return(
			<div className='message_form'>
				<h3>Write New Message</h3>
				<form onSubmit={this.handleSubmit.bind(this)}>
					<input
						onChange={this.changeHandler.bind(this)}
						value={this.state.text}
					/>
				</form>
			</div>
		);
	}
};

class ChangeNameForm extends React.Component {
  constructor (){
    super();
    this.state = {
      newName: ''
    };
  }
	onKey(e) {
		this.setState({ newName : e.target.value });
	}

	handleSubmit(e) {
		e.preventDefault();
		var newName = this.state.newName;
		this.props.onChangeName(newName);
		this.setState({ newName: '' });
	}

	render() {
		return(
			<div className='change_name_form'>
				<h3> Change Name </h3>
				<form onSubmit={this.handleSubmit.bind(this)}>
					<input
						onChange={this.onKey.bind(this)}
						value={this.state.newName}
					/>
				</form>
			</div>
		);
	}
};

class ChatApp extends React.Component {

  constructor (){
    super();
    this.state = {
      users: [],
      messages:[],
      text: '',
      user: ''
    };
  }

  componentWillMount() {
  	//joins socket according to multiplay/:NAME
    window.socket = io.connect({query: "chatroom="+this.props.name });
  }

	componentDidMount() {
		socket.on('init', this._initialize.bind(this));
		socket.on('send:message', this._messageRecieve.bind(this));
		socket.on('user:join', this._userJoined.bind(this));
		socket.on('user:left', this._userLeft.bind(this));
		socket.on('change:name', this._userChangedName.bind(this));
	}

	_initialize(data) {
		var {users, name} = data;
		this.setState({users, user: name});
	}

	_messageRecieve(message) {
		var {messages} = this.state;
		messages.push(message);<commit_msg>(refactor) Move socket join to multiGame file<commit_after>const React = require('react');
const ReactRouter = require('react-router')

class UsersList extends React.Component {
	render() {
		return (
			<div className='users'>
				<h3> TOAD Users </h3>
				<ul>
					{
						this.props.users.map((user, i) => {
							return (
								<li key={i}>
									{user}
								</li>
							);
						})
					}
				</ul>
			</div>
		);
	}
};

class Message extends React.Component {
	render() {
		return (
			<div className="message">
				<strong>{this.props.user} :</strong>
				<span>{this.props.text}</span>
			</div>
		);
	}
};

class MessageList extends React.Component {
	render() {
		return (
			<div className='messages'>
				<h2> Conversation: </h2>
				{
					this.props.messages.map((message, i) => {
						return (
							<Message
								key={i}
								user={message.user}
								text={message.text}
							/>
						);
					})
				}
			</div>
		);
	}
};
class MessageForm extends React.Component {
  constructor() {
    super();
    this.state = {
      text: ''
    };
  }

	handleSubmit(e) {
		e.preventDefault();
		var message = {
			user : this.props.user,
			text : this.state.text
		}
		this.props.onMessageSubmit(message);
		this.setState({ text: '' });
	}

	changeHandler(e) {
		this.setState({ text : e.target.value });
	}

	render() {
		return(
			<div className='message_form'>
				<h3>Write New Message</h3>
				<form onSubmit={this.handleSubmit.bind(this)}>
					<input
						onChange={this.changeHandler.bind(this)}
						value={this.state.text}
					/>
				</form>
			</div>
		);
	}
};

class ChangeNameForm extends React.Component {
  constructor (){
    super();
    this.state = {
      newName: ''
    };
  }
	onKey(e) {
		this.setState({ newName : e.target.value });
	}

	handleSubmit(e) {
		e.preventDefault();
		var newName = this.state.newName;
		this.props.onChangeName(newName);
		this.setState({ newName: '' });
	}

	render() {
		return(
			<div className='change_name_form'>
				<h3> Change Name </h3>
				<form onSubmit={this.handleSubmit.bind(this)}>
					<input
						onChange={this.onKey.bind(this)}
						value={this.state.newName}
					/>
				</form>
			</div>
		);
	}
};

class ChatApp extends React.Component {

  constructor (){
    super();
    this.state = {
      users: [],
      messages:[],
      text: '',
      user: ''
    };
  }

	componentDidMount() {
		socket.on('init', this._initialize.bind(this));
		socket.on('send:message', this._messageRecieve.bind(this));
		socket.on('user:join', this._userJoined.bind(this));
		socket.on('user:left', this._userLeft.bind(this));
		socket.on('change:name', this._userChangedName.bind(this));
	}

	_initialize(data) {
		var {users, name} = data;
		this.setState({users, user: name});
	}

	_messageRecieve(message) {
		var {messages} = this.state;
		messages.push(message);
{'fraction_non_alphanumeric': 0.17577724632729758, 'fraction_numerical': 0.0027331738981892723, 'mean_word_length': 2.616429894996912, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 73, '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': '6709865', 'n_tokens_mistral': 2514, 'n_tokens_neox': 2040, 'n_words': 346}