fix: handle errors from backend properly

Author: suppermancool

src/shared/containers/timeline-wall/index.jsx

@@ -37,6 +37,7 @@ function TimelineWallContainer(props) {
     userAvatars,
     pendingApprovals,
     uploading,
+    uploadResult,
   } = props;
 
   const role = 'Admin User';
@@ -199,6 +200,7 @@ function TimelineWallContainer(props) {
             getAvatar={getAvatar}
             userAvatars={userAvatars}
             uploading={uploading}
+            uploadResult={uploadResult}
             deleteEvent={deleteEvent}
           />
           <React.Fragment>
@@ -231,6 +233,7 @@ TimelineWallContainer.defaultProps = {
   isAdmin: false,
   loading: false,
   uploading: false,
+  uploadResult: '',
   events: [],
   userAvatars: {},
   pendingApprovals: [],
@@ -244,6 +247,7 @@ TimelineWallContainer.propTypes = {
   isAdmin: PT.bool,
   loading: PT.bool,
   uploading: PT.bool,
+  uploadResult: PT.string,
   events: PT.arrayOf(PT.shape()),
   loadUserDetails: PT.func.isRequired,
   createNewEvent: PT.func.isRequired,
@@ -261,6 +265,7 @@ const mapStateToProps = state => ({
   isAdmin: state.timelineWall.isAdmin,
   loading: state.timelineWall.loading,
   uploading: state.timelineWall.uploading,
+  uploadResult: state.timelineWall.uploadResult,
   events: state.timelineWall.events,
   userAvatars: state.timelineWall.userAvatars,
   pendingApprovals: state.timelineWall.pendingApprovals,

src/shared/containers/timeline-wall/modal-event-add/index.jsx

@@ -6,7 +6,11 @@ import LoadingIndicator from 'components/LoadingIndicator';
 
 import style from './styles.scss';
 
-function ModalEventAdd({ onClose, isAdmin, uploading }) {
+function ModalEventAdd({
+  onClose, isAdmin, uploading, uploadResult,
+}) {
+  const successMessage = !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed'
+    : 'Thank you! Your event was added to the Timeline Wall.';
   return (
     <Modal
       theme={{ container: style.container, overlay: style.overlay }}
@@ -22,8 +26,7 @@ function ModalEventAdd({ onClose, isAdmin, uploading }) {
         ) : (
           <span styleName="text-description">
             {
-              !isAdmin ? 'Thank you! Your event was submitted for review. You’ll receive an email once the review is completed'
-                : 'Thank you! Your event was added to the Timeline Wall.'
+              uploadResult || successMessage
             }
           </span>
         )
@@ -56,6 +59,7 @@ ModalEventAdd.defaultProps = {
   onClose: () => { },
   isAdmin: false,
   uploading: false,
+  uploadResult: '',
 };
 
 /**
@@ -65,6 +69,7 @@ ModalEventAdd.propTypes = {
   onClose: PT.func,
   isAdmin: PT.bool,
   uploading: PT.bool,
+  uploadResult: PT.string,
 };
 
 export default ModalEventAdd;

src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx

@@ -18,7 +18,7 @@ import ModalEventAdd from '../../modal-event-add';
 import style from './styles.scss';
 
 function AddEvents({
-  className, isAuthenticated, createNewEvent, isAdmin, onDoneAddEvent, uploading,
+  className, isAuthenticated, createNewEvent, isAdmin, onDoneAddEvent, uploading, uploadResult,
 }) {
   const [formData, setFormData] = useState({
     eventName: '',
@@ -197,6 +197,7 @@ function AddEvents({
             }}
             isAdmin={isAdmin}
             uploading={uploading}
+            uploadResult={uploadResult}
           />
         ) : null
       }
@@ -212,6 +213,7 @@ AddEvents.defaultProps = {
   isAuthenticated: false,
   isAdmin: false,
   uploading: false,
+  uploadResult: '',
 };
 
 /**
@@ -224,6 +226,7 @@ AddEvents.propTypes = {
   isAdmin: PT.bool,
   onDoneAddEvent: PT.func.isRequired,
   uploading: PT.bool,
+  uploadResult: PT.string,
 };
 
 export default AddEvents;

src/shared/containers/timeline-wall/timeline-events/index.jsx

@@ -22,6 +22,7 @@ function TimelineEvents({
   userAvatars,
   onDoneAddEvent,
   uploading,
+  uploadResult,
   deleteEvent,
 }) {
   return (
@@ -34,6 +35,7 @@ function TimelineEvents({
           isAdmin={isAdmin}
           onDoneAddEvent={onDoneAddEvent}
           uploading={uploading}
+          uploadResult={uploadResult}
         />
         {events.length ? (
           <Events
@@ -94,6 +96,7 @@ TimelineEvents.defaultProps = {
   isAdmin: false,
   userAvatars: {},
   uploading: false,
+  uploadResult: '',
 };
 
 /**
@@ -114,6 +117,7 @@ TimelineEvents.propTypes = {
   onDoneAddEvent: PT.func.isRequired,
   userAvatars: PT.shape(),
   uploading: PT.bool,
+  uploadResult: PT.string,
   deleteEvent: PT.func.isRequired,
 };
 

src/shared/reducers/timelineWall.js

@@ -87,6 +87,7 @@ function onPendingApprovalDone(state, { payload }) {
 function onCreateNewEventInit(state) {
   return {
     ...state,
+    uploadResult: '',
     uploading: true,
   };
 }
@@ -96,9 +97,10 @@ function onCreateNewEventInit(state) {
 * @param {Object} state Previous state.
 * @param {Object} payload The payload.
 */
-function onCreateNewEventDone(state) {
+function onCreateNewEventDone(state, { payload }) {
   return {
     ...state,
+    uploadResult: payload,
     uploading: false,
   };
 }

src/shared/services/timelineWall.js

@@ -85,10 +85,14 @@ export const createEvent = async (tokenV3, formData) => {
       },
       body: form,
     });
+    if (res.status >= 300) {
+      const result = await res.json();
+      return result.message || 'There was an error during add event.';
+    }
 
-    return res.json();
+    return '';
   } catch (error) {
-    return [];
+    return 'There was an error during add event.';
   }
 };