diff --git a/src/components/UnpublishedListing.js b/src/components/UnpublishedListing.js index acee5b3d..baa297d1 100644 --- a/src/components/UnpublishedListing.js +++ b/src/components/UnpublishedListing.js @@ -108,7 +108,7 @@ class UnpublishedListing extends React.Component { const columns = this.renderColumns(this.props.entries); return (
-

Editorial Workflow

+
Editorial Workflow
{columns}
diff --git a/src/containers/CollectionPage.js b/src/containers/CollectionPage.js index 7f5d196e..4074e18d 100644 --- a/src/containers/CollectionPage.js +++ b/src/containers/CollectionPage.js @@ -5,10 +5,9 @@ import { loadEntries } from '../actions/entries'; import { selectEntries } from '../reducers'; import { Loader } from '../components/UI'; import EntryListing from '../components/EntryListing'; -import styles from './CollectionPage.css'; -import CollectionPageHOC from './editorialWorkflow/CollectionPageHOC'; +import styles from './breakpoints.css'; -class DashboardPage extends React.Component { +class CollectionPage extends React.Component { static propTypes = { collection: ImmutablePropTypes.map.isRequired, @@ -59,12 +58,6 @@ class DashboardPage extends React.Component { } } -/* - * 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); // eslint-disable-line - function mapStateToProps(state, ownProps) { const { collections } = state; @@ -77,4 +70,4 @@ function mapStateToProps(state, ownProps) { return { slug, collection, collections, page, entries }; } -export default connect(mapStateToProps)(DashboardPage); +export default connect(mapStateToProps)(CollectionPage); diff --git a/src/containers/DashboardPage.js b/src/containers/DashboardPage.js new file mode 100644 index 00000000..26b72c96 --- /dev/null +++ b/src/containers/DashboardPage.js @@ -0,0 +1,13 @@ +import React from 'react'; +import UnpublishedEntriesPanel from './editorialWorkflow/UnpublishedEntriesPanel'; +import styles from './breakpoints.css'; + + +export default function DashboardPage() { + return ( +
+

Dashboard

+ +
+ ); +} diff --git a/src/containers/SearchPage.js b/src/containers/SearchPage.js index 7d503991..05fb769c 100644 --- a/src/containers/SearchPage.js +++ b/src/containers/SearchPage.js @@ -5,7 +5,7 @@ import { selectSearchedEntries } from '../reducers'; import { searchEntries } from '../actions/entries'; import { Loader } from '../components/UI'; import EntryListing from '../components/EntryListing'; -import styles from './CollectionPage.css'; +import styles from './breakpoints.css'; class SearchPage extends React.Component { @@ -13,7 +13,7 @@ class SearchPage extends React.Component { isFetching: PropTypes.bool, searchEntries: PropTypes.func.isRequired, searchTerm: PropTypes.string.isRequired, - entries: ImmutablePropTypes.list + entries: ImmutablePropTypes.list, }; componentDidMount() { @@ -34,15 +34,15 @@ class SearchPage extends React.Component { render() { const { collections, searchTerm, entries, isFetching, page } = this.props; - return
+ return (
{(isFetching === true || !entries) ? {['Loading Entries', 'Caching Entries', 'This might take several minutes']} : - - Results for “{searchTerm}” - + + Results for “ {searchTerm}” + } -
; +
); } } diff --git a/src/containers/CollectionPage.css b/src/containers/breakpoints.css similarity index 99% rename from src/containers/CollectionPage.css rename to src/containers/breakpoints.css index b326573b..7f6ae188 100644 --- a/src/containers/CollectionPage.css +++ b/src/containers/breakpoints.css @@ -4,36 +4,35 @@ @media (max-width: 749px) and (min-width: 495px) { .root { - width: 495px; margin: auto; + width: 495px; } } @media (max-width: 1004px) and (min-width: 750px) { .root { - width: 750px; margin: auto; + width: 750px; } } @media (max-width: 1514px) and (min-width: 1005px) { .root { - width: 1005px; margin: auto; + width: 1005px; } } - @media (max-width: 1769px) and (min-width: 1515px) { .root { - width: 1515px; margin: auto; + width: 1515px; } } @media (min-width: 1770px) { .root { - width: 1770px; margin: auto; + width: 1770px; } } diff --git a/src/containers/editorialWorkflow/CollectionPageHOC.js b/src/containers/editorialWorkflow/CollectionPageHOC.js deleted file mode 100644 index a557a8bd..00000000 --- a/src/containers/editorialWorkflow/CollectionPageHOC.js +++ /dev/null @@ -1,68 +0,0 @@ -import React, { PropTypes } from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { OrderedMap } from 'immutable'; -import { loadUnpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } from '../../actions/editorialWorkflow'; -import { selectUnpublishedEntries } from '../../reducers'; -import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes'; -import UnpublishedListing from '../../components/UnpublishedListing'; -import { connect } from 'react-redux'; -import styles from '../CollectionPage.css'; - -export default function CollectionPageHOC(CollectionPage) { - class CollectionPageHOC extends CollectionPage { - static propTypes = { - dispatch: PropTypes.func.isRequired, - isEditorialWorkflow: PropTypes.bool.isRequired, - unpublishedEntries: ImmutablePropTypes.map, - }; - - componentDidMount() { - const { dispatch, isEditorialWorkflow } = this.props; - if (isEditorialWorkflow) { - dispatch(loadUnpublishedEntries()); - } - super.componentDidMount(); - } - - render() { - const { isEditorialWorkflow, unpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } = this.props; - if (!isEditorialWorkflow) return super.render(); - - return ( -
-
- -
- {super.render()} -
- ); - } - } - - function mapStateToProps(state) { - const publish_mode = state.config.get('publish_mode'); - const isEditorialWorkflow = (publish_mode === EDITORIAL_WORKFLOW); - const returnObj = { isEditorialWorkflow }; - - if (isEditorialWorkflow) { - /* - * Generates an ordered Map of the available status as keys. - * Each key containing a List of available unpubhlished entries - * Eg.: OrderedMap{'draft':List(), 'pending_review':List(), 'pending_publish':List()} - */ - returnObj.unpublishedEntries = status.reduce((acc, currStatus) => { - return acc.set(currStatus, selectUnpublishedEntries(state, currStatus)); - }, OrderedMap()); - } - return returnObj; - } - - return connect(mapStateToProps, { - updateUnpublishedEntryStatus, - publishUnpublishedEntry, - })(CollectionPageHOC); -} diff --git a/src/containers/editorialWorkflow/UnpublishedEntriesPanel.js b/src/containers/editorialWorkflow/UnpublishedEntriesPanel.js new file mode 100644 index 00000000..8e086873 --- /dev/null +++ b/src/containers/editorialWorkflow/UnpublishedEntriesPanel.js @@ -0,0 +1,61 @@ +import React, { Component, PropTypes } from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { OrderedMap } from 'immutable'; +import { connect } from 'react-redux'; +import { loadUnpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } from '../../actions/editorialWorkflow'; +import { selectUnpublishedEntries } from '../../reducers'; +import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes'; +import UnpublishedListing from '../../components/UnpublishedListing'; + +class unpublishedEntriesPanel extends Component { + static propTypes = { + isEditorialWorkflow: PropTypes.bool.isRequired, + unpublishedEntries: ImmutablePropTypes.map, + loadUnpublishedEntries: PropTypes.func.isRequired, + updateUnpublishedEntryStatus: PropTypes.func.isRequired, + publishUnpublishedEntry: PropTypes.func.isRequired, + }; + + componentDidMount() { + const { loadUnpublishedEntries, isEditorialWorkflow } = this.props; + if (isEditorialWorkflow) { + loadUnpublishedEntries(); + } + } + + render() { + const { isEditorialWorkflow, unpublishedEntries, updateUnpublishedEntryStatus, publishUnpublishedEntry } = this.props; + if (!isEditorialWorkflow) return null; + + return ( + + ); + } +} + +function mapStateToProps(state) { + const isEditorialWorkflow = (state.config.get('publish_mode') === EDITORIAL_WORKFLOW); + const returnObj = { isEditorialWorkflow }; + + if (isEditorialWorkflow) { + /* + * Generates an ordered Map of the available status as keys. + * Each key containing a List of available unpubhlished entries + * Eg.: OrderedMap{'draft':List(), 'pending_review':List(), 'pending_publish':List()} + */ + returnObj.unpublishedEntries = status.reduce((acc, currStatus) => ( + acc.set(currStatus, selectUnpublishedEntries(state, currStatus)) + ), OrderedMap()); + } + return returnObj; +} + +export default connect(mapStateToProps, { + loadUnpublishedEntries, + updateUnpublishedEntryStatus, + publishUnpublishedEntry, +})(unpublishedEntriesPanel); diff --git a/src/routing/routes.js b/src/routing/routes.js index 9c83a2a0..cc6b9460 100644 --- a/src/routing/routes.js +++ b/src/routing/routes.js @@ -1,6 +1,7 @@ import React from 'react'; import { Route, IndexRoute } from 'react-router'; import App from '../containers/App'; +import DashboardPage from '../containers/DashboardPage'; import CollectionPage from '../containers/CollectionPage'; import EntryPage from '../containers/EntryPage'; import SearchPage from '../containers/SearchPage'; @@ -8,12 +9,32 @@ import NotFoundPage from '../containers/NotFoundPage'; export default ( - - - - - - - + + + + + + + );