Migrating editor into cleaner code

src/scenes/App/App.js

@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
-import styles from './App.scss';
-
-import {
-  toggleEditors,
-  addRevision,
- } from '../../actions';
-
-import Header from '../../components/Header';
-import Editor from '../../components/Editor';
-
-class App extends Component {
-  static propTypes = {
-    children: React.PropTypes.element,
-    addRevision: React.PropTypes.func.isRequired,
-    unsavedChanges: React.PropTypes.bool.isRequired,
-  }
-
-  render() {
-    return (
-      <div className={ styles.container }>
-        <Header
-          activeEditors={this.props.activeEditors}
-          addRevision={this.props.addRevision}
-          unsavedChanges={this.props.unsavedChanges}
-        />
-        <div className={ styles.content }>
-          <Editor />
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    activeEditors: state.activeEditors,
-    unsavedChanges: state.text.unsavedChanges,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    addRevision: () => {
-      dispatch(addRevision());
-    },
-  };
-};
-
-App = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(App);
-
-export default App;

src/scenes/App/index.js

@@ -1,2 +0,0 @@
-import App from './App';
-export default App;

src/scenes/Atlas/Atlas.js

@@ -47,7 +47,7 @@ class Atlas extends React.Component {
     return (
       <Layout
         actions={(
-          <Link to="/new-document">New document</Link>
+          <Link to={ `/atlas/${data.id}/new` }>New document</Link>
         )}
         title={ data.name }
       >

src/scenes/Editor/Editor.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import {
+  updateText,
+  replaceText,
+} from 'actions/EditorActions';
+
+import styles from './Editor.scss';
+import 'assets/styles/codemirror.css';
+
+import Layout from 'components/Layout';
+import Flex from 'components/Flex';
+import MarkdownEditor from 'components/MarkdownEditor';
+
+import SaveAction from './components/SaveAction';
+import MoreAction from './components/MoreAction';
+
+class Editor extends Component {
+  static propTypes = {
+    updateText: React.PropTypes.func.isRequired,
+    replaceText: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string,
+    title: React.PropTypes.string,
+  }
+
+  render() {
+    return (
+      <Layout
+        actions={(
+          <Flex direction="row" align="center">
+            <SaveAction />
+            <MoreAction />
+          </Flex>
+        )}
+        title={ this.props.title }
+      >
+        <Flex flex={ true } align="center">
+          <MarkdownEditor
+            onChange={ this.props.updateText }
+            text={ this.props.text }
+            replaceText={this.props.replaceText}
+          />
+        </Flex>
+      </Layout>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    text: state.editor.text,
+    title: state.editor.title,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    updateText,
+    replaceText,
+  }, dispatch)
+};
+
+Editor = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Editor);
+
+export default Editor;

src/scenes/Editor/components/MoreAction.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Arrow } from 'rebass';
+
+const MoreAction = (props) => {
+  return (
+    <div>
+      <button>More <Arrow /></button>
+    </div>
+  );
+};
+
+export default MoreAction;

src/scenes/Editor/components/SaveAction.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Arrow } from 'rebass';
+
+const SaveAction = (props) => {
+  return (
+    <div>
+      Save
+    </div>
+  );
+};
+
+export default SaveAction;

src/scenes/Editor/index.js

@@ -0,0 +1,2 @@
+import Editor from './Editor';
+export default Editor;