Abstract controlButton into components/commons

Also fixed typescript type errors on yarn start.

Author: ning-y

src/components/commons/controlButton.tsx

@@ -0,0 +1,19 @@
+import { Button, IconName, Intent } from '@blueprintjs/core'
+import * as React from 'react'
+
+export const controlButton = (
+  label: string,
+  icon: IconName,
+  handleClick = () => {},
+  intent = Intent.NONE,
+  minimal = true
+) => (
+  <Button
+    onClick={handleClick}
+    className={(minimal ? 'pt-minimal' : '') + ' col-xs-12'}
+    intent={intent}
+    icon={icon}
+  >
+    {label}
+  </Button>
+)

src/components/commons/index.tsx

@@ -0,0 +1 @@
+export * from './controlButton'

src/components/workspace/Editor.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-
 import AceEditor from 'react-ace'
 
-import { Button, IconName, Intent } from '@blueprintjs/core'
+import { controlButton } from '../commons'
 
 import 'brace/mode/javascript'
 import 'brace/theme/cobalt'
@@ -24,27 +23,11 @@ export interface IEditorProps {
 
 class Editor extends React.Component<IEditorProps, {}> {
   public render() {
-    const genericButton = (
-      label: string,
-      icon: IconName,
-      handleClick = () => {},
-      intent = Intent.NONE,
-      notMinimal = false
-    ) => (
-      <Button
-        onClick={handleClick}
-        className={(notMinimal ? '' : 'pt-minimal') + ' col-xs-12'}
-        intent={intent}
-        icon={icon}
-      >
-        {label}
-      </Button>
-    )
     const runButton = this.props.isRunning
       ? null
-      : genericButton('', 'play', this.props.handleEditorEval)
+      : controlButton('', 'play', this.props.handleEditorEval)
     const stopButton = this.props.isRunning
-      ? genericButton('', 'stop', this.props.handleInterruptEval)
+      ? controlButton('', 'stop', this.props.handleInterruptEval)
       : null
     return (
       <div className="Editor">

src/components/workspace/ReplControl.tsx

@@ -1,7 +1,7 @@
-import { Button, IconName, Intent } from '@blueprintjs/core'
 import * as React from 'react'
 
 import { sourceChapters } from '../../reducers/states'
+import { controlButton } from '../commons'
 
 /**
  * @property handleEvalEditor  - A callback function for evaluation
@@ -27,23 +27,6 @@ class ReplControl extends React.Component<IReplControlProps, {}> {
   }
 }
 
-const controlButton = (
-  label: string,
-  icon: IconName,
-  handleClick = () => {},
-  intent = Intent.NONE,
-  minimal = true
-) => (
-  <Button
-    onClick={handleClick}
-    className={(minimal ? 'pt-minimal' : '') + ' col-xs-12'}
-    intent={intent}
-    icon={icon}
-  >
-    {label}
-  </Button>
-)
-
 const chapterSelect = (handleSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {}) => (
   <div className="pt-select pt-select">
     <select defaultValue={sourceChapters.slice(-1)[0].toString()} onChange={handleSelect}>

src/components/workspace/__tests__/Repl.tsx

@@ -2,25 +2,32 @@ import { shallow } from 'enzyme'
 import * as React from 'react'
 
 import { mockTypeError } from '../../../mocks/context'
+import {
+  CodeOutput,
+  ErrorOutput,
+  InterpreterOutput,
+  ResultOutput,
+  RunningOutput
+} from '../../../reducers/states'
 import Repl, { Output } from '../Repl'
 
-const mockRunningOutput = {
+const mockRunningOutput: RunningOutput = {
   type: 'running',
   consoleLogs: ['a', 'bb', 'cccccccccccccccccccccccccccccccc', 'd']
 }
 
-const mockCodeOutput = {
+const mockCodeOutput: CodeOutput = {
   type: 'code',
   value: "display('');"
 }
 
-const mockResultOutput = {
+const mockResultOutput: ResultOutput = {
   type: 'result',
   value: 42,
   consoleLogs: []
 }
 
-const mockErrorOutput = {
+const mockErrorOutput: ErrorOutput = {
   type: 'errors',
   errors: [mockTypeError()],
   consoleLogs: []
@@ -85,7 +92,7 @@ test('Error output (with consoleLogs) renders correctly', () => {
 })
 
 test('Empty output renders an empty card', () => {
-  const app = <Output {...{ output: {} }} />
+  const app = <Output {...{ output: {} as InterpreterOutput }} />
   const tree = shallow(app)
   expect(tree.debug()).toMatchSnapshot()
 })

src/mocks/context.ts

@@ -1,3 +1,4 @@
+import { parse } from 'acorn'
 import * as es from 'estree'
 
 import { createContext } from '../slang'
@@ -34,5 +35,5 @@ export function mockClosure(): Closure {
 }
 
 export function mockTypeError(): TypeError {
-  return new TypeError({ loc: 0 } as es.Node, '', '', '')
+  return new TypeError(parse(''), '', '', '')
 }