Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
rk4718
wacc_26_web_client
Commits
e7b4e6da
Commit
e7b4e6da
authored
Mar 12, 2020
by
Matej Genci
Browse files
Extract state into App.js
parent
6b4dddce
Changes
4
Show whitespace changes
Inline
Side-by-side
src/App.js
View file @
e7b4e6da
...
@@ -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
;
src/view/ButonStrip.js
View file @
e7b4e6da
...
@@ -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
>
)
)
}
}
...
...
src/view/CodeEditor.js
View file @
e7b4e6da
...
@@ -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
>
)
)
...
...
src/view/UserIO.js
View file @
e7b4e6da
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
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment