<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Accounts from './accounts';
import Modal from '../application_instances/modal';

export default class Sidebar extends React.Component {
  static propTypes = {
    application: PropTypes.shape({
      name: PropTypes.string.isRequired,
    }),
    applicationInstance: PropTypes.shape({
      name: PropTypes.string,
      site: PropTypes.shape({
        url: PropTypes.string
      })
    }),
    accounts: PropTypes.shape({}),
    currentAccount: PropTypes.shape({}),
    setAccountActive: PropTypes.func.isRequired,
    saveApplicationInstance: PropTypes.func.isRequired,
    sites: PropTypes.shape({}).isRequired,
  }

  constructor() {
    super();
    this.state = { modalOpen: false };
  }

  settings() {
    if (this.props.applicationInstance) {
      return (
        <span>
          <a onClick={() => this.setState({ modalOpen: true })}>
            <i className="i-settings" />
          </a>
          <Modal
            isOpen={this.state.modalOpen}
            closeModal={() => this.setState({ modalOpen: false })}
            sites={this.props.sites}
            save={this.props.saveApplicationInstance}
            application={this.props.application}
            applicationInstance={this.props.applicationInstance}
          />
        </span>
      );
    }
    return null;
  }

  render() {
    const schoolUrl = this.props.applicationInstance ? this.props.applicationInstance.site.url : '';
    const settings = this.settings();
    return (
      <div className="o-left">
        <div className="c-tool">
          {settings}
          <h4 className="c-tool__subtitle">LTI Tool</h4>
          <h3 className="c-tool__title">{this.props.application ? this.props.application.name : 'n/a'}</h3>
        </div>

        <div className="c-tool">
          <h4 className="c-tool__instance"><a href={schoolUrl}>{schoolUrl}</a></h4>
        </div>

        <div className="c-filters">
          <h4 className="c-sidebar-subtitle">Accounts</h4>
          <Accounts
            currentAccount={this.props.currentAccount}
            accounts={this.props.accounts}
            setAccountActive={this.props.setAccountActive}
          />
        </div>
      </div>
    );
  }
}
<commit_msg>fixes modal issue<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Accounts from './accounts';
import Modal from '../application_instances/modal';

export default class Sidebar extends React.Component {
  static propTypes = {
    application: PropTypes.shape({
      name: PropTypes.string.isRequired,
    }),
    applicationInstance: PropTypes.shape({
      name: PropTypes.string,
      site: PropTypes.shape({
        url: PropTypes.string
      })
    }),
    accounts: PropTypes.shape({}),
    currentAccount: PropTypes.shape({}),
    setAccountActive: PropTypes.func.isRequired,
    saveApplicationInstance: PropTypes.func.isRequired,
    sites: PropTypes.shape({}).isRequired,
  }

  constructor() {
    super();
    this.state = { modalOpen: false };
  }

  get applicationInstanceModal() {
    if (this.state.modalOpen) {
      return <Modal
        closeModal={() => this.setState({ modalOpen: false })}
        sites={this.props.sites}
        save={this.props.saveApplicationInstance}
        application={this.props.application}
        applicationInstance={this.props.applicationInstance}
      />;
    }
    return null;
  }

  settings() {
    if (this.props.applicationInstance) {
      return (
        <span>
          <a onClick={() => this.setState({ modalOpen: true })}>
            <i className="i-settings" />
          </a>
          { this.applicationInstanceModal }
        </span>
      );
    }
    return null;
  }

  render() {
    const schoolUrl = this.props.applicationInstance ? this.props.applicationInstance.site.url : '';
    const settings = this.settings();
    return (
      <div className="o-left">
        <div className="c-tool">
          {settings}
          <h4 className="c-tool__subtitle">LTI Tool</h4>
          <h3 className="c-tool__title">{this.props.application ? this.props.application.name : 'n/a'}</h3>
        </div>

        <div className="c-tool">
          <h4 className="c-tool__instance"><a href={schoolUrl}>{schoolUrl}</a></h4>
        </div>

        <div className="c-filters">
          <h4 className="c-sidebar-subtitle">Accounts</h4>
          <Accounts
            currentAccount={this.props.currentAccount}
            accounts={this.props.accounts}
            setAccountActive={this.props.setAccountActive}
          />
        </div>
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.14123202403949345, 'fraction_numerical': 0.0034342133505044, 'mean_word_length': 2.4315169366715756, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 57, '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': '5102891', 'n_tokens_mistral': 1315, 'n_tokens_neox': 1337, 'n_words': 239}