Implemented new document creation
This commit is contained in:
@@ -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 } />
|
||||
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -1,2 +0,0 @@
|
||||
import Editor from './Editor';
|
||||
export default Editor;
|
||||
Reference in New Issue
Block a user