Scaffold playground page (#8)

* Add button for playground at Navbar

No functionality.

* Make first NavbarGroup's align left explicit

* Change playground icon

* Add routes to Playground

* Update test snapshots

* Fix bad test for Playground component

Oops

* Add react-ace for IDE

* Try passing props into playground

* Load a preset "Hello World" onto the ace editor.

Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground

* Remove unused onChange()

* Add stored state for playground editor text

Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)

* Change initialValue prop to editorValue

* Made playground actions a separate file

* Modify actions and dispatch call

* Change redux import statement

* Add IPlaygroundState to IState in index reducer

* Add playground reducer

* Remove playgroundCode from IApplicationState

* Fix type errors

Made a compromise by including an IPlaygroundState as part of IApplicationProps

* Re-disable console.logs (tslint)

* Fix missing imports for react-ace mode, theme

* Add playground CSS

* Add JSDoc style comments for playground

* Fix some tests

* Fix semantics of mapStateToProps for ApplicationContainer

* Do trivial formatting

* Make 16/05 code review changes

Changes not made:
- Change of `Playground` component to an `SFC`

* Fix test snapshot (name of onChange for ReactAce)

Due to 7ac707c.

* Revert Playground as SFC, make Editor container

* Make Playground stateless

This is done by abstracting out the ace editor into its own component
, `Editor`, and its own container to handle redux calls,
`EditorContainer`.

* Add test and fix export type

Export of `Editor` changed to a default export, like the other
components. A test has been added for the `Editor` component. Snapshot
changes pending.

* Fix test snapshots

Author: ning-y

package.json

@@ -28,6 +28,7 @@
     "@blueprintjs/core": "^2.1.1",
     "normalize.css": "^8.0.0",
     "react": "^16.3.1",
+    "react-ace": "^6.1.1",
     "react-dom": "^16.3.1",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",

src/actions/index.ts

@@ -0,0 +1,26 @@
+import { Action, ActionCreator } from 'redux'
+
+/**
+ * The `type` attribute for an `Action` which updates the `IPlaygroundState`
+ * `editorValue`
+ */
+export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE'
+
+/**
+ * Represents an `Action` which updates the `editorValue` of a
+ * `IPlaygroundState`
+ * @property type           - Unique string identifier for this `Action`
+ * @property newEditorValue - The new string value for `editorValue`
+ */
+export interface IUpdateEditorValue extends Action {
+  payload: string
+}
+
+/**
+ * An `ActionCreator` returning an `IUpdateEditorValue` `Action`
+ * @param newEditorValue - The new string value for `editorValue`
+ */
+export const updateEditorValue: ActionCreator<IUpdateEditorValue> = (newEditorValue: string) => ({
+  type: UPDATE_EDITOR_VALUE,
+  payload: newEditorValue
+})

src/actions/playground.ts

@@ -3,23 +3,25 @@ import * as React from 'react'
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router'
 
 import DashboardContainer from '../containers/DashboardContainer'
-import { IApplicationState } from '../reducers/application'
+
 import NavigationBar from './NavigationBar'
 import NotFound from './NotFound'
+import Playground from './Playground'
 
 export interface IApplicationProps extends RouteComponentProps<{}> {
-  application: IApplicationState
+  title: string
 }
 
-const Application: React.SFC<IApplicationProps> = ({ application }) => {
+const Application: React.SFC<IApplicationProps> = props => {
   const redirectToDashboard = () => <Redirect to="/dashboard" />
 
   return (
     <div className="Application">
-      <NavigationBar title={application.title} />
+      <NavigationBar title={props.title} />
       <div className="Application__main">
         <Switch>
           <Route path="/dashboard" component={DashboardContainer} />
+          <Route path="/playground" component={Playground} />
           <Route exact={true} path="/" component={redirectToDashboard} />
           <Route component={NotFound} />
         </Switch>

src/components/Application.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import AceEditor from 'react-ace'
+
+import 'brace/mode/javascript'
+import 'brace/theme/github'
+
+/**
+ * @property editorValue - The string content of the react-ace editor
+ * @property updateCode  - A callback function for the react-ace editor's `onChange`
+ */
+export interface IEditorProps {
+  editorValue: string
+  handleEditorChange: (newCode: string) => void
+}
+
+class Editor extends React.Component<IEditorProps, {}> {
+  public render() {
+    return (
+      <AceEditor
+        height="90%"
+        width="90%"
+        mode="javascript"
+        theme="github"
+        value={this.props.editorValue}
+        onChange={this.props.handleEditorChange}
+      />
+    )
+  }
+}
+
+export default Editor

src/components/Editor.tsx

@@ -9,7 +9,7 @@ export interface INavigationBarProps {
 
 const NavigationBar: React.SFC<INavigationBarProps> = ({ title }) => (
   <Navbar className="NavigationBar pt-dark">
-    <NavbarGroup>
+    <NavbarGroup className="pt-align-left">
       <NavbarHeading>{title}</NavbarHeading>
       <NavbarDivider />
       <NavLink
@@ -21,6 +21,17 @@ const NavigationBar: React.SFC<INavigationBarProps> = ({ title }) => (
         Dashboard
       </NavLink>
     </NavbarGroup>
+
+    <NavbarGroup className="pt-align-right">
+      <NavLink
+        to="/playground"
+        activeClassName="pt-active"
+        className="NavigationBar__link pt-button pt-minimal"
+      >
+        <Icon icon="code" />
+        Playground
+      </NavLink>
+    </NavbarGroup>
   </Navbar>
 )
 

src/components/NavigationBar.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import EditorContainer from '../containers/EditorContainer'
+
+const Playground: React.SFC<{}> = ()=> {
+  return (
+    <div className="Playground">
+      <h2>Playground</h2>
+      <EditorContainer />
+    </div>
+  )
+}
+
+export default Playground

src/components/Playground.tsx

@@ -3,16 +3,12 @@ import * as React from 'react'
 import { shallow } from 'enzyme'
 
 import { mockRouterProps } from '../../mocks/components'
-import { ApplicationEnvironment } from '../../reducers/application'
 import Application, { IApplicationProps } from '../Application'
 
 test('Application renders correctly', () => {
   const props: IApplicationProps = {
     ...mockRouterProps('/dashboard', {}),
-    application: {
-      title: 'Cadet',
-      environment: ApplicationEnvironment.Development
-    }
+    title: 'Cadet'
   }
   const app = <Application {...props} />
   const tree = shallow(app)

src/components/__tests__/Application.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import { shallow } from 'enzyme'
+
+import Editor, { IEditorProps } from '../Editor'
+
+test('Editor renders correctly', () => {
+  const props: IEditorProps = {
+    editorValue: ''
+    handleEditorChange: (newCode) => 
+  }
+  const app = <Editor { props }/>
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})

src/components/__tests__/Editor.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { shallow } from 'enzyme'
+
+import Playground from '../Playground'
+
+test('Playground renders correctly', () => {
+  const app = <Playground />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})