<commit_before>import React, { Component } from 'react';
import { Icons } from '@storybook/components';
import ReactModal from 'react-modal';
import { Route } from '../router';
import { setAll, setItem } from './persist';

import {
  defaultHotkeys,
  defaultKeyboardShortcuts,
  initShortcutKeys,
  isSetEqual,
  mapToKeyEl,
  parseKey,
  serializedLocalStorage,
} from './utils';
import {
  A,
  Button,
  ColWrapper,
  Container,
  Description,
  Footer,
  GridHeaderRow,
  GridWrapper,
  Heading,
  Header,
  HeaderItem,
  IconButton,
  CenteredRow,
  HotKeyWrapper,
  Main,
  ModalInnerWrapper,
  ModalInputWrapper,
  Row,
  Title,
  TitleIcon,
  TextInput,
  TitleText,
  Wrapper,
} from './components';

class ShortcutsPage extends Component {
  constructor(props) {
    super(props);
    const shortcuts = initShortcutKeys();

    this.state = {
      showModal: false,
      activeInputField: '',
      activeTitle: '',
      inputValue: new Set(),
      hasSaveError: false,
      shortcutKeys: serializedLocalStorage(shortcuts),
    };
  }

  shortcutCreator = field => () => {
    const { shortcutKeys } = this.state;
    const creator = isSetEqual(shortcutKeys[field], defaultHotkeys[field]) ? 'Default' : 'User';

    return creator;
  };

  handleOpenModal = (inputName, title) => () => {
    this.setState({ showModal: true, activeInputField: inputName, activeTitle: title });
  };

  handleCloseModal = () => {
    this.setState({
      showModal: false,
      activeInputField: '',
      activeTitle: '',
      inputValue: new Set(),
    });
  };

  captureKeyPress = e => {
    const { inputValue } = this.state;

    const parsedKey = parseKey(e);
    const newSet = inputValue.add(parsedKey);
    this.setState({ inputValue: newSet, hasSaveError: false });
  };

  clearShortcuts = () => this.setState({ inputValue: new Set() });

  duplicateFound = () => {
    const { inputValue, shortcutKeys } = this.state;
    const match = Object.entries(shortcutKeys).filter(i => isSetEqual(inputValue, i[1]));
    return !!match.length;
  };

  saveShortcut = () => {
    const { activeInputField, inputValue, shortcutKeys } = this.state;

    if (this.duplicateFound()) {
      return this.setState({ hasSaveError: true });
    }

    this.setState({
      shortcutKeys: { ...shortcutKeys, [activeInputField]: inputValue },
      showModal: false,
    });
    return setItem('shortcutKeys', activeInputField, [...inputValue]);
  };

  renderCheckBox = stateValue => {
    const { shortcutKeys } = this.state;
    if (shortcutKeys[stateValue] && shortcutKeys[stateValue].size > 0) {
      return [
        <IconButton
          className="save"
          style={{ zIndex: 2 }}
          colorTheme="success"
          onClick={this.saveShortcut}
          key="confirmButton"
        >
          <Icons icon="check" />
        </IconButton>,
        <IconButton
          className="clear"
          style={{ zIndex: 2 }}
          colorTheme="undo"
          onClick={this.clearShortcuts}
          key="undoButton"
        >
          <Icons height={10} icon="cross" />
        </IconButton>,
      ];
    }
    return undefined;
  };

  restoreDefaults = () => {
    this.setState({ shortcutKeys: defaultKeyboardShortcuts });
    setAll('shortcutKeys', defaultKeyboardShortcuts);
  };

  renderStateKeys = stateVal => () => {
    const { shortcutKeys } = this.state;<commit_msg>#3984 fix error in restore defaults<commit_after>import React, { Component } from 'react';
import { Icons } from '@storybook/components';
import ReactModal from 'react-modal';
import { Route } from '../router';
import { setAll, setItem } from './persist';

import {
  defaultHotkeys,
  defaultKeyboardShortcuts,
  initShortcutKeys,
  isSetEqual,
  mapToKeyEl,
  parseKey,
  serializedLocalStorage,
} from './utils';
import {
  A,
  Button,
  ColWrapper,
  Container,
  Description,
  Footer,
  GridHeaderRow,
  GridWrapper,
  Heading,
  Header,
  HeaderItem,
  IconButton,
  CenteredRow,
  HotKeyWrapper,
  Main,
  ModalInnerWrapper,
  ModalInputWrapper,
  Row,
  Title,
  TitleIcon,
  TextInput,
  TitleText,
  Wrapper,
} from './components';

class ShortcutsPage extends Component {
  constructor(props) {
    super(props);
    const shortcuts = initShortcutKeys();

    this.state = {
      showModal: false,
      activeInputField: '',
      activeTitle: '',
      inputValue: new Set(),
      hasSaveError: false,
      shortcutKeys: serializedLocalStorage(shortcuts),
    };
  }

  shortcutCreator = field => () => {
    const { shortcutKeys } = this.state;
    const creator = isSetEqual(shortcutKeys[field], defaultHotkeys[field]) ? 'Default' : 'User';

    return creator;
  };

  handleOpenModal = (inputName, title) => () => {
    this.setState({ showModal: true, activeInputField: inputName, activeTitle: title });
  };

  handleCloseModal = () => {
    this.setState({
      showModal: false,
      activeInputField: '',
      activeTitle: '',
      inputValue: new Set(),
    });
  };

  captureKeyPress = e => {
    const { inputValue } = this.state;

    const parsedKey = parseKey(e);
    const newSet = inputValue.add(parsedKey);
    this.setState({ inputValue: newSet, hasSaveError: false });
  };

  clearShortcuts = () => this.setState({ inputValue: new Set() });

  duplicateFound = () => {
    const { inputValue, shortcutKeys } = this.state;
    const match = Object.entries(shortcutKeys).filter(i => isSetEqual(inputValue, i[1]));
    return !!match.length;
  };

  saveShortcut = () => {
    const { activeInputField, inputValue, shortcutKeys } = this.state;

    if (this.duplicateFound()) {
      return this.setState({ hasSaveError: true });
    }

    this.setState({
      shortcutKeys: { ...shortcutKeys, [activeInputField]: inputValue },
      showModal: false,
    });
    return setItem('shortcutKeys', activeInputField, [...inputValue]);
  };

  renderCheckBox = stateValue => {
    const { shortcutKeys } = this.state;
    if (shortcutKeys[stateValue] && shortcutKeys[stateValue].size > 0) {
      return [
        <IconButton
          className="save"
          style={{ zIndex: 2 }}
          colorTheme="success"
          onClick={this.saveShortcut}
          key="confirmButton"
        >
          <Icons icon="check" />
        </IconButton>,
        <IconButton
          className="clear"
          style={{ zIndex: 2 }}
          colorTheme="undo"
          onClick={this.clearShortcuts}
          key="undoButton"
        >
          <Icons height={10} icon="cross" />
        </IconButton>,
      ];
    }
    return undefined;
  };

  restoreDefaults = () => {
    this.setState({ shortcutKeys: serializedLocalStorage(defaultKeyboardShortcuts) });
    setAll('shortcutKeys', defaultKeyboardShortcuts);
  };

  renderStateKeys = stateVal => () => {
    const { shortcutKeys } = this.state;
{'fraction_non_alphanumeric': 0.13568501170960187, 'fraction_numerical': 0.00234192037470726, 'mean_word_length': 2.9180045871559632, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 45, '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': '3808572', 'n_tokens_mistral': 2093, 'n_tokens_neox': 2049, 'n_words': 430}