const React = require("react"); const ReactDOM = require("react-dom"); const superagent = require("superagent"); const serverAddress = "http://localhost:8000"; class CodeArea extends React.Component { constructor(props) { super(props); this.state = {value: "", lastOutput: null}; this.handleChange = this.handleChange.bind(this); this.submit = this.submit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } submit(event) { console.log("Event", this.state.value); const source = this.state.value; superagent.post(`${serverAddress}/input`) .send({ source }) .set("accept", "json") .end((error, response) => { if (response) { console.log("Resp", response); this.setState({lastOutput: response.body.text}) } else { console.error("Error: ", error); } }); } renderOutput() { if (!this.state.lastOutput) { return null; } return <textarea readOnly value={ this.state.lastOutput } />; } render() { return (<div className="CodeArea"> <div className="input"> <textarea value={ this.state.value } onChange={this.handleChange}> </textarea> <button onClick={ this.submit }>Run!</button> </div> <div className="output"> { this.renderOutput() } </div> </div>); } } const main = (<div> <h1>Schala web input</h1> <p>Write your source code here</p> <CodeArea/> </div>); const rootDom = document.getElementById("main"); ReactDOM.render(main, rootDom);