Editor state management (#555)

* Get intial state of code on editor load

* Added more types to handle changing code

* Wrote a test case for changeCodeEpic

* fix deps

* Inject testscheduler into changeCodeEpic

* State in post request should be evaluated at the time of the action

* fix eslint in GamePage tests

* code review changes

game_frontend/src/containers/GamePage/__snapshots__/index.test.js.snap → game_frontend/src/components/GamePage/__snapshots__/index.test.js.snap

@@ -2,10 +2,7 @@
 
 exports[`<GamePage /> matches snapshot 1`] = `
 <styled.div>
-  <IDE
-    code="class Avatar"
-    getCode={[MockFunction]}
-  />
+  <IDE />
   <Game />
 </styled.div>
 `;

game_frontend/src/components/GamePage/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import IDE from 'components/IDE'
+import Game from 'components/Game'
+
+const GamePageContainer = styled.div`
+  display: grid
+  grid-template: 80px 1fr 150px / 1fr 1fr
+  grid-template-areas: "ide-menu game-menu"
+                       "ide-editor game-view"
+                       "ide-console game-view";
+  width: 100vw
+  height: 100vh
+`
+
+export default class GamePage extends Component {
+  render () {
+    return (
+      <GamePageContainer>
+        <IDE />
+        <Game />
+      </GamePageContainer>
+    )
+  }
+}

game_frontend/src/components/GamePage/index.test.js

@@ -0,0 +1,12 @@
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import GamePage from 'components/GamePage'
+
+describe('<GamePage />', () => {
+  it('matches snapshot', () => {
+    const component = shallow(<GamePage />)
+
+    expect(component).toMatchSnapshot()
+  })
+})

game_frontend/src/components/IDE/__snapshots__/index.test.js.snap

@@ -2,8 +2,8 @@
 
 exports[`<IDE /> renders correctly 1`] = `
 <React.Fragment>
-  <IDEMenu />
-  <IDEEditor />
+  <Connect(IDEMenu) />
+  <Connect(IDEEditor) />
   <styled.div />
 </React.Fragment>
 `;

game_frontend/src/components/IDE/index.js

@@ -1,23 +1,16 @@
 import React, { Component, Fragment } from 'react'
-import PropTypes from 'prop-types'
-import IDEMenu from 'components/IDEMenu'
-import IDEEditor from 'components/IDEEditor'
+import IDEMenu from 'containers/IDEMenu'
+import IDEEditor from 'containers/IDEEditor'
 import IDEConsole from 'components/IDEConsole'
 
 export default class IDE extends Component {
   render () {
     return (
       <Fragment>
-        <IDEMenu getCode={this.props.getCode} postCode={this.props.postCode} />
-        <IDEEditor code={this.props.code} />
+        <IDEMenu />
+        <IDEEditor />
         <IDEConsole />
       </Fragment>
     )
   }
 }
-
-IDE.propTypes = {
-  code: PropTypes.string,
-  getCode: PropTypes.func,
-  postCode: PropTypes.func
-}

game_frontend/src/containers/IDEEditor/__snapshots__/index.test.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IDEEditor /> matches snapshot 1`] = `
+<styled.div>
+  <ReactAce
+    cursorStart={1}
+    editorProps={Object {}}
+    enableBasicAutocompletion={false}
+    enableLiveAutocompletion={false}
+    focus={false}
+    fontSize={14}
+    height="100%"
+    highlightActiveLine={true}
+    maxLines={null}
+    minLines={null}
+    mode="python"
+    name="ace_editor"
+    onChange={null}
+    onLoad={[MockFunction]}
+    onPaste={null}
+    onScroll={null}
+    readOnly={false}
+    scrollMargin={
+      Array [
+        0,
+        0,
+        0,
+        0,
+      ]
+    }
+    setOptions={
+      Object {
+        "enableBasicAutocompletion": true,
+        "enableLiveAutocompletion": true,
+        "enableSnippets": true,
+        "showLineNumbers": true,
+        "tabSize": 2,
+      }
+    }
+    showGutter={true}
+    showPrintMargin={true}
+    style={Object {}}
+    tabSize={4}
+    theme="idle_fingers"
+    value="class Avatar"
+    width="100%"
+    wrapEnabled={false}
+  />
+</styled.div>
+`;

game_frontend/src/containers/IDEEditor/index.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+import React, { Component } from 'react'
+import AceEditor from 'react-ace'
+import 'brace/theme/idle_fingers'
+import 'brace/mode/python'
+import 'brace/snippets/python'
+import 'brace/ext/language_tools'
+import { connect } from 'react-redux'
+import { actions } from 'features/Editor'
+import PropTypes from 'prop-types'
+
+const IDEEditorLayout = styled.div`
+  background-color: #2F4F4F
+  grid-area: ide-editor
+`
+export class IDEEditor extends Component {
+  render () {
+    return (
+      <IDEEditorLayout>
+        <AceEditor
+          mode='python'
+          theme='idle_fingers'
+          name='ace_editor'
+          onLoad={this.props.getCode}
+          onChange={this.props.editorChanged}
+          fontSize={14}
+          showPrintMargin
+          showGutter
+          highlightActiveLine
+          value={this.props.code}
+          width='100%'
+          height='100%'
+          setOptions={{
+            enableBasicAutocompletion: true,
+            enableLiveAutocompletion: true,
+            enableSnippets: true,
+            showLineNumbers: true,
+            tabSize: 2
+          }} />
+      </IDEEditorLayout>
+    )
+  }
+}
+
+IDEEditor.propTypes = {
+  code: PropTypes.string,
+  getCode: PropTypes.func,
+  editorChanged: PropTypes.func
+}
+
+const mapStateToProps = state => ({
+  code: state.editor.code
+})
+
+const mapDispatchToProps = {
+  getCode: actions.getCodeRequest,
+  editorChanged: actions.keyPressed
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(IDEEditor)

game_frontend/src/containers/IDEEditor/index.test.js

@@ -0,0 +1,18 @@
+/* eslint-env jest */
+import React from 'react'
+import { IDEEditor } from 'containers/IDEEditor'
+import { shallow } from 'enzyme/build/index'
+
+describe('<IDEEditor />', () => {
+  it('matches snapshot', () => {
+    const props = {
+      code: 'class Avatar',
+      getCode: jest.fn(),
+      postCode: jest.fn()
+    }
+
+    const component = shallow(<IDEEditor {...props} />)
+
+    expect(component).toMatchSnapshot()
+  })
+})

game_frontend/src/components/IDEMenu/__snapshots__/index.test.js.snap → game_frontend/src/containers/IDEMenu/__snapshots__/index.test.js.snap

@@ -9,12 +9,6 @@ exports[`<IDEMenu /> renders correctly 1`] = `
 <nav
   className="c0"
 >
-  <button
-    id="get-code-button"
-    onClick={undefined}
-  >
-    Get Code
-  </button>
   <button
     id="post-code-button"
     onClick={undefined}