add error state to detail view

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">

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)

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(