<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';

import { INTERVAL_RATE } from '../constants';

import * as actions from '../reducers/hero';

export class Controls extends Component {
	constructor() {
		super();
		this.state = {
			intervalId: null,
		};
	}

	moveUp() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveUp();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	moveDown() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveDown();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});
	}

	moveLeft() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveLeft();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	moveRight() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveRight();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	stopMove() {
		clearInterval( this.state.intervalId );
	}

	render() {
		return (
			<div id="controls">
				<button
					type="button"
					onMouseDown={ this.moveLeft.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-left" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveUp.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-up" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveDown.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-down" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveRight.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-right" />
				</button>

			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		hero: state.hero.model,
		heroData: state.hero.data,
	}
}

export default connect(mapStateToProps, actions)(Controls);
<commit_msg>Controls - heroData from reducer isn't needed.  I just want the model to update, I don't need to controls to re render on the update of hero.<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';

import { INTERVAL_RATE } from '../constants';

import * as actions from '../reducers/hero';

export class Controls extends Component {
	constructor() {
		super();
		this.state = {
			intervalId: null,
		};
	}

	moveUp() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveUp();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	moveDown() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveDown();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});
	}

	moveLeft() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveLeft();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	moveRight() {
		const { hero, updateModel } = this.props;

		clearInterval( this.state.intervalId );

		const intervalId = setInterval( () => {
			hero.moveRight();
			updateModel(hero);
		}, INTERVAL_RATE);
		this.setState({intervalId: intervalId});

	}

	stopMove() {
		clearInterval( this.state.intervalId );
	}

	render() {
		return (
			<div id="controls">
				<button
					type="button"
					onMouseDown={ this.moveLeft.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-left" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveUp.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-up" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveDown.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-down" />
				</button>

				<button
					type="button"
					onMouseDown={ this.moveRight.bind(this) }
					onMouseUp={ this.stopMove.bind(this) }
				>
					<span className="fa fa-caret-right" />
				</button>

			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		hero: state.hero.model,
	}
}

export default connect(mapStateToProps, actions)(Controls);

{'fraction_non_alphanumeric': 0.15400538190850754, 'fraction_numerical': 0.0, 'mean_word_length': 3.227471566054243, 'pattern_counts': {'":': 0, '<': 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': '6617076', 'n_tokens_mistral': 1950, 'n_tokens_neox': 1602, 'n_words': 317}