From c039a0673ab27dc9d41cf48dac24d06f7b5b2e36 Mon Sep 17 00:00:00 2001
From: Tomasz Knapik <hi@tmkn.org>
Date: Mon, 14 Jan 2019 18:44:07 +0000
Subject: [PATCH] Restructure components
---
.../src/app/src/SubmissionsByRoundApp.js | 21 +++----
.../app/src/components/DetailView/index.js | 8 ++-
.../index.js} | 17 +++---
.../style.scss} | 0
...yRoundListHeading.js => ListingHeading.js} | 4 +-
...sionsByRoundListItem.js => ListingItem.js} | 4 +-
.../src/app/src/containers/ByStatusListing.js | 60 +++++++++++++++++++
.../src/containers/GroupByStatusDetailView.js | 38 ++++++++++++
.../containers/SubmissionsByRoundContainer.js | 54 -----------------
opentech/static_src/src/app/src/index.js | 4 +-
.../app/src/redux/selectors/submissions.js | 5 +-
11 files changed, 128 insertions(+), 87 deletions(-)
rename opentech/static_src/src/app/src/components/{SubmissionsByRoundList.js => Listing/index.js} (61%)
rename opentech/static_src/src/app/src/components/{SubmissionsByRoundList.scss => Listing/style.scss} (100%)
rename opentech/static_src/src/app/src/components/{SubmissionsByRoundListHeading.js => ListingHeading.js} (79%)
rename opentech/static_src/src/app/src/components/{SubmissionsByRoundListItem.js => ListingItem.js} (70%)
create mode 100644 opentech/static_src/src/app/src/containers/ByStatusListing.js
create mode 100644 opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js
delete mode 100644 opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
diff --git a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
index f7fb16d38..22b073181 100644
--- a/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
+++ b/opentech/static_src/src/app/src/SubmissionsByRoundApp.js
@@ -2,18 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import { hot } from 'react-hot-loader'
import Switcher from '@components/Switcher'
-import DetailView from '@components/DetailView';
-import DisplayPanel from '@components/DisplayPanel';
-import SubmissionsByRoundContainer from '@containers/SubmissionsByRoundContainer';
+import GroupByStatusDetailView from '@containers/GroupByStatusDetailView';
class SubmissionsByRoundApp extends React.Component {
+ state = {
+ detailOpen: false,
+ };
+
constructor(props) {
super(props);
-
- this.state = {
- detailOpen: false
- }
}
detailOpen = (state) => {
@@ -34,10 +32,7 @@ class SubmissionsByRoundApp extends React.Component {
<div style={this.state.style} ref={this.setOriginalContentRef} dangerouslySetInnerHTML={{ __html: this.props.pageContent }} />
{this.state.detailOpen &&
- <DetailView>
- <SubmissionsByRoundContainer roundId={this.props.roundId} />
- <DisplayPanel />
- </DetailView>
+ <GroupByStatusDetailView roundId={this.props.roundId} />
}
</>
)
@@ -46,7 +41,7 @@ class SubmissionsByRoundApp extends React.Component {
SubmissionsByRoundApp.propTypes = {
roundId: PropTypes.number,
-}
+};
-export default hot(module)(SubmissionsByRoundApp)
+export default hot(module)(SubmissionsByRoundApp);
diff --git a/opentech/static_src/src/app/src/components/DetailView/index.js b/opentech/static_src/src/app/src/components/DetailView/index.js
index cd23b4265..e735e079b 100644
--- a/opentech/static_src/src/app/src/components/DetailView/index.js
+++ b/opentech/static_src/src/app/src/components/DetailView/index.js
@@ -2,14 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';
-const DetailView = ({ children }) => (
+const DetailView = ({ listing, display }) => (
<div className="detail-view">
- {children}
+ {listing}
+ {display}
</div>
);
DetailView.propTypes = {
- children: PropTypes.node.isRequired,
+ listing: PropTypes.node.isRequired,
+ display: PropTypes.node.isRequired,
};
export default DetailView;
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js b/opentech/static_src/src/app/src/components/Listing/index.js
similarity index 61%
rename from opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
rename to opentech/static_src/src/app/src/components/Listing/index.js
index f564e03c2..1f993fbd5 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -1,27 +1,26 @@
import React from 'react';
-import SubmissionsByRoundListHeading from '@components/SubmissionsByRoundListHeading';
-import SubmissionsByRoundListItem from '@components/SubmissionsByRoundListItem';
+import ListingHeading from '@components/ListingHeading';
+import ListingItem from '@components/ListingItem';
-import './SubmissionsByRoundList.scss';
+import './style.scss';
-export default class SubmissionsByRoundList extends React.Component {
+export default class Listing extends React.Component {
renderListItems() {
const listItems = [];
for (const item of this.props.items) {
listItems.push(
- <SubmissionsByRoundListHeading key={`status-${item.id}`} title={item.title} count={item.submissions.length} />
+ <ListingHeading key={`item-${item.id}`} title={item.title} count={item.subitems.length} />
);
const submissions = [];
- for (const submission of item.submissions) {
+ for (const subitem of item.subitems) {
submissions.push(
- <SubmissionsByRoundListItem key={`submission-${submission.id}`} title={submission.title} />
+ <ListingItem key={`subitem-${subitem.id}`} title={subitem.title} />
);
}
-
listItems.push(
- <ul key={`submissions-list-${item.id}`}>
+ <ul key={`subitems-listing-${item.id}`}>
{submissions}
</ul>
);
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss b/opentech/static_src/src/app/src/components/Listing/style.scss
similarity index 100%
rename from opentech/static_src/src/app/src/components/SubmissionsByRoundList.scss
rename to opentech/static_src/src/app/src/components/Listing/style.scss
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js b/opentech/static_src/src/app/src/components/ListingHeading.js
similarity index 79%
rename from opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
rename to opentech/static_src/src/app/src/components/ListingHeading.js
index bc97b2f7a..996f7a933 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
+++ b/opentech/static_src/src/app/src/components/ListingHeading.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-export default class SubmissionsByRoundListHeading extends React.Component {
+export default class ListingHeading extends React.Component {
render() {
return (
<li className="listing__item listing__item--heading">
@@ -12,7 +12,7 @@ export default class SubmissionsByRoundListHeading extends React.Component {
}
}
-SubmissionsByRoundListHeading.propTypes = {
+ListingHeading.propTypes = {
title: PropTypes.string,
count: PropTypes.oneOfType([
PropTypes.string,
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js b/opentech/static_src/src/app/src/components/ListingItem.js
similarity index 70%
rename from opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
rename to opentech/static_src/src/app/src/components/ListingItem.js
index 7f2e41122..3e6e1326c 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListItem.js
+++ b/opentech/static_src/src/app/src/components/ListingItem.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
-export default class SubmissionsByRoundListItem extends React.Component {
+export default class ListingItem extends React.Component {
render() {
return (
<li className="listing__item">
@@ -12,6 +12,6 @@ export default class SubmissionsByRoundListItem extends React.Component {
}
}
-SubmissionsByRoundListItem.propTypes = {
+ListingItem.propTypes = {
title: PropTypes.string,
};
diff --git a/opentech/static_src/src/app/src/containers/ByStatusListing.js b/opentech/static_src/src/app/src/containers/ByStatusListing.js
new file mode 100644
index 000000000..27cba75db
--- /dev/null
+++ b/opentech/static_src/src/app/src/containers/ByStatusListing.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux'
+
+import Listing from '@components/Listing';
+import { getCurrentRound, getCurrentRoundSubmissionsByStatus } from '@selectors/submissions';
+import { setCurrentSubmissionRound, fetchSubmissionsByRound } from '@actions/submissions';
+
+
+class ByStatusListing extends React.Component {
+ componentDidMount() {
+ const { roundId } = this.props;
+ // Update items if round ID is defined.
+ if (roundId !== null && roundId !== undefined) {
+ this.props.loadSubmissions(roundId);
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ const { roundId } = this.props;
+ // Update entries if round ID is changed or is not null.
+ if (roundId !== null && roundId !== undefined && prevProps.roundId !== roundId) {
+ this.props.loadSubmissions(roundId);
+ }
+ }
+
+ render() {
+ return <Listing items={this.getListingItems()} />;
+ }
+
+ getListingItems() {
+ return this.props.items.map(v => ({
+ id: v.id,
+ title: v.title,
+ subitems: [
+ ...v.submissions
+ ]
+ }));
+ }
+}
+
+const mapStateToProps = state => ({
+ items: getCurrentRoundSubmissionsByStatus(state),
+ roundId: getCurrentRound(state),
+});
+
+const mapDispatchToProps = dispatch => ({
+ loadSubmissions: id => dispatch(fetchSubmissionsByRound(id)),
+});
+
+ByStatusListing.propTypes = {
+ loadSubmissions: PropTypes.func,
+ roundId: PropTypes.number,
+};
+
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(ByStatusListing);
diff --git a/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js
new file mode 100644
index 000000000..c790f32b1
--- /dev/null
+++ b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux'
+
+import DisplayPanel from '@components/DisplayPanel';
+import DetailView from '@components/DetailView';
+import ByStatusListing from '@containers/ByStatusListing';
+import { setCurrentSubmissionRound } from '@actions/submissions';
+
+class GroupByStatusDetailView extends React.Component {
+ componentWillMount() {
+ this.props.setSubmissionRound(this.props.roundId);
+ }
+
+ render() {
+ const passProps = {
+ listing: <ByStatusListing />,
+ display: <DisplayPanel />,
+ };
+ return (
+ <DetailView {...passProps} />
+ );
+ }
+}
+
+GroupByStatusDetailView.propTypes = {
+ roundId: PropTypes.number,
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ setSubmissionRound: id => {
+ dispatch(setCurrentSubmissionRound(id));
+ },
+ }
+};
+
+export default connect(null, mapDispatchToProps)(GroupByStatusDetailView);
diff --git a/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js b/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
deleted file mode 100644
index 1d5f23de9..000000000
--- a/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux'
-
-import SubmissionsByRoundList from '@components/SubmissionsByRoundList';
-import { getCurrentRoundSubmissionsByStatus } from '@selectors/submissions';
-import { setCurrentSubmissionRound, fetchSubmissionsByRound } from '@actions/submissions';
-
-
-class SubmissionsByRoundContainer extends React.Component {
- constructor(props) {
- super(props);
- }
-
- componentDidMount() {
- this.props.setSubmissionRound(this.props.roundId);
- this.props.loadSubmissions(this.props.roundId);
- }
-
- render() {
- return (
- <>
- <SubmissionsByRoundList items={this.props.items} />
- </>
- );
- }
-}
-
-
-const mapStateToProps = state => {
- return {
- items: getCurrentRoundSubmissionsByStatus(state),
- };
-};
-
-const mapDispatchToProps = dispatch => {
- return {
- loadSubmissions: id => {
- dispatch(fetchSubmissionsByRound(id));
- },
- setSubmissionRound: id => {
- dispatch(setCurrentSubmissionRound(id));
- },
- }
-};
-
-SubmissionsByRoundContainer.propTypes = {
- roundId: PropTypes.number,
- loadSubmissions: PropTypes.func,
-};
-
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(SubmissionsByRoundContainer);
diff --git a/opentech/static_src/src/app/src/index.js b/opentech/static_src/src/app/src/index.js
index a3359dcd2..ce8b1d05f 100644
--- a/opentech/static_src/src/app/src/index.js
+++ b/opentech/static_src/src/app/src/index.js
@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux'
+import { Provider } from 'react-redux';
-import SubmissionsByRoundApp from './SubmissionsByRoundApp'
+import SubmissionsByRoundApp from './SubmissionsByRoundApp';
import createStore from '@redux/store';
diff --git a/opentech/static_src/src/app/src/redux/selectors/submissions.js b/opentech/static_src/src/app/src/redux/selectors/submissions.js
index 75a76bf06..b5f45db34 100644
--- a/opentech/static_src/src/app/src/redux/selectors/submissions.js
+++ b/opentech/static_src/src/app/src/redux/selectors/submissions.js
@@ -1,8 +1,8 @@
import { createSelector } from 'reselect';
-const getSubmissionsByRound = (state) => state.submissions.itemsByRound;
+const getSubmissionsByRound = state => state.submissions.itemsByRound;
-const getCurrentRound = (state) => state.submissions.currentRound;
+const getCurrentRound = state => state.submissions.currentRound;
const getCurrentRoundSubmissions = createSelector(
[ getSubmissionsByRound, getCurrentRound ],
@@ -32,6 +32,7 @@ const getCurrentRoundSubmissionsByStatus = createSelector(
);
export {
+ getCurrentRound,
getCurrentRoundSubmissions,
getCurrentRoundSubmissionsByStatus,
};
--
GitLab