From 0819ae35751f57f242c315919ad39b49b7fae84a Mon Sep 17 00:00:00 2001
From: vimal1083 <vimal1083@gmail.com>
Date: Mon, 14 Dec 2020 20:27:57 +0530
Subject: [PATCH] Add all-submissions page in react application
---
.../funds/templates/funds/submissions.html | 16 +++++--
.../src/app/src/AllSubmissionsApp.js | 46 +++++++++++++++++++
.../src/app/src/SubmissionsByStatusApp.js | 13 ++++--
.../src/app/src/allSubmissionsIndex.js | 24 ++++++++++
.../src/components/GroupedListing/index.js | 1 -
.../src/components/GroupedListing/styles.scss | 1 -
.../src/app/src/containers/ByRoundListing.js | 6 +--
.../src/containers/GroupByRoundDetailView.js | 10 ++--
.../app/src/containers/ReviewInformation.js | 2 +-
.../src/containers/ScreeningStatus/index.js | 2 +-
.../src/app/src/containers/StatusActions.js | 2 +-
.../src/app/src/redux/actions/submissions.js | 2 +-
.../src/app/src/redux/selectors/statuses.js | 7 +++
.../app/src/redux/selectors/submissions.js | 4 ++
.../static_src/src/app/webpack.base.config.js | 1 +
15 files changed, 114 insertions(+), 23 deletions(-)
create mode 100644 hypha/static_src/src/app/src/AllSubmissionsApp.js
create mode 100644 hypha/static_src/src/app/src/allSubmissionsIndex.js
diff --git a/hypha/apply/funds/templates/funds/submissions.html b/hypha/apply/funds/templates/funds/submissions.html
index 0ed85d1e4..534462060 100644
--- a/hypha/apply/funds/templates/funds/submissions.html
+++ b/hypha/apply/funds/templates/funds/submissions.html
@@ -1,6 +1,8 @@
{% extends "funds/base_submissions_table.html" %}
-{% block title %}Submissions{% endblock %}
+{% load static %}
+{% load render_bundle from webpack_loader %}
+{% block title %}Submissions{% endblock %}
{% block content %}
<div class="admin-bar">
<div class="admin-bar__inner wrapper--search">
@@ -8,13 +10,17 @@
<div>
<h1 class="gamma heading heading--no-margin heading--bold">All Submissions</h1>
</div>
+ <div id="submissions-all-react-app-switcher"></div>
{% endblock %}
</div>
</div>
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
- {% block table %}
- {{ block.super }}
- {% endblock %}
+<div id="submissions-all-react-app">
+ <div class="wrapper wrapper--large wrapper--inner-space-medium">
+ {% block table %}
+ {{ block.super }}
+ {% endblock %}
+ </div>
</div>
+{% render_bundle 'allSubmissions' %}
{% endblock %}
diff --git a/hypha/static_src/src/app/src/AllSubmissionsApp.js b/hypha/static_src/src/app/src/AllSubmissionsApp.js
new file mode 100644
index 000000000..29eedf97b
--- /dev/null
+++ b/hypha/static_src/src/app/src/AllSubmissionsApp.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux'
+import SwitcherApp from './SwitcherApp';
+import GroupByRoundDetailView from '@containers/GroupByRoundDetailView';
+import { setCurrentStatuses } from '@actions/submissions';
+import {
+ getSubmissionsForListing,
+} from '@selectors/submissions';
+
+class AllSubmissionsApp extends React.Component {
+ static propTypes = {
+ pageContent: PropTypes.node.isRequired,
+ setStatuses: PropTypes.func.isRequired,
+ submissions: PropTypes.array
+ };
+
+
+ componentDidMount() {
+ this.props.setStatuses([]);
+ }
+
+ render() {
+ return (
+ <SwitcherApp
+ detailComponent={<GroupByRoundDetailView submissions= {this.props.submissions} groupBy = "all"/>}
+ switcherSelector={'submissions-all-react-app-switcher'}
+ pageContent={this.props.pageContent} />
+ )
+ }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+ submissions: getSubmissionsForListing(state),
+})
+
+const mapDispatchToProps = dispatch => {
+ return {
+ setStatuses: statuses => {dispatch(setCurrentStatuses(statuses));},
+ }
+};
+
+export default hot(module)(
+ connect(mapStateToProps, mapDispatchToProps)(AllSubmissionsApp)
+);
diff --git a/hypha/static_src/src/app/src/SubmissionsByStatusApp.js b/hypha/static_src/src/app/src/SubmissionsByStatusApp.js
index 90c6b8989..3b9325b67 100644
--- a/hypha/static_src/src/app/src/SubmissionsByStatusApp.js
+++ b/hypha/static_src/src/app/src/SubmissionsByStatusApp.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
import GroupByRoundDetailView from '@containers/GroupByRoundDetailView';
import { setCurrentStatuses } from '@actions/submissions';
+import { getCurrentStatusesSubmissions } from '@selectors/submissions';
class SubmissionsByStatusApp extends React.Component {
@@ -13,6 +14,7 @@ class SubmissionsByStatusApp extends React.Component {
pageContent: PropTypes.node.isRequired,
statuses: PropTypes.arrayOf(PropTypes.string),
setStatuses: PropTypes.func.isRequired,
+ submissions: PropTypes.array
};
componentDidMount() {
@@ -21,19 +23,24 @@ class SubmissionsByStatusApp extends React.Component {
render() {
return <SwitcherApp
- detailComponent={<GroupByRoundDetailView />}
+ detailComponent={<GroupByRoundDetailView submissions= {this.props.submissions}/>}
switcherSelector={'submissions-by-status-app-react-switcher'}
pageContent={this.props.pageContent} />;
}
}
+const mapStateToProps = (state, ownProps) => ({
+ submissions: getCurrentStatusesSubmissions(state),
+})
+
const mapDispatchToProps = dispatch => {
return {
- setStatuses: statuses => {dispatch(setCurrentStatuses(statuses));},
+ setStatuses: statuses => {dispatch(setCurrentStatuses(statuses));
+ },
}
};
export default hot(module)(
- connect(null, mapDispatchToProps)(SubmissionsByStatusApp)
+ connect(mapStateToProps, mapDispatchToProps)(SubmissionsByStatusApp)
);
diff --git a/hypha/static_src/src/app/src/allSubmissionsIndex.js b/hypha/static_src/src/app/src/allSubmissionsIndex.js
new file mode 100644
index 000000000..728a68751
--- /dev/null
+++ b/hypha/static_src/src/app/src/allSubmissionsIndex.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+
+import AllSubmissionsApp from './AllSubmissionsApp';
+import createStore, { history } from '@redux/store';
+
+
+const container = document.getElementById('submissions-all-react-app');
+
+const store = createStore();
+
+Modal.setAppElement(container)
+
+ReactDOM.render(
+ <Provider store={store}>
+ <ConnectedRouter history={history}>
+ <AllSubmissionsApp pageContent={container.innerHTML}/>
+ </ConnectedRouter>
+ </Provider>,
+ container
+);
diff --git a/hypha/static_src/src/app/src/components/GroupedListing/index.js b/hypha/static_src/src/app/src/components/GroupedListing/index.js
index 43c72b22d..76e2ca23c 100644
--- a/hypha/static_src/src/app/src/components/GroupedListing/index.js
+++ b/hypha/static_src/src/app/src/components/GroupedListing/index.js
@@ -113,7 +113,6 @@ export default class GroupedListing extends React.Component {
render() {
const { isLoading, isErrored, errorMessage } = this.props;
-
const passProps = {
items: this.state.orderedItems,
renderItem: this.renderItem,
diff --git a/hypha/static_src/src/app/src/components/GroupedListing/styles.scss b/hypha/static_src/src/app/src/components/GroupedListing/styles.scss
index db881d048..225412a6f 100644
--- a/hypha/static_src/src/app/src/components/GroupedListing/styles.scss
+++ b/hypha/static_src/src/app/src/components/GroupedListing/styles.scss
@@ -2,7 +2,6 @@
height: 100vh;
display: flex;
flex-direction: column;
-
@include media-query(tablet-landscape) {
height: calc(100vh - var(--header-admin-height));
}
diff --git a/hypha/static_src/src/app/src/containers/ByRoundListing.js b/hypha/static_src/src/app/src/containers/ByRoundListing.js
index e9d1778f6..089215829 100644
--- a/hypha/static_src/src/app/src/containers/ByRoundListing.js
+++ b/hypha/static_src/src/app/src/containers/ByRoundListing.js
@@ -16,6 +16,7 @@ import {
import {
getCurrentSubmissionID,
getCurrentStatusesSubmissions,
+ getSubmissionsForListing,
} from '@selectors/submissions';
import {
getCurrentStatuses,
@@ -23,7 +24,6 @@ import {
getByStatusesError,
} from '@selectors/statuses';
-
const loadData = props => {
props.loadRounds()
props.loadSubmissions()
@@ -89,9 +89,9 @@ class ByRoundListing extends React.Component {
}
}
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, ownProps) => ({
statuses: getCurrentStatuses(state),
- submissions: getCurrentStatusesSubmissions(state),
+ submissions: ownProps.groupBy ? getSubmissionsForListing(state) :getCurrentStatusesSubmissions(state),
isErrored: getRoundsErrored(state) || getByStatusesError(state),
isLoading: (
getByStatusesLoading(state) ||
diff --git a/hypha/static_src/src/app/src/containers/GroupByRoundDetailView.js b/hypha/static_src/src/app/src/containers/GroupByRoundDetailView.js
index a5492c4af..a49804989 100644
--- a/hypha/static_src/src/app/src/containers/GroupByRoundDetailView.js
+++ b/hypha/static_src/src/app/src/containers/GroupByRoundDetailView.js
@@ -9,7 +9,6 @@ import {
getRoundsErrored,
} from '@selectors/rounds'
import {
- getCurrentStatusesSubmissions,
getCurrentSubmissionID,
} from '@selectors/submissions';
import {
@@ -18,17 +17,16 @@ import {
} from '@selectors/statuses';
const GroupByRoundDetailView = props => {
- const listing = <ByRoundListing submissionStatuses={props.submissionStatuses} />
+ const listing = <ByRoundListing submissionStatuses={props.submissionStatuses} groupBy = {props.groupBy && props.groupBy}/>
const { isLoading, isErrored, submissions, submissionID, errorMessage } = props
const isEmpty = submissions.length === 0
- const activeSubmision = !!submissionID
-
+ const activeSubmission = !!submissionID
return (
<DetailView
isEmpty={isEmpty}
listing={listing}
isLoading={isLoading}
- showSubmision={activeSubmision}
+ showSubmision={activeSubmission}
isErrored={isErrored}
errorMessage={errorMessage}
/>
@@ -42,6 +40,7 @@ GroupByRoundDetailView.propTypes = {
isLoading: PropTypes.bool,
isErrored: PropTypes.bool,
errorMessage: PropTypes.string,
+ groupBy: PropTypes.string
}
const mapStateToProps = (state, ownProps) => ({
@@ -49,7 +48,6 @@ const mapStateToProps = (state, ownProps) => ({
isLoading: (
getByStatusesLoading(state) || getRoundsFetching(state)
),
- submissions: getCurrentStatusesSubmissions(state),
submissionID: getCurrentSubmissionID(state),
})
diff --git a/hypha/static_src/src/app/src/containers/ReviewInformation.js b/hypha/static_src/src/app/src/containers/ReviewInformation.js
index 0ccd9e899..12ffb8185 100644
--- a/hypha/static_src/src/app/src/containers/ReviewInformation.js
+++ b/hypha/static_src/src/app/src/containers/ReviewInformation.js
@@ -162,7 +162,7 @@ const ReviewInformation = ({ submission, submissionID, showReviewForm, toggleRev
ReviewInformation.propTypes = {
submission: PropTypes.object,
- submissionID: PropTypes.number.isRequired,
+ submissionID: PropTypes.number,
showReviewForm: PropTypes.bool,
reviewDraftStatus: PropTypes.bool,
toggleReviewForm: PropTypes.func,
diff --git a/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js b/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
index 39918ba31..a446e73f7 100644
--- a/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
+++ b/hypha/static_src/src/app/src/containers/ScreeningStatus/index.js
@@ -88,7 +88,7 @@ class ScreeningStatusContainer extends React.PureComponent {
label={option.title}
variant={!option.selected ? "outlined" : "default"}
key={option.id}
- icon={option.selected && <DoneIcon />}
+ icon={option.selected ? <DoneIcon /> : null}
onClick={() => selectVisibleOption(submissionID, option)}>
</Chip>)
}
diff --git a/hypha/static_src/src/app/src/containers/StatusActions.js b/hypha/static_src/src/app/src/containers/StatusActions.js
index 1f8de8db3..7f926bfa3 100644
--- a/hypha/static_src/src/app/src/containers/StatusActions.js
+++ b/hypha/static_src/src/app/src/containers/StatusActions.js
@@ -15,7 +15,7 @@ import './StatusActions.scss';
class StatusActions extends React.Component {
static propTypes = {
- submissionID: PropTypes.number.isRequired,
+ submissionID: PropTypes.number,
submission: PropTypes.shape({
id: PropTypes.number,
phase: PropTypes.string,
diff --git a/hypha/static_src/src/app/src/redux/actions/submissions.js b/hypha/static_src/src/app/src/redux/actions/submissions.js
index 919c442f3..cfd39dd91 100644
--- a/hypha/static_src/src/app/src/redux/actions/submissions.js
+++ b/hypha/static_src/src/app/src/redux/actions/submissions.js
@@ -105,7 +105,7 @@ export const clearCurrentDeterminationAction = () => ({
export const fetchReviewDraft = (submissionID) => ({
[CALL_API]: {
- types: [ START_LOADING_SUBMISSION, FETCH_REVIEW_DRAFT, FAIL_LOADING_SUBMISSION],
+ types: [ START_LOADING_SUBMISSION, FETCH_REVIEW_DRAFT, CLEAR_REVIEW_DRAFT],
endpoint: api.fetchReviewDraft(submissionID),
},
submissionID,
diff --git a/hypha/static_src/src/app/src/redux/selectors/statuses.js b/hypha/static_src/src/app/src/redux/selectors/statuses.js
index ff17929c7..70344be7e 100644
--- a/hypha/static_src/src/app/src/redux/selectors/statuses.js
+++ b/hypha/static_src/src/app/src/redux/selectors/statuses.js
@@ -11,6 +11,13 @@ const getSubmissionsByStatuses = state => state.statuses.byStatuses;
const getSubmissionIDsForCurrentStatuses = createSelector(
[ getSubmissionsByStatuses, getCurrentStatuses ],
(grouped, current) => {
+ if (!current.length){
+ let acc = []
+ for (let status in grouped){
+ acc = acc.concat(grouped[status])
+ }
+ return acc
+ }
return current.reduce((acc, status) => acc.concat(grouped[status] || []), [])
}
);
diff --git a/hypha/static_src/src/app/src/redux/selectors/submissions.js b/hypha/static_src/src/app/src/redux/selectors/submissions.js
index 5bcb0d6f9..360c9adb3 100644
--- a/hypha/static_src/src/app/src/redux/selectors/submissions.js
+++ b/hypha/static_src/src/app/src/redux/selectors/submissions.js
@@ -24,6 +24,8 @@ const getCurrentDetermination = state => state.submissions.currentDetermination;
const getDeterminationDraftStatus = state => state.submissions.isDeterminationDraftExist;
+const getSubmissionsForListing = state => Object.values(state.submissions.byID)
+
const getCurrentRoundSubmissions = createSelector(
[ getCurrentRoundSubmissionIDs, getSubmissions],
@@ -61,6 +63,8 @@ const getSubmissionsByRoundError = state => state.rounds.error;
const getSubmissionsByRoundLoadingState = state => state.submissions.itemsLoading === true;
export {
+ getSubmissions,
+ getSubmissionsForListing,
getCurrentRoundSubmissions,
getCurrentSubmission,
getCurrentSubmissionID,
diff --git a/hypha/static_src/src/app/webpack.base.config.js b/hypha/static_src/src/app/webpack.base.config.js
index 96429b967..91f22855e 100644
--- a/hypha/static_src/src/app/webpack.base.config.js
+++ b/hypha/static_src/src/app/webpack.base.config.js
@@ -15,6 +15,7 @@ module.exports = (webpackEnv) => {
entry: {
submissionsByRound: COMMON_ENTRY.concat(['./src/submissionsByRoundIndex']),
submissionsByStatus: COMMON_ENTRY.concat(['./src/submissionsByStatusIndex']),
+ allSubmissions: COMMON_ENTRY.concat(['./src/allSubmissionsIndex'])
},
output: {
--
GitLab