<commit_before>function addMotto(text) {
  var current = getMottos();;
  if(current === null) current = [];
  
  current.push({motto: text});

  localStorage.setItem('mottos',
                       JSON.stringify(current));
}

function removeMotto(index) {
  var current = localStorage.getItem('mottos');
  localStorage.setItem('mottos',
                       JSON.stringify(current.splice(index, 1)));
}

function getMottos() {
  return JSON.parse(localStorage.getItem('mottos'));
}

var Motto = React.createClass({
  render: function() {
    return (
      <li>
          <h3>{this.props.motto}</h3>
          <span>X</span>
      </li>
    );
  }
});

var MottoList = React.createClass({
  render: function() {
    var mottoNodes = this.props.data.map(function(m, index) {
      return (
        <Motto key={index} motto={m.motto} />
      );
    });
    
    return (
      <ul className="mottoList">
        {mottoNodes}  
      </ul> 
    );
  }
});

var MottoForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var motto = React.findDOMNode(this.refs.motto).value.trim();
    if(!motto) {
      return;
    }

    this.props.onMottoSubmit({motto: motto});
    React.findDOMNode(this.refs.motto).value = '';
  },
  render: function() {
    return (
      <form className="mottoForm" onSubmit={this.handleSubmit}>
          <input type="text" placeholder="New motto" ref="motto" />
          <input type="submit" value="Post" />
      </form>
    ); 
  }
});

var MottoContainer = React.createClass({
  loadMottos: function() {
    this.setState(getMottos()); 
  },
  handleMottoSubmit: function(motto) {
    var mottos = this.state.data;
    mottos.push(motto);
    
    addMotto(motto);
    this.setState({data: mottos}, function() {
      
    });
  },
  getInitialState: function() {
    return {data: getMottos()}; 
  },
  componentDidMount: function() {
    this.loadMottos();
  },
  render: function() {
    return (
      <div className="mottoContainer">
        <MottoList data={this.state.data} />
        <MottoForm onMottoSubmit={this.handleMottoSubmit} />    
      </div>
    ); 
  }
});

var data = getMottos();

if(data === null) {
  data = [];
  localStorage.setItem('mottos', JSON.stringify(data)); 
}

React.render(
  <MottoContainer data={data} />,
  document.getElementById('content')
);
<commit_msg>added in LRU to mottos<commit_after>// LRU cache of mottos - up to 3 mottos you can have. New ones will overwrite old ones.
function addMotto(text) {
  var current = getMottos();;
  if(current === null) current = [];

  current.push({motto: text});
  if(current.length > 3) {
    current.splice(0, 1);
  }

  localStorage.setItem('mottos',
                       JSON.stringify(current));
}

function removeMotto(index) {
  var current = localStorage.getItem('mottos');
  localStorage.setItem('mottos',
                       JSON.stringify(current.splice(index, 1)));
}

function getMottos() {
  return JSON.parse(localStorage.getItem('mottos'));
}

function getRandom(ar) {
  var rand = Math.floor(Math.random() * ar.length);
  return ar[rand];
}

// You can have up to 5 Mottos. LRU cache to erase old ones.
var Motto = React.createClass({
  render: function() {
    return (
      <h3>{this.props.motto}</h3>
    );
  }
});

var MottoList = React.createClass({
  render: function() {
    var mottoNodes = this.props.data.map(function(m, index) {
      return (
        <li>
          <Motto key={index} motto={m.motto} />
        </li>
      );
    });
    
    return (
      <ul className="mottoList">
        {mottoNodes}  
      </ul> 
    );
  }
});

var MottoForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var motto = React.findDOMNode(this.refs.motto).value.trim();
    if(!motto) {
      return;
    }

    this.props.onMottoSubmit({motto: motto});
    React.findDOMNode(this.refs.motto).value = '';
  },
  render: function() {
    return (
      <form className="mottoForm" onSubmit={this.handleSubmit}>
          <input type="text" placeholder="New motto" ref="motto" />
          <input type="submit" value="Post" />
      </form>
    ); 
  }
});

var MottoContainer = React.createClass({
  loadMottos: function() {
    this.setState(getMottos()); 
  },
  handleMottoSubmit: function(motto) {
    addMotto(motto);
    this.setState({data: getMottos()}, function() {
      
    });
  },
  getInitialState: function() {
    return {data: getMottos()}; 
  },
  componentDidMount: function() {
    this.loadMottos();
  },
  render: function() {
    return (
      <div className="mottoContainer">
        <MottoList data={this.state.data} />
        <MottoForm onMottoSubmit={this.handleMottoSubmit} />    
      </div>
    ); 
  }
});

var data = getMottos();

if(data === null) {
  data = [];
  localStorage.setItem('mottos', JSON.stringify(data)); 
}

React.render(
  <MottoContainer data={data} />,
  document.getElementById('content')
);

{'fraction_non_alphanumeric': 0.16474863718958208, 'fraction_numerical': 0.002220876236624268, 'mean_word_length': 2.744520030234316, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 38, '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': '590050', 'n_tokens_mistral': 1711, 'n_tokens_neox': 1680, 'n_words': 296}