Commit e7b4e6da authored by Matej Genci's avatar Matej Genci

Extract state into App.js

parent 6b4dddce
......@@ -12,26 +12,56 @@ import './App.css';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
wacc: {
code: "",
markers: [],
},
js: {
code: "",
markers: [],
},
arm: {
code: "",
markers: [],
}
}
}
onWaccCodeChange = (newCode) => {
this.setState({
wacc: {
code: newCode,
markers: [{ startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text' }]
}
})
}
render() {
return (
<div className="App">
<ButtonStrip />
<ButtonStrip
onCompileClick={(e) => { alert("Compiling wacc\n\"" + this.state.wacc.code + "\"") }}
onStepJsClick={(e) => { this.setState({js: {code: "Hello World!"}}) }} />
<div className="App-code-editors">
<CodeEditor
heading='WACC Code'
name='wacc_edit' />
onCodeChange={this.onWaccCodeChange}
value={this.state.wacc.code}
markers={this.state.wacc.markers} />
<CodeEditor
heading='JavaScript'
name='js_edit' />
value={this.state.js.code}
markers={this.state.js.markers} />
<CodeEditor
heading='ARM Assembly'
name='arm_edit'/>
value={this.state.arm.code}
markers={this.state.arm.markers} />
</div>
<div id="treeWrapper" style={{width: '50em', height: '20em', background: 'white'}}>
<div id="treeWrapper" style={{ width: '50em', height: '20em', background: 'white' }}>
<Tree
data={testGraphData}
orientation="vertical" />
......@@ -43,8 +73,12 @@ class App extends React.Component {
}
}
const testGraphData=[{name:"WACC Program",children:[{name:"BinOP",attributes:{operation:"Add"},
children:[{name:"Const",attributes:{value:"1"}},{name:"VarIdent",attributes:{ident:"x"}}]}]}];
const testGraphData = [{
name: "WACC Program", children: [{
name: "BinOP", attributes: { operation: "Add" },
children: [{ name: "Const", attributes: { value: "1" } }, { name: "VarIdent", attributes: { ident: "x" } }]
}]
}];
export default App;
......@@ -8,11 +8,10 @@ class ButtonStrip extends React.Component {
render() {
return (
<div>
<button>COMPILE</button>
<button>COMPILE</button>
<button>STEP JS LINE</button>
<button>STEP INTO AST NODE</button>
<button>STEP OVER AST NODE</button>
<button onClick={this.props.onCompileClick}></button>
<button onClick={this.props.onStepJsClick}>STEP JS LINE</button>
<button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</button>
<button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</button>
</div>
)
}
......
......@@ -7,23 +7,14 @@ import "ace-builds/src-noconflict/theme-github";
class CodeEditor extends React.Component {
constructor(props) {
super(props)
this.state = {value: "", markers: []}
}
heading() {
heading = () => {
if (this.props.heading !== undefined) {
return <h1>{this.props.heading}</h1>
}
}
onChange = (newValue) => {
console.log("change", newValue);
this.setState({
value: newValue,
markers: [{ startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text' }]
})
}
// Render editor
render() {
return (
......@@ -32,11 +23,14 @@ class CodeEditor extends React.Component {
<AceEditor
mode="java"
theme="github"
value={this.state.value}
onChange={this.onChange}
name={this.props.name}
className="aceeditor"
markers={this.state.markers}
onChange={(newValue) => {
this.props.onCodeChange(newValue)
}}
value={this.props.value}
markers={this.props.markers}
editorProps={{ $blockScrolling: true }} />
</div>
)
......
import React from 'react'
class UserIO extends React.Component {
constructor(props) {
super(props)
this.state = {
programOutput: "",
programInput: ""
}
}
onInputChange = (evt) => {
this.setState({programInput: evt.target.value})
}
onSubmitClick = (evt) => {
this.setState((state, props) => ({
programOutput: state.programInput
}))
}
render() {
return (
<div className="userIO">
<textarea id="programOutput"></textarea>
<textarea value={this.state.programOutput} />
<div className="userIO-input">
<input id="programInput"></input>
<input value={this.state.programInput} onChange={this.onInputChange}></input>
<button type="submit">submit</button>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment