static-cms/src/containers/CollectionPage.js

67 lines
2.0 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { loadEntries } from '../actions/entries';
2016-06-10 00:16:01 -03:00
import { selectEntries } from '../reducers';
2016-09-05 17:24:24 -03:00
import { Loader } from '../components/UI';
import EntryListing from '../components/EntryListing';
import styles from './CollectionPage.css';
import CollectionPageHOC from './editorialWorkflow/CollectionPageHOC';
class DashboardPage extends React.Component {
2016-10-03 14:33:48 +02:00
static propTypes = {
collection: ImmutablePropTypes.map.isRequired,
collections: ImmutablePropTypes.orderedMap.isRequired,
dispatch: PropTypes.func.isRequired,
entries: ImmutablePropTypes.list,
};
componentDidMount() {
const { collection, dispatch } = this.props;
if (collection) {
dispatch(loadEntries(collection));
}
}
componentWillReceiveProps(nextProps) {
const { collection, dispatch } = this.props;
if (nextProps.collection !== collection) {
dispatch(loadEntries(nextProps.collection));
}
}
render() {
const { collections, collection, entries } = this.props;
if (collections == null) {
return <h1>No collections defined in your config.yml</h1>;
}
return <div className={styles.root}>
2016-09-05 17:24:24 -03:00
{entries ?
<EntryListing collection={collection} entries={entries}/>
:
<Loader active>{['Loading Entries', 'Caching Entries', 'This might take several minutes']}</Loader>
}
</div>;
}
}
2016-09-08 16:18:38 -03:00
/*
* Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff,
* We delegate it to a Higher Order Component
*/
DashboardPage = CollectionPageHOC(DashboardPage);
2016-09-08 16:18:38 -03:00
function mapStateToProps(state, ownProps) {
const { collections } = state;
const { name, slug } = ownProps.params;
2016-05-30 17:13:40 -07:00
const collection = name ? collections.get(name) : collections.first();
const entries = selectEntries(state, collection.get('name'));
return { slug, collection, collections, entries };
}
export default connect(mapStateToProps)(DashboardPage);