Implemented new document creation

This commit is contained in:
Jori Lallo
2016-06-05 19:21:28 -07:00
parent 9c0700369d
commit 984140c3ca
7 changed files with 39 additions and 143 deletions

View File

@@ -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 } />

View File

@@ -20,9 +20,17 @@ const cx = classNames.bind(styles);
@observer
class DocumentEdit extends Component {
componentDidMount = () => {
store.documentId = this.props.params.id;
store.fetchDocument();
// 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,7 +42,11 @@ class DocumentEdit extends Component {
// alert("Please add a title before saving (hint: Write a markdown header)");
// return
// }
store.updateDocument();
if (store.newDocument) {
store.saveDocument();
} else {
store.updateDocument();
}
}
state = {

View File

@@ -16,8 +16,10 @@ const parseHeader = (text) => {
const documentEditStore = new class DocumentEditStore {
@observable documentId = null;
@observable title = 'title';
@observable text = 'default state';
@observable atlasId = null;
@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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

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