Extract state into App.js

src/App.js

@@ -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;

src/view/ButonStrip.js

@@ -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>
         )
     }

src/view/CodeEditor.js

@@ -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>
         )

src/view/UserIO.js

 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>