Implemented new document creation

src/index.js

@@ -42,6 +42,7 @@ render((
 
         <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
         <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
+        <Route path="/atlas/:id/new" component={ DocumentEdit } onEnter={ requireAuth } newDocument={ true } />
         <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
         <Route path="/documents/:id/edit" component={ DocumentEdit } onEnter={ requireAuth } />
 

src/scenes/DocumentEdit/DocumentEdit.js

@@ -20,9 +20,17 @@ const cx = classNames.bind(styles);
 @observer
 class DocumentEdit extends Component {
   componentDidMount = () => {
+    // This is a bit hacky, should find a better way
+    if (this.props.route.newDocument) {
+      store.atlasId = this.props.params.id;
+      store.newDocument = true;
+    } else {
       store.documentId = this.props.params.id;
+      store.newDocument = false;
       store.fetchDocument();
+    }
 
+    // Load editor async
     EditorLoader()
     .then(({ Editor }) => {
       this.setState({ Editor });
@@ -34,8 +42,12 @@ class DocumentEdit extends Component {
     //   alert("Please add a title before saving (hint: Write a markdown header)");
     //   return
     // }
+    if (store.newDocument) {
+      store.saveDocument();
+    } else {
       store.updateDocument();
     }
+  }
 
   state = {
     scrollTop: 0,

src/scenes/DocumentEdit/DocumentEditStore.js

@@ -16,8 +16,10 @@ const parseHeader = (text) => {
 
 const documentEditStore = new class DocumentEditStore {
     @observable documentId = null;
-    @observable title = 'title';
+    @observable atlasId = null;
-    @observable text = 'default state';
+    @observable title = 'Lets start with a title';
+    @observable text = '# Lets start with a title\n\nAnd continue from there...';
+    @observable newDocument;
 
     @observable preview;
     @observable isFetching;
@@ -41,6 +43,25 @@ const documentEditStore = new class DocumentEditStore {
       this.isFetching = false;
     }
 
+    @action saveDocument = async (nextPath) => {
+      if (this.isSaving) return;
+
+      this.isSaving = true;
+
+      try {
+        const data = await client.post('/documents.create', {
+          atlas: this.atlasId,
+          title: this.title,
+          text: this.text,
+        })
+        const { id } = data.data;
+        browserHistory.push(`/documents/${id}`);
+      } catch (e) {
+        console.error("Something went wrong");
+      }
+      this.isSaving = false;
+    }
+
     @action updateDocument = async (nextPath) => {
       if (this.isSaving) return;
 

src/scenes/Editor/Editor.js

@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
-// import {
-//   resetEditor,
-//   updateText,
-//   replaceText,
-// } from 'actions/EditorActions';
-// import {
-//   saveDocumentAsync,
-// } from 'actions/DocumentActions';
-
-import Layout, { Title, HeaderAction } from 'components/Layout';
-import Flex from 'components/Flex';
-import MarkdownEditor from 'components/MarkdownEditor';
-import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
-import CenteredContent from 'components/CenteredContent';
-
-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,
-    saveDocumentAsync: React.PropTypes.func.isRequired,
-    text: React.PropTypes.string,
-    title: React.PropTypes.string,
-  }
-
-  componentDidMount = () => {
-    const atlasId = this.props.routeParams.id;
-    this.setState({
-      atlasId: atlasId,
-    });
-  }
-
-  onSave = () => {
-    if (this.props.title.length === 0) {
-      alert("Please add a title before saving (hint: Write a markdown header)");
-      return
-    }
-
-    this.props.saveDocumentAsync(
-      this.state.atlasId,
-      null,
-      this.props.title,
-      this.props.text,
-    )
-  }
-
-  render() {
-    let title = (
-      <Title
-        truncate={ 60 }
-        placeholder={ "Untitle document" }
-      >
-        { this.props.title }
-      </Title>
-    );
-
-    return (
-      <Layout
-        actions={(
-          <HeaderAction>
-            <SaveAction onClick={ this.onSave } />
-          </HeaderAction>
-        )}
-        title={ title }
-        fixed={ true }
-        loading={ this.props.isSaving }
-      >
-        <MarkdownEditor
-          onChange={ this.props.updateText }
-          text={ this.props.text }
-          replaceText={this.props.replaceText}
-        />
-      </Layout>
-    );
-  }
-}
-
-// const mapStateToProps = (state) => {
-//   return {
-//     text: state.editor.text,
-//     title: state.editor.title,
-//     isSaving: state.document.isSaving,
-//   };
-// };
-
-// const mapDispatchToProps = (dispatch) => {
-//   return bindActionCreators({
-//     resetEditor,
-//     updateText,
-//     replaceText,
-//     saveDocumentAsync,
-//   }, dispatch)
-// };
-
-export default Editor;

src/scenes/Editor/components/MoreAction.js

@@ -1,12 +0,0 @@
-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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Arrow } from 'rebass';
-
-class SaveAction extends React.Component {
-  propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  onClick = (event) => {
-    event.preventDefault();
-    this.props.onClick();
-  }
-
-  render() {
-    return (
-      <div>
-        <a href onClick={ this.onClick }>Save</a>
-      </div>
-    );
-  }
-};
-
-export default SaveAction;

src/scenes/Editor/index.js

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