<commit_before>var Application = Components.classes["@mozilla.org/steel/application;1"].getService(Components.interfaces.steelIApplication);

var PersonalDetails = ["Name","Home Phone", "Mobile", "Email", "Address"];

var WorkDetails = ["Work Phone", "Work Mobile", "Email", "Address"]

var ContactField = React.createClass({
    save: function() {
        this.props.onUserInput(
          this.refs.newText.value, this.props.index
        );
    },
    renderDisplay: function() {
        return (
            <div className="field">
                <p>{this.props.fieldName}
                    : {this.props.content}</p>
            </div>
        );
    },
    renderForm: function() {
        return (
            <div className="field">
                <p>{this.props.fieldName}: </p>
                <input type="text" ref="newText" defaultValue={this.props.content} className="form-control" onChange={this.save}></input>
            </div>
        )
    },
    render: function() {
        if (this.props.editing) {
            return this.renderForm();
        } else {
            return this.renderDisplay();
        }
    }
});

var ContactSection = React.createClass({
    getInitialState: function() {
        var fields = [];
        for(var i = 0; i < this.props.fieldNames.length; i++){
          fields.push({
              id: this.nextId(),
              fieldName: this.props.fieldNames[i],
              content: undefined,
              editing: false
          });
        }
        return {
          fields: fields,
          editing: false
        };
    },
    nextId: function() {
        this.uniqueId = this.uniqueId || 0;
        return this.uniqueId++;
    },
    update: function(newText, i) {
        var fields = this.state.fields;
        fields[i].content = newText;
        this.setState({fields: fields});
    },
    save: function() {
        var fields = this.state.fields;
        this.setState({fields: fields}, function() {
          for (var ref in this.refs) {
             var field = ReactDOM.findDOMNode(this.refs[ref]);
             field.onChange();
          }
        }.bind(this));
        this.setState({editing: false});
    },
    edit: function() {
        this.setState({editing: true});
    },
    renderDisplay: function(field, i) {
        return (
            <ContactField key={field.id} index={i} content={field.content} fieldName = {field.fieldName} editing = {false} ref={"field" + i}></ContactField>
        );
    },
    renderForm: function(field, i) {
        return (
            <ContactField key={field.id} index={i} content={field.content} fieldName = {field.fieldName} editing = {true} onUserInput={this.update} ref={"field" + i}></ContactField>
        );
    },
    render: function() {
      if(this.state.editing) {
        return (
          <div className="contact-section">
            <h1>{this.props.sectionName}</h1>
            <button onClick={this.save}>Save</button>
            {this.state.fields.map(this.renderForm)}
          </div>
        )
      } else {
        return (
          <div className="contact-section">
            <h1>{this.props.sectionName}</h1>
            <button onClick={this.edit}>Edit</button>
            {this.state.fields.map(this.renderDisplay)}
          </div>
        )
    }
  }
});

ReactDOM.render(
    <ContactSection sectionName={"Home"} fieldNames={PersonalDetails}/>, document.getElementById('personal'));
ReactDOM.render(
    <ContactSection sectionName={"Work"} fieldNames={WorkDetails}/>, document.getElementById('work'));<commit_msg>Adds the ability to cancel editing of contact fields<commit_after>var Application = Components.classes["@mozilla.org/steel/application;1"].getService(Components.interfaces.steelIApplication);

var PersonalDetails = ["Name","Home Phone", "Mobile", "Email", "Address"];

var WorkDetails = ["Work Phone", "Work Mobile", "Email", "Address"]

var ContactField = React.createClass({
    save: function() {
        this.props.onUserInput(
          this.refs.newText.value, this.props.index
        );
    },
    renderDisplay: function() {
        return (
            <div className="field">
                <p>{this.props.fieldName}
                    : {this.props.fieldContent}</p>
            </div>
        );
    },
    renderForm: function() {
        return (
            <div className="field">
                <p>{this.props.fieldName}: </p>
                <input type="text" ref="newText" defaultValue={this.props.fieldContent} className="form-control" onChange={this.save}></input>
            </div>
        )
    },
    render: function() {
        if (this.props.editing) {
            return this.renderForm();
        } else {
            return this.renderDisplay();
        }
    }
});

var ContactSection = React.createClass({
    getInitialState: function() {
        var fields = [];
        var tempFields = [];
        for(var i = 0; i < this.props.fieldNames.length; i++){
          fields.push({
              id: this.nextId(),
              fieldName: this.props.fieldNames[i],
              fieldContent: "",
              editing: false
          });
          tempFields.push({
              id: this.nextId(),
              fieldName: this.props.fieldNames[i],
              fieldContent: "",
              editing: false
          });
        }
        return {
          fields: fields,
          editing: false,
          tempFields: tempFields
        };
    },
    nextId: function() {
        this.uniqueId = this.uniqueId || 0;
        return this.uniqueId++;
    },
    update: function(newText, i) {
        var fields = this.state.tempFields;
        fields[i].fieldContent = newText;
        this.setState({tempFields: fields});
    },
    save: function() {
        var tempFields = this.state.tempFields;
        var fields = this.state.fields;
        for(var i = 0; i < fields.length; i++) {
          fields[i].fieldContent = tempFields[i].fieldContent;
        }
        this.setState({fields: fields});
        this.setState({editing: false});
    },
    cancel: function() {
      var tempFields = this.state.tempFields;
      var fields = this.state.fields;
      for(var i = 0; i < fields.length; i++) {
        tempFields[i].fieldContent = fields[i].fieldContent;
      }
      this.setState({tempFields: tempFields});
      this.setState({editing: false});
    },
    edit: function() {
        this.setState({editing: true});
    },
    renderDisplay: function(field, i) {
        return (
            <ContactField key={field.id} index={i} fieldContent={field.fieldContent} fieldName = {field.fieldName} editing = {false} ref={"field" + i}></ContactField>
        );
    },
    renderForm: function(field, i) {
        return (
            <ContactField key={field.id} index={i} fieldContent={field.fieldContent} fieldName = {field.fieldName} editing = {true} onUserInput={this.update} ref={"field" + i}></ContactField>
        );
    },
    render: function() {
      if(this.state.editing) {
        return (
          <div className="contact-section">
            <h1>{this.props.sectionName}</h1>
            <button onClick={this.save}>Save</button>
            <button onClick={this.cancel}>Cancel</button>
            {this.state.tempFields.map(this.renderForm)}
          </div>
        )
      } else {
        return (
          <div className="contact-section">
            <h1>{this.props.sectionName}</h1>
            <button onClick={this.edit}>Edit</button>
            {this.state.fields.map(this.renderDisplay)}
          </div>
        )
    }
  }
});

ReactDOM.render(
    <ContactSection sectionName={"Home"} fieldNames={PersonalDetails} />, document.getElementById('personal'));
ReactDOM.render(
    <ContactSection sectionName={"Work"} fieldNames={WorkDetails} />, document.getElementById('work'));
{'fraction_non_alphanumeric': 0.149885291868468, 'fraction_numerical': 0.002039255671679837, 'mean_word_length': 2.088154269972452, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 61, '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': '2310355', 'n_tokens_mistral': 2218, 'n_tokens_neox': 2215, 'n_words': 408}