Commit e7b4e6da authored by Matej Genci's avatar Matej Genci
Browse files

Extract state into App.js

parent 6b4dddce
...@@ -12,26 +12,56 @@ import './App.css'; ...@@ -12,26 +12,56 @@ import './App.css';
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
super(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() { render() {
return ( return (
<div className="App"> <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"> <div className="App-code-editors">
<CodeEditor <CodeEditor
heading='WACC Code' heading='WACC Code'
name='wacc_edit' /> onCodeChange={this.onWaccCodeChange}
value={this.state.wacc.code}
markers={this.state.wacc.markers} />
<CodeEditor <CodeEditor
heading='JavaScript' heading='JavaScript'
name='js_edit' /> value={this.state.js.code}
markers={this.state.js.markers} />
<CodeEditor <CodeEditor
heading='ARM Assembly' heading='ARM Assembly'
name='arm_edit'/> value={this.state.arm.code}
markers={this.state.arm.markers} />
</div> </div>
<div id="treeWrapper" style={{width: '50em', height: '20em', background: 'white'}}> <div id="treeWrapper" style={{ width: '50em', height: '20em', background: 'white' }}>
<Tree <Tree
data={testGraphData} data={testGraphData}
orientation="vertical" /> orientation="vertical" />
...@@ -43,8 +73,12 @@ class App extends React.Component { ...@@ -43,8 +73,12 @@ class App extends React.Component {
} }
} }
const testGraphData=[{name:"WACC Program",children:[{name:"BinOP",attributes:{operation:"Add"}, const testGraphData = [{
children:[{name:"Const",attributes:{value:"1"}},{name:"VarIdent",attributes:{ident:"x"}}]}]}]; name: "WACC Program", children: [{
name: "BinOP", attributes: { operation: "Add" },
children: [{ name: "Const", attributes: { value: "1" } }, { name: "VarIdent", attributes: { ident: "x" } }]
}]
}];
export default App; export default App;
...@@ -8,11 +8,10 @@ class ButtonStrip extends React.Component { ...@@ -8,11 +8,10 @@ class ButtonStrip extends React.Component {
render() { render() {
return ( return (
<div> <div>
<button>COMPILE</button> <button onClick={this.props.onCompileClick}></button>
<button>COMPILE</button> <button onClick={this.props.onStepJsClick}>STEP JS LINE</button>
<button>STEP JS LINE</button> <button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</button>
<button>STEP INTO AST NODE</button> <button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</button>
<button>STEP OVER AST NODE</button>
</div> </div>
) )
} }
......
...@@ -7,23 +7,14 @@ import "ace-builds/src-noconflict/theme-github"; ...@@ -7,23 +7,14 @@ import "ace-builds/src-noconflict/theme-github";
class CodeEditor extends React.Component { class CodeEditor extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {value: "", markers: []}
} }
heading() { heading = () => {
if (this.props.heading !== undefined) { if (this.props.heading !== undefined) {
return <h1>{this.props.heading}</h1> 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 editor
render() { render() {
return ( return (
...@@ -32,11 +23,14 @@ class CodeEditor extends React.Component { ...@@ -32,11 +23,14 @@ class CodeEditor extends React.Component {
<AceEditor <AceEditor
mode="java" mode="java"
theme="github" theme="github"
value={this.state.value}
onChange={this.onChange}
name={this.props.name}
className="aceeditor" className="aceeditor"
markers={this.state.markers}
onChange={(newValue) => {
this.props.onCodeChange(newValue)
}}
value={this.props.value}
markers={this.props.markers}
editorProps={{ $blockScrolling: true }} /> editorProps={{ $blockScrolling: true }} />
</div> </div>
) )
......
import React from 'react' import React from 'react'
class UserIO extends React.Component { 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() { render() {
return ( return (
<div className="userIO"> <div className="userIO">
<textarea id="programOutput"></textarea> <textarea value={this.state.programOutput} />
<div className="userIO-input"> <div className="userIO-input">
<input id="programInput"></input> <input value={this.state.programInput} onChange={this.onInputChange}></input>
<button type="submit">submit</button> <button type="submit">submit</button>
</div> </div>
</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