GH-877: handle error message when fetching with existing data

opentech/static_src/src/app/src/components/Listing/index.js

@@ -35,22 +35,25 @@ export default class Listing extends React.Component {
             listRef,
         } = this.props;
 
-        if (isLoading && !items) {
-            return (
-                <div className="listing__list">
-                    <LoadingPanel />
-                </div>
-            );
-        } else if (isError) {
-            return this.renderError();
-        } else if (items.length === 0) {
-            return <EmptyPanel column={this.props.column} />;
+        if ( items.length === 0 ) {
+            if (isLoading) {
+                return (
+                    <div className="listing__list">
+                        <LoadingPanel />
+                    </div>
+                );
+            } else if (isError) {
+                return this.renderError();
+            } else {
+                return <EmptyPanel column={this.props.column} />;
+            }
         }
 
         return (
             <>
                 { isLoading && <InlineLoading /> }
                 <ul className={`listing__list listing__list--${column}`} ref={listRef}>
+                    { isError && this.renderErrorItem() }
                     <TransitionGroup component={null} >
                         {items.map(v => renderItem(v))}
                     </TransitionGroup>
@@ -59,9 +62,24 @@ export default class Listing extends React.Component {
         );
     }
 
+    retryButton = (handleRetry) => {
+        return <a className="listing__help-link" onClick={handleRetry}>Refresh</a>;
+    }
+
+    renderErrorItem = () => {
+        const { handleRetry, error } = this.props;
+        return (
+            <li className={`listing__item listing__item--error`}>
+                <h5>Something went wrong!</h5>
+                <p>{ error }</p>
+                { !navigator.onLine && <p>You appear to be offline.</p>}
+                { handleRetry && this.retryButton(handleRetry) }
+            </li>
+        )
+    }
+
     renderError = () => {
         const { handleRetry, error, column } = this.props;
-        const retryButton = <a className="listing__help-link" onClick={handleRetry}>Refresh</a>;
 
         return (
             <div className={`listing__list listing__list--${column} is-blank`}>
@@ -71,14 +89,14 @@ export default class Listing extends React.Component {
                     <p>Something went wrong!</p>
                 }
 
-                {handleRetry && retryButton &&
+                {handleRetry &&
                     <>
                         <div className="listing__blank-icon">
                             <SadNoteIcon  />
                         </div>
                         <p className="listing__help-text listing__help-text--standout">Something went wrong!</p>
                         <p className="listing__help-text">Sorry we couldn&apos;t load the notes</p>
-                        {retryButton}
+                        { this.handleRetry(handleRetry) }
                     </>
                 }
             </div>

opentech/static_src/src/app/src/components/Listing/style.scss

@@ -53,6 +53,14 @@
     &__item {
         @include submission-list-item;
 
+        &--error {
+            padding: 5px 20px 5px;
+
+            p {
+                margin: 5px 0px;
+            }
+        }
+
         &.is-active {
             @include target-edge {
                 margin-left: 8px;
@@ -71,6 +79,7 @@
         }
     }
 
+
     // <a> tags
     &__link {
         display: block;

opentech/static_src/src/app/src/containers/NoteListing.js

@@ -8,6 +8,7 @@ import Listing from '@components/Listing';
 import Note from '@containers/Note';
 import {
     getNotesErrorState,
+    getNotesErrorMessage,
     getNoteIDsForSubmissionOfID,
     getNotesFetchState,
 } from '@selectors/notes';
@@ -19,6 +20,7 @@ class NoteListing extends React.Component {
         submissionID: PropTypes.number,
         noteIDs: PropTypes.array,
         isErrored: PropTypes.bool,
+        errorMessage: PropTypes.string,
         isLoading: PropTypes.bool,
     };
 
@@ -63,16 +65,17 @@ class NoteListing extends React.Component {
     }
 
     render() {
-        const { noteIDs } = this.props;
-        const passProps = {
-            isLoading: this.props.isLoading,
-            isError: this.props.isErrored,
-            handleRetry: this.handleRetry,
-            renderItem: this.renderItem,
-            items: noteIDs,
-        };
+        const { noteIDs, isLoading, isErrored, errorMessage } = this.props;
         return (
-            <Listing {...passProps} column="notes" />
+            <Listing
+                isLoading={ isLoading }
+                isError={ isErrored }
+                error={ errorMessage }
+                handleRetry={ this.handleRetry }
+                renderItem={ this.renderItem }
+                items={ noteIDs }
+                column="notes"
+            />
         );
     }
 }
@@ -85,6 +88,7 @@ const mapStateToProps = (state, ownProps) => ({
     noteIDs: getNoteIDsForSubmissionOfID(ownProps.submissionID)(state),
     isLoading: getNotesFetchState(state),
     isErrored: getNotesErrorState(state),
+    errorMessage: getNotesErrorMessage(state),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteListing);

opentech/static_src/src/app/src/redux/reducers/notes.js

@@ -21,13 +21,20 @@ function notesFetching(state = false, action) {
     }
 }
 
-function notesErrored(state = false, action) {
+function notesErrored(state = {errored: false, message: null}, action) {
     switch (action.type) {
         case UPDATE_NOTES:
         case START_FETCHING_NOTES:
-            return false;
+        return {
+            ...state,
+            errored: false,
+        };
         case FAIL_FETCHING_NOTES:
-            return true;
+            return {
+                ...state,
+                message: action.error,
+                errored: true,
+            };
         default:
             return state;
     }
@@ -110,7 +117,7 @@ function notesByID(state = {}, action) {
 export default combineReducers({
     byID: notesByID,
     isFetching: notesFetching,
-    isErrored: notesErrored,
+    error: notesErrored,
     createError: notesFailedCreating,
     isCreating: notesCreating,
 });

opentech/static_src/src/app/src/redux/selectors/notes.js

@@ -10,7 +10,9 @@ export const getNoteOfID = (noteID) => createSelector(
 
 export const getNotesFetchState = state => state.notes.isFetching === true;
 
-export const getNotesErrorState = state => state.notes.isErrored === true;
+export const getNotesErrorState = state => state.notes.error.errored === true;
+
+export const getNotesErrorMessage = state => state.notes.error.message;
 
 export const getNoteIDsForSubmissionOfID = submissionID => createSelector(
     [getSubmissionOfID(submissionID)],