Make IDE component contain Resizable

Note that this make the IDE/index component stateful, handling the
editor width.

src/components/IDE/Editor.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import Resizable from 're-resizable'
 import AceEditor from 'react-ace'
 
 import { Button, IconName, Intent } from '@blueprintjs/core'
@@ -17,9 +16,7 @@ import 'brace/theme/cobalt'
  */
 export interface IEditorProps {
   editorValue: string
-  editorWidth: number
   handleEditorValueChange: (newCode: string) => void
-  handleEditorWidthChange: (widthChange: number) => void
   handleEvalEditor: () => void
 }
 
@@ -43,24 +40,7 @@ class Editor extends React.Component<IEditorProps, {}> {
     )
     const runButton = genericButton('', 'play', this.props.handleEvalEditor)
     return (
-      <Resizable
-        className="Editor"
-        size={{ width: this.props.editorWidth, height: '100%' }}
-        // tslint:disable-next-line jsx-no-lambda
-        onResizeStop={(e, direction, ref, d) => {
-          this.props.handleEditorWidthChange(d.width)
-        }}
-        enable={{
-          top: false,
-          right: true,
-          bottom: false,
-          left: false,
-          topRight: false,
-          bottomRight: false,
-          bottomLeft: false,
-          topLeft: false
-        }}
-      >
+      <div className="Editor">
         <div className="row editor-control end-xs">
           <div className="col-xs-1">{runButton}</div>
         </div>
@@ -77,7 +57,7 @@ class Editor extends React.Component<IEditorProps, {}> {
             highlightActiveLine={false}
           />
         </div>
-      </Resizable>
+      </div>
     )
   }
 }

src/components/IDE/__tests__/Editor.tsx

@@ -7,8 +7,6 @@ import Editor, { IEditorProps } from '../Editor'
 test('Editor renders correctly', () => {
   const props: IEditorProps = {
     editorValue: '',
-    editorWidth: 500,
-    handleEditorWidthChange: widthChange => {},
     handleEditorValueChange: newCode => {},
     handleEvalEditor: () => {}
   }

src/components/IDE/__tests__/__snapshots__/Editor.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Editor renders correctly 1`] = `
-"<undefined className=\\"Editor\\" size={{...}} onResizeStop={[Function: onResizeStop]} enable={{...}}>
+"<div className=\\"Editor\\">
   <div className=\\"row editor-control end-xs\\">
     <div className=\\"col-xs-1\\">
       <Blueprint2.Button onClick={[Function: handleEvalEditor]} className=\\"pt-minimal col-xs-12\\" intent=\\"none\\" icon=\\"play\\" />
@@ -10,5 +10,5 @@ exports[`Editor renders correctly 1`] = `
   <div className=\\"row editor-react-ace\\">
     <ReactAce className=\\"react-ace\\" mode=\\"javascript\\" theme=\\"cobalt\\" value=\\"\\" onChange={[Function: handleEditorValueChange]} width=\\"100%\\" height=\\"100%\\" fontSize={14} highlightActiveLine={false} name=\\"brace-editor\\" focus={false} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />
   </div>
-</undefined>"
+</div>"
 `;

src/components/IDE/index.tsx

@@ -1,19 +1,47 @@
 import * as React from 'react'
 
+import Resizable from 're-resizable'
+
 import EditorContainer from '../../containers/IDE/EditorContainer'
 import ReplContainer from '../../containers/IDE/ReplContainer'
 
-const IDE: React.SFC<{}> = () => (
-  <div className="IDE">
-    <div className="row ide-content-parent">
-      <div className="editor-parent">
-        <EditorContainer />
-      </div>
-      <div className="repl-parent">
-        <ReplContainer />
+export interface IIDEProps {
+  editorWidth: number
+  handleEditorWidthChange: (widthChange: number) => void
+}
+
+class IDE extends React.Component<IIDEProps, {}> {
+  public render() {
+    return (
+      <div className="IDE">
+        <div className="row ide-content-parent">
+          <Resizable
+            className="editor-parent"
+            size={{ width: this.props.editorWidth, height: '100%' }}
+            // tslint:disable-next-line jsx-no-lambda
+            onResizeStop={(e, direction, ref, d) => {
+              this.props.handleEditorWidthChange(d.width)
+            }}
+            enable={{
+              top: false,
+              right: true,
+              bottom: false,
+              left: false,
+              topRight: false,
+              bottomRight: false,
+              bottomLeft: false,
+              topLeft: false
+            }}
+          >
+            <EditorContainer />
+          </Resizable>
+          <div className="repl-parent">
+            <ReplContainer />
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 export default IDE

src/components/Playground.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 
-import IDE from './IDE'
+import IDEContainer from '../containers/IDE'
 
 const Playground: React.SFC<{}> = () => {
   return (
     <div className="Playground">
-      <IDE />
+      <IDEContainer />
     </div>
   )
 }

src/components/__tests__/__snapshots__/Playground.tsx.snap

@@ -2,6 +2,6 @@
 
 exports[`Playground renders correctly 1`] = `
 "<div className=\\"Playground\\">
-  <IDE />
+  <Connect(IDE) />
 </div>"
 `;

src/containers/IDE/EditorContainer.ts

@@ -1,30 +1,27 @@
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import { evalEditor, updateEditorValue, updateEditorWidth } from '../../actions/playground'
+import { evalEditor, updateEditorValue } from '../../actions/playground'
 import Editor, { IEditorProps } from '../../components/IDE/Editor'
 import { IState } from '../../reducers/states'
 
-type StateProps = Pick<IEditorProps, 'editorValue'> & Pick<IEditorProps, 'editorWidth'>
+type StateProps = Pick<IEditorProps, 'editorValue'>
 type DispatchProps = Pick<IEditorProps, 'handleEditorValueChange'> &
-  Pick<IEditorProps, 'handleEditorWidthChange'> &
   Pick<IEditorProps, 'handleEvalEditor'>
 
 /** Provides the editorValue of the `IPlaygroundState` of the `IState` as a
  * `StateProps` to the Playground component
  */
 const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => {
   return {
-    editorValue: state.playground.editorValue,
-    editorWidth: state.playground.editorWidth
+    editorValue: state.playground.editorValue
   }
 }
 
 const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
       handleEditorValueChange: updateEditorValue,
-      handleEditorWidthChange: updateEditorWidth,
       handleEvalEditor: evalEditor
     },
     dispatch

src/containers/IDE/index.ts

@@ -0,0 +1,28 @@
+import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+
+import { updateEditorWidth } from '../../actions/playground'
+import IDE, { IIDEProps } from '../../components/IDE/'
+import { IState } from '../../reducers/states'
+
+type StateProps = Pick<IIDEProps, 'editorWidth'>
+type DispatchProps = Pick<IIDEProps, 'handleEditorWidthChange'>
+
+/** Provides the editorValue of the `IPlaygroundState` of the `IState` as a
+ * `StateProps` to the Playground component
+ */
+const mapStateToProps: MapStateToProps<StateProps, {}, IState> = state => {
+  return {
+    editorWidth: state.playground.editorWidth
+  }
+}
+
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) =>
+  bindActionCreators(
+    {
+      handleEditorWidthChange: updateEditorWidth
+    },
+    dispatch
+  )
+
+export default connect(mapStateToProps, mapDispatchToProps)(IDE)