<commit_before>import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Table
} from "reactstrap";
import { Controller } from "jsnes";

class ControlsModal extends Component {
  constructor(props) {
    super(props);
    this.state = { keys: undefined, button: undefined };
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  componentDidUpdate(props, state) {
    if (state.keys === undefined && props.keys !== undefined) {
      this.setState({ keys: this.props.keys });
    }
  }

  handleClick(button) {
    this.setState({ button });
    document.addEventListener("keydown", this.handleKeyDown);
  }

  handleKeyDown(event) {
    var button = this.state.button;
    var keys = this.state.keys;
    var newKeys = {};
    for (var key in keys) {
      if (keys[key][0] !== button[0] || keys[key][1] !== button[1]) {
        newKeys[key] = keys[key];
      }
    }
    this.setState({
      keys: {
        ...newKeys,
        [event.keyCode]: button
      },
      button: undefined
    });
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  removeKeyListener() {
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  render() {
    // Remove key listener in case modal is closed before new button is mapped
    if (!this.props.isOpen) {
      this.removeKeyListener("keydown", this.handleKeyDown);
      this.props.setKeys(this.state.keys);
    }
    return (
      <Modal
        isOpen={this.props.isOpen}
        toggle={this.props.toggle}
        className="ControlsModal"
      >
        <ModalHeader toggle={this.props.toggle}>Controls</ModalHeader>
        <ModalBody>
          <Table>
            <thead>
              <tr>
                <th>Button</th>
                <th>Player 1</th>
                <th>Player 2</th>
              </tr>
            </thead>
            <tbody><commit_msg>Update localStorage on ControlsModal unmount<commit_after>import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Table
} from "reactstrap";
import { Controller } from "jsnes";

class ControlsModal extends Component {
  constructor(props) {
    super(props);
    this.state = { keys: props.keys, button: undefined, modified: false };
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  componentWillUnmount() {
    if (this.state.modified) {
      this.props.setKeys(this.state.keys);
    }
    this.removeKeyListener("keydown", this.handleKeyDown);
  }

  handleClick(button) {
    this.setState({ button });
    document.addEventListener("keydown", this.handleKeyDown);
  }

  handleKeyDown(event) {
    var button = this.state.button;
    var keys = this.state.keys;
    var newKeys = {};
    for (var key in keys) {
      if (keys[key][0] !== button[0] || keys[key][1] !== button[1]) {
        newKeys[key] = keys[key];
      }
    }
    this.setState({
      keys: {
        ...newKeys,
        [event.keyCode]: button
      },
      button: undefined,
      modified: true
    });
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  removeKeyListener() {
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  render() {
    return (
      <Modal
        isOpen={this.props.isOpen}
        toggle={this.props.toggle}
        className="ControlsModal"
      >
        <ModalHeader toggle={this.props.toggle}>Controls</ModalHeader>
        <ModalBody>
          <Table>
            <thead>
              <tr>
                <th>Button</th>
                <th>Player 1</th>
                <th>Player 2</th>
              </tr>
            </thead>
            <tbody>
{'fraction_non_alphanumeric': 0.13794968893697593, 'fraction_numerical': 0.0032458750338111983, 'mean_word_length': 2.313620071684588, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, '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': '7279754', 'n_tokens_mistral': 1142, 'n_tokens_neox': 1111, 'n_words': 219}