Scaffold playground page

package.json

@@ -21,6 +21,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/playground.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/components/Application.tsx

@@ -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/Editor.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/NavigationBar.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/Playground.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/__tests__/Application.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__/Editor.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__/Playground.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()
+})

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

@@ -6,6 +6,7 @@ exports[`Application renders correctly 1`] = `
   <div className=\\"Application__main\\">
     <Switch>
       <Route path=\\"/dashboard\\" component={[Function: Connect]} />
+      <Route path=\\"/playground\\" component={[Function: Playground]} />
       <Route exact={true} path=\\"/\\" component={[Function: redirectToDashboard]} />
       <Route component={[Function: NotFound]} />
     </Switch>

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor renders correctly 1`] = `"<ReactAce height=\\"90%\\" width=\\"90%\\" mode=\\"javascript\\" theme=\\"github\\" value=\\"\\" onChange={[Function: handleEditorChange]} name=\\"brace-editor\\" focus={false} fontSize={12} showGutter={true} onPaste={{...}} onLoad={{...}} onScroll={{...}} minLines={{...}} maxLines={{...}} readOnly={false} highlightActiveLine={true} showPrintMargin={true} tabSize={4} cursorStart={1} editorProps={{...}} style={{...}} scrollMargin={{...}} setOptions={{...}} wrapEnabled={false} enableBasicAutocompletion={false} enableLiveAutocompletion={false} />"`;

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

@@ -2,7 +2,7 @@
 
 exports[`NavigationBar renders correctly 1`] = `
 "<Blueprint2.Navbar className=\\"NavigationBar pt-dark\\">
-  <Blueprint2.NavbarGroup align=\\"left\\">
+  <Blueprint2.NavbarGroup className=\\"pt-align-left\\" align=\\"left\\">
     <Blueprint2.NavbarHeading>
       Cadet
     </Blueprint2.NavbarHeading>
@@ -12,5 +12,11 @@ exports[`NavigationBar renders correctly 1`] = `
       Dashboard
     </NavLink>
   </Blueprint2.NavbarGroup>
+  <Blueprint2.NavbarGroup className=\\"pt-align-right\\" align=\\"left\\">
+    <NavLink to=\\"/playground\\" activeClassName=\\"pt-active\\" className=\\"NavigationBar__link pt-button pt-minimal\\" ariaCurrent=\\"true\\">
+      <Blueprint2.Icon icon=\\"code\\" />
+      Playground
+    </NavLink>
+  </Blueprint2.NavbarGroup>
 </Blueprint2.Navbar>"
 `;

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Playground renders correctly 1`] = `
+"<div className=\\"Playground\\">
+  <h2>
+    Playground
+  </h2>
+  <Connect(Editor) />
+</div>"
+`;

src/containers/ApplicationContainer.ts

@@ -1,11 +1,17 @@
 import { connect, MapStateToProps } from 'react-redux'
 import { withRouter } from 'react-router'
-
-import Application, { IApplicationProps } from '../components/Application'
+import Application from '../components/Application'
 import { IState } from '../reducers'
 
-const mapStateToProps: MapStateToProps<IState, {}, IApplicationProps> = state => ({
-  application: state.application
+/**
+ * Provides the title of the application for display.
+ * An object with the relevant properties must be
+ * returned instead of an object of type @type {IApplicationProps},
+ * as the routing properties of @type {RouteComponentProps} are
+ * provided using the withRouter() method below.
+ */
+const mapStateToProps: MapStateToProps<{ title: string }, {}, IState> = state => ({
+  title: state.application.title
 })
 
 export default withRouter(connect(mapStateToProps)(Application))

src/containers/EditorContainer.ts

@@ -0,0 +1,32 @@
+import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'
+import { Dispatch } from 'redux'
+
+import { updateEditorValue } from '../actions/playground'
+import Editor, { IEditorProps } from '../components/Editor'
+import { IState } from '../reducers'
+
+type StateProps = Pick<IEditorProps, 'editorValue'>
+type DispatchProps = Pick<IEditorProps, 'handleEditorChange'>
+
+/** 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
+  }
+}
+
+/** Provides a callback function `updateCode` which supplies the `Action`
+ * `updateEditorValue` with `newCode`, the updated contents of the react-ace
+ * editor.
+ */
+const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dispatch<any>) => {
+  return {
+    handleEditorChange: (newCode: string) => {
+      dispatch(updateEditorValue(newCode))
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Editor)

src/mocks/store.ts

@@ -10,6 +10,9 @@ export function mockInitialStore<P>(): Store<IState> {
     application: {
       title: 'Cadet',
       environment: ApplicationEnvironment.Development
+    },
+    playground: {
+      editorValue: ''
     }
   }
   return createStore(state)

src/reducers/__tests__/__snapshots__/application.ts.snap

@@ -3,6 +3,6 @@
 exports[`initial state should match a snapshot 1`] = `
 Object {
   "environment": "test",
-  "title": "Conveyor",
+  "title": "Cadet",
 }
 `;

src/reducers/index.ts

@@ -1,9 +1,12 @@
 import { IApplicationState, reducer as application } from './application'
+import { IPlaygroundState, reducer as playground } from './playground'
 
 export interface IState {
   readonly application: IApplicationState
+  readonly playground: IPlaygroundState
 }
 
 export default {
-  application
+  application,
+  playground
 }

src/reducers/playground.ts

@@ -0,0 +1,30 @@
+import { Action, Reducer } from 'redux'
+import { IUpdateEditorValue, UPDATE_EDITOR_VALUE } from '../actions/playground'
+
+export interface IPlaygroundState {
+  editorValue: string
+}
+
+/**
+ * The default (initial) state of the `IPlaygroundState`
+ */
+const defaultState: IPlaygroundState = {
+  editorValue: ''
+}
+
+/**
+ * The reducer for `IPlaygroundState`
+ *
+ * UPDATE_EDITOR_VALUE: Update the `editorValue` property
+ */
+export const reducer: Reducer<IPlaygroundState> = (state = defaultState, action: Action) => {
+  switch (action.type) {
+    case UPDATE_EDITOR_VALUE:
+      return {
+        ...state,
+        editorValue: (action as IUpdateEditorValue).payload
+      }
+    default:
+      return state
+  }
+}

src/styles/index.css

@@ -2,4 +2,5 @@
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "./blueprint.css";
 @import "./application.css";
+@import "./playground.css";
 @import "./navigationBar.css";

src/styles/playground.css

@@ -0,0 +1,11 @@
+.Playground {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vh;
+}
+
+.Playground__main {
+    margin-top: 1rem;
+    margin-left: 1rem;
+}