Saving and fetching of documents

src/scenes/Document/Document.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { fetchDocumentAsync } from 'actions/DocumentActions';
+
+import Layout from 'components/Layout';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+import CenteredContent from 'components/CenteredContent';
+
+import styles from './Document.scss';
+
+class Document extends React.Component {
+  componentDidMount = () => {
+    const documentId = this.props.routeParams.id;
+    this.props.fetchDocumentAsync(documentId);
+  }
+
+  render() {
+    const document = this.props.document;
+    let title;
+    if (document) {
+      title = `${document.atlas.name} - ${document.title}`;
+    }
+
+    return (
+      <Layout
+        title={ title }
+      >
+        <CenteredContent>
+          { this.props.isLoading || !document ? (
+            <AtlasPreviewLoading />
+          ) : (
+            <div dangerouslySetInnerHTML={{ __html: document.html }} />
+          ) }
+        </CenteredContent>
+      </Layout>
+    );
+  }
+};
+
+
+const mapStateToProps = (state) => {
+  return {
+    isLoading: state.document.isLoading,
+    document: state.document.data,
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    fetchDocumentAsync,
+  }, dispatch)
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Document);

src/scenes/Document/index.js

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

src/scenes/Editor/Editor.js

@@ -6,6 +6,9 @@ import {
   updateText,
   replaceText,
 } from 'actions/EditorActions';
+import {
+  saveDocumentAsync,
+} from 'actions/DocumentActions';
 
 import styles from './Editor.scss';
 import 'assets/styles/codemirror.css';
@@ -21,10 +24,30 @@ 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
@@ -39,7 +62,7 @@ class Editor extends Component {
       <Layout
         actions={(
           <Flex direction="row" align="center">
-            <SaveAction />
+            <SaveAction onClick={ this.onSave } />
             <MoreAction />
           </Flex>
         )}
@@ -60,6 +83,7 @@ const mapStateToProps = (state) => {
   return {
     text: state.editor.text,
     title: state.editor.title,
+    isSaving: state.document.isLoading,
   };
 };
 
@@ -67,6 +91,7 @@ const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({
     updateText,
     replaceText,
+    saveDocumentAsync,
   }, dispatch)
 };
 

src/scenes/Editor/components/SaveAction.js

@@ -1,12 +1,23 @@
 import React from 'react';
 import { Arrow } from 'rebass';
 
-const SaveAction = (props) => {
-  return (
-    <div>
-      Save
-    </div>
-  );
+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;