schala/static/main.jsx

65 lines
1.6 KiB
React
Raw Permalink Normal View History

const React = require("react");
const ReactDOM = require("react-dom");
const superagent = require("superagent");
2017-09-21 00:01:54 -07:00
const serverAddress = "http://localhost:8000";
2017-09-20 23:46:46 -07:00
class CodeArea extends React.Component {
constructor(props) {
super(props);
2017-10-01 23:25:36 -07:00
this.state = {value: "", lastOutput: null};
2017-09-20 23:46:46 -07:00
this.handleChange = this.handleChange.bind(this);
this.submit = this.submit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
submit(event) {
2017-10-01 23:25:36 -07:00
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);
}
});
2017-10-01 23:25:36 -07:00
}
renderOutput() {
if (!this.state.lastOutput) {
return null;
}
return <textarea readOnly value={ this.state.lastOutput } />;
2017-09-20 23:46:46 -07:00
}
render() {
2017-10-02 00:04:33 -07:00
return (<div className="CodeArea">
2017-10-01 23:25:36 -07:00
<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>
2017-09-20 23:46:46 -07:00
</div>);
}
}
const main = (<div>
<h1>Schala web input</h1>
<p>Write your source code here</p>
2017-09-20 23:46:46 -07:00
<CodeArea/>
</div>);
const rootDom = document.getElementById("main");
2017-09-20 23:46:46 -07:00
ReactDOM.render(main, rootDom);