Kuoll React ToDo Demo App

            
              "use strict";

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {items: [], text: ''};
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.handleChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({text: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    var newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState((prevState) => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

document.addEventListener("DOMContentLoaded", function(event) {
  var mountNode = document.getElementById("mountNode");
  ReactDOM.render(<TodoApp />, mountNode);
});

(function (w, k, t) {
  w[k] = w[k] || function () {
    var a = arguments;
    return new Promise(function (y, n) {
      (w[k].q = w[k].q || []).push({a: a, d: {y: y, n: n}});
    }); 
  };
  var s = document.createElement(t),
      f = document.getElementsByTagName(t)[0];
  s.async = 1;
  s.src = 'https://cdn.kuoll.com/bootloader.js';
  f.parentNode.insertBefore(s, f);
  console.log(s.src);
}(window, 'kuoll', 'script'));

kuoll("startRecord", {
  API_KEY: "32dae8f7-c33c-4127-bb7e-a07c75829185",
  userId: 1 
});

function createIssue() {
      kuoll('createIssue', null, "Problem description").then(
        function(issue) {
          var link = document.createElement("a");
          link.target="_blank";
          link.href = "https://www.kuoll.com/play.html?recordCode=" + issue.recordCode;
          link.innerText = "See the record"; 

          document.body.appendChild(link);
        },
        function(err) {
          console.log('err ' + err);
        }
      );
}