static-cms/src/containers/EntryPage.js

198 lines
5.7 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import history from '../routing/history';
import {
loadEntry,
2016-07-19 17:11:22 -03:00
createDraftFromEntry,
2016-08-24 21:36:44 -03:00
createEmptyDraft,
discardDraft,
changeDraftField,
changeDraftFieldValidation,
persistEntry,
deleteEntry,
} from '../actions/entries';
import { closeEntry } from '../actions/editor';
import { deserializeValues } from '../lib/serializeEntryValues';
2017-01-10 22:23:22 -02:00
import { addAsset, removeAsset } from '../actions/media';
import { openSidebar } from '../actions/globalUI';
2017-01-10 22:23:22 -02:00
import { selectEntry, getAsset } from '../reducers';
import { selectFields } from '../reducers/collections';
import EntryEditor from '../components/EntryEditor/EntryEditor';
import entryPageHOC from './editorialWorkflow/EntryPageHOC';
import { Loader } from '../components/UI';
2016-05-30 17:08:30 -07:00
class EntryPage extends React.Component {
2016-10-03 14:33:48 +02:00
static propTypes = {
2017-01-10 22:23:22 -02:00
addAsset: PropTypes.func.isRequired,
boundGetAsset: PropTypes.func.isRequired,
changeDraftField: PropTypes.func.isRequired,
changeDraftFieldValidation: PropTypes.func.isRequired,
2016-10-03 14:33:48 +02:00
collection: ImmutablePropTypes.map.isRequired,
createDraftFromEntry: PropTypes.func.isRequired,
createEmptyDraft: PropTypes.func.isRequired,
discardDraft: PropTypes.func.isRequired,
entry: ImmutablePropTypes.map,
entryDraft: ImmutablePropTypes.map.isRequired,
loadEntry: PropTypes.func.isRequired,
persistEntry: PropTypes.func.isRequired,
deleteEntry: PropTypes.func.isRequired,
showDelete: PropTypes.bool.isRequired,
2017-01-10 22:23:22 -02:00
removeAsset: PropTypes.func.isRequired,
closeEntry: PropTypes.func.isRequired,
openSidebar: PropTypes.func.isRequired,
fields: ImmutablePropTypes.list.isRequired,
2016-10-03 14:33:48 +02:00
slug: PropTypes.string,
newEntry: PropTypes.bool.isRequired,
};
componentDidMount() {
const { entry, newEntry, collection, slug, loadEntry, createEmptyDraft } = this.props;
this.props.openSidebar();
if (newEntry) {
createEmptyDraft(collection);
} else {
loadEntry(collection, slug);
}
this.unlisten = history.listenBefore((location) => {
if (this.props.entryDraft.get('hasChanged')) {
return "Are you sure you want to leave this page?";
}
return true;
});
}
componentWillReceiveProps(nextProps) {
2016-08-24 21:36:44 -03:00
if (this.props.entry === nextProps.entry) return;
const { entry, newEntry, fields, collection } = nextProps;
2016-11-01 14:31:04 -02:00
if (entry && !entry.get('isFetching') && !entry.get('error')) {
/**
* Deserialize entry values for widgets with registered serializers before
* creating the entry draft.
*/
const values = deserializeValues(entry.get('data'), fields);
const deserializedEntry = entry.set('data', values);
this.createDraft(deserializedEntry);
} else if (newEntry) {
this.props.createEmptyDraft(collection);
}
}
componentWillUnmount() {
this.props.discardDraft();
this.unlisten();
}
createDraft = (entry) => {
2016-08-24 21:36:44 -03:00
if (entry) this.props.createDraftFromEntry(entry);
2016-10-03 14:25:27 +02:00
};
2016-08-24 21:36:44 -03:00
handleCloseEntry = () => {
return this.props.closeEntry();
};
2016-10-03 14:25:27 +02:00
handlePersistEntry = () => {
const { persistEntry, collection } = this.props;
setTimeout(() => {
persistEntry(collection).then(() => this.handleCloseEntry());
}, 0);
2016-10-03 14:25:27 +02:00
};
handleDeleteEntry = () => {
if (!window.confirm('Are you sure you want to delete this entry?')) { return; }
if (this.props.newEntry) {
return this.handleCloseEntry();
}
const { deleteEntry, entry, collection } = this.props;
const slug = entry.get('slug');
setTimeout(() => {
deleteEntry(collection, slug).then(() => this.handleCloseEntry());
}, 0);
}
render() {
2016-06-10 00:16:01 -03:00
const {
entry,
entryDraft,
fields,
2017-01-10 22:23:22 -02:00
boundGetAsset,
collection,
changeDraftField,
changeDraftFieldValidation,
2017-01-10 22:23:22 -02:00
addAsset,
removeAsset,
closeEntry,
2016-06-10 00:16:01 -03:00
} = this.props;
2017-01-10 22:23:22 -02:00
if (entry && entry.get('error')) {
return <div><h3>{ entry.get('error') }</h3></div>;
} else if (entryDraft == null
|| entryDraft.get('entry') === undefined
|| (entry && entry.get('isFetching'))) {
return <Loader active>Loading entry...</Loader>;
}
2017-01-10 22:23:22 -02:00
return (
<EntryEditor
entry={entryDraft.get('entry')}
2017-01-10 22:23:22 -02:00
getAsset={boundGetAsset}
collection={collection}
fields={fields}
fieldsMetaData={entryDraft.get('fieldsMetaData')}
fieldsErrors={entryDraft.get('fieldsErrors')}
onChange={changeDraftField}
onValidate={changeDraftFieldValidation}
2017-01-10 22:23:22 -02:00
onAddAsset={addAsset}
onRemoveAsset={removeAsset}
onPersist={this.handlePersistEntry}
onDelete={this.handleDeleteEntry}
showDelete={this.props.showDelete}
hasChanged={entryDraft.get('hasChanged')}
onCancelEdit={this.handleCloseEntry}
/>
);
}
}
function mapStateToProps(state, ownProps) {
const { collections, entryDraft } = state;
const slug = ownProps.params.slug;
2016-05-30 16:55:32 -07:00
const collection = collections.get(ownProps.params.name);
2016-08-24 21:36:44 -03:00
const newEntry = ownProps.route && ownProps.route.newRecord === true;
const fields = selectFields(collection, slug);
2016-08-24 21:36:44 -03:00
const entry = newEntry ? null : selectEntry(state, collection.get('name'), slug);
2017-01-10 22:23:22 -02:00
const boundGetAsset = getAsset.bind(null, state);
return {
collection,
collections,
newEntry,
entryDraft,
2017-01-10 22:23:22 -02:00
boundGetAsset,
fields,
slug,
entry,
};
}
export default connect(
mapStateToProps,
{
changeDraftField,
changeDraftFieldValidation,
2017-01-10 22:23:22 -02:00
addAsset,
removeAsset,
loadEntry,
2016-07-19 17:11:22 -03:00
createDraftFromEntry,
2016-08-24 21:36:44 -03:00
createEmptyDraft,
discardDraft,
persistEntry,
deleteEntry,
closeEntry,
openSidebar,
}
)(entryPageHOC(EntryPage));