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 ff14a9319c1cca99bd7e6abd6d29488ff9021f98..e5302ee420d3d8e3d3b14bf6fb954cad8689bf78 100644 --- a/opentech/static_src/src/app/src/components/DetailView/index.js +++ b/opentech/static_src/src/app/src/components/DetailView/index.js @@ -19,6 +19,7 @@ class DetailView extends Component { windowSize: PropTypes.objectOf(PropTypes.number), clearSubmission: PropTypes.func.isRequired, isLoading: PropTypes.bool, + error: PropTypes.string, }; isMobile = (width) => (width ? width : this.props.windowSize.windowWidth) < 1024 @@ -28,8 +29,9 @@ class DetailView extends Component { } render() { - const { listing, submissionID, isLoading } = this.props; + const { listing, submissionID, isLoading, error } = this.props; const activeSubmision = !!submissionID; + const isError = Boolean(error); if (this.isMobile()) { var activeDisplay; @@ -57,6 +59,13 @@ class DetailView extends Component { return ( <LoadingPanel /> ) + } else if (isError) { + return ( + <div className="loading-panel"> + <h5>Something went wrong!</h5> + <p>{error}</p> + </div> + ) } return ( <div className="detail-view"> diff --git a/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js b/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js index 685427d29b5e3a8d58cbfcbc5c67d3ab80986362..4ab51373ec9da655eec687231284d7f3e007f4fa 100644 --- a/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js +++ b/opentech/static_src/src/app/src/containers/GroupByRoundDetailView.js @@ -6,28 +6,35 @@ import DetailView from '@components/DetailView'; import ByRoundListing from '@containers/ByRoundListing'; import { getRoundsFetching, + getRoundsErrored, } from '@selectors/rounds'; import { getByGivenStatusesLoading, + getByGivenStatusesError, } from '@selectors/submissions'; class GroupByRoundDetailView extends React.Component { static propTypes = { submissionStatuses: PropTypes.arrayOf(PropTypes.string), isLoading: PropTypes.bool, + isErrored: PropTypes.bool, }; render() { const listing = <ByRoundListing submissionStatuses={this.props.submissionStatuses} />; - const { isLoading } = this.props; + const { isLoading, isErrored } = this.props; return ( - <DetailView listing={listing} isLoading={isLoading} /> + <DetailView listing={listing} isLoading={isLoading} error={isErrored ? 'Fetching failed.' : undefined} /> ); } } const mapStateToProps = (state, ownProps) => ({ + isErrored: ( + getByGivenStatusesError(ownProps.submissionStatuses)(state) || + getRoundsErrored(state) + ), isLoading: ( getByGivenStatusesLoading(ownProps.submissionStatuses)(state) || getRoundsFetching(state) diff --git a/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js index 8bc46474fe826d2a15b5d1837805831d76e212e9..1b18ac0996a86f5c2cfa28b5b91d97ed2edf4fc1 100644 --- a/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js +++ b/opentech/static_src/src/app/src/containers/GroupByStatusDetailView.js @@ -7,6 +7,7 @@ import ByStatusListing from '@containers/ByStatusListing'; import { getCurrentRound, + getSubmissionsByRoundError, } from '@selectors/submissions'; @@ -14,20 +15,22 @@ class GroupByStatusDetailView extends React.Component { static propTypes = { submissions: PropTypes.arrayOf(PropTypes.object), round: PropTypes.object, + error: PropTypes.string, }; render() { const listing = <ByStatusListing />; - const { round } = this.props; + const { round, error } = this.props; const isLoading = !round || (round && (round.isFetching || round.submissions.isFetching)) return ( - <DetailView listing={listing} isLoading={isLoading} /> + <DetailView listing={listing} isLoading={isLoading} error={error} /> ); } } const mapStateToProps = state => ({ round: getCurrentRound(state), + error: getSubmissionsByRoundError(state), }) export default connect(