add error Toasts

Author: Robert S

src/constants/RouteEnum.ts

@@ -1,6 +1,7 @@
 enum RouteEnum {
   Home = '/',
   Episodes = '/episodes',
+  About = '/about',
 }
 
 export default RouteEnum;

src/constants/ToastStatusEnum.ts

@@ -0,0 +1,7 @@
+enum ToastStatusEnum {
+  Error = 'error',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export default ToastStatusEnum;

src/environments/base.js

@@ -9,6 +9,7 @@ export default function(baseApi) {
       shows: `${baseApi}/shows/:showId`,
       episodes: `${baseApi}/shows/:showId/episodes`,
       cast: `${baseApi}/shows/:showId/cast`,
+      errorExample: 'https://httpstat.us/520',
     },
     isProduction: true,
     isDevelopment: false,

src/middlewares/errorToastMiddleware.js

@@ -0,0 +1,14 @@
+import ToastStatusEnum from '../constants/ToastStatusEnum';
+import ToastsAction from '../stores/toasts/ToastsAction';
+
+const errorToastMiddleware = () => (store) => (next) => (action) => {
+  if (action.error) {
+    const errorAction = action;
+
+    next(ToastsAction.add(errorAction.payload.message, ToastStatusEnum.Error));
+  }
+
+  next(action);
+};
+
+export default errorToastMiddleware;

src/stores/rootReducer.js

@@ -3,13 +3,15 @@ import { connectRouter } from 'connected-react-router';
 import RequestingReducer from './requesting/RequestingReducer';
 import ErrorReducer from './error/ErrorReducer';
 import ShowsReducer from './shows/ShowsReducer';
+import ToastsReducer from './toasts/ToastsReducer';
 
 export default (history) => {
   const reducerMap = {
     error: ErrorReducer.reducer,
     requesting: RequestingReducer.reducer,
     router: connectRouter(history),
     shows: new ShowsReducer().reducer,
+    toasts: new ToastsReducer().reducer,
   };
 
   return combineReducers(reducerMap);

src/stores/rootStore.js

@@ -5,9 +5,10 @@ import { routerMiddleware } from 'connected-react-router';
 import reduxFreeze from 'redux-freeze';
 import environment from 'environment';
 import rootReducer from './rootReducer';
+import errorToastMiddleware from '../middlewares/errorToastMiddleware';
 
 export default (initialState, history) => {
-  const middleware = [environment.isDevelopment ? reduxFreeze : null, routerMiddleware(history), thunk].filter(Boolean);
+  const middleware = [environment.isDevelopment ? reduxFreeze : null, thunk, routerMiddleware(history), errorToastMiddleware()].filter(Boolean);
 
   const store = createStore(rootReducer(history), initialState, composeWithDevTools(applyMiddleware(...middleware)));
 

src/stores/shows/ShowsAction.js

@@ -11,6 +11,9 @@ export default class ShowsAction {
   static REQUEST_CAST = 'ShowsAction.REQUEST_CAST';
   static REQUEST_CAST_FINISHED = 'ShowsAction.REQUEST_CAST_FINISHED';
 
+  static REQUEST_ERROR = 'ShowsAction.REQUEST_ERROR';
+  static REQUEST_ERROR_FINISHED = 'ShowsAction.REQUEST_ERROR_FINISHED';
+
   static requestShow() {
     return async (dispatch, getState) => {
       const showId = getState().shows.currentShowId;
@@ -34,4 +37,10 @@ export default class ShowsAction {
       await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_CAST, ShowsEffect.requestCast, showId);
     };
   }
+
+  static requestError() {
+    return async (dispatch, getState) => {
+      await ActionUtility.createThunkEffect(dispatch, ShowsAction.REQUEST_ERROR, ShowsEffect.requestError);
+    };
+  }
 }

src/stores/shows/ShowsEffect.js

@@ -32,4 +32,18 @@ export default class ShowsEffect {
 
     return response.data.map((json) => new CastModel(json));
   }
+
+  /**
+   * This is only to trigger an error api response so we can use it for an example in the AboutPage
+   */
+  static async requestError() {
+    const endpoint = environment.api.errorExample;
+    const response = await HttpUtility.get(endpoint);
+
+    if (response instanceof HttpErrorResponseModel) {
+      return response;
+    }
+
+    return response.data;
+  }
 }

src/stores/toasts/ToastsAction.js

@@ -0,0 +1,19 @@
+import ActionUtility from '../../utilities/ActionUtility';
+import uuid from 'uuid/v4';
+
+export default class ToastsAction {
+  static ADD_TOAST = 'ToastsAction.ADD_TOAST';
+  static REMOVE_TOAST = 'ToastsAction.REMOVE_TOAST';
+
+  static add(message, type) {
+    return ActionUtility.createAction(ToastsAction.ADD_TOAST, {
+      message,
+      type,
+      id: uuid(),
+    });
+  }
+
+  static removeById(toastId) {
+    return ActionUtility.createAction(ToastsAction.REMOVE_TOAST, toastId);
+  }
+}

src/stores/toasts/ToastsReducer.js

@@ -0,0 +1,24 @@
+import ToastsAction from './ToastsAction';
+import BaseReducer from '../../utilities/BaseReducer';
+
+export default class ToastsReducer extends BaseReducer {
+  initialState = {
+    items: [],
+  };
+
+  [ToastsAction.ADD_TOAST](state, action) {
+    return {
+      ...state,
+      items: [...state.items, action.payload],
+    };
+  }
+
+  [ToastsAction.REMOVE_TOAST](state, action) {
+    const toastId = action.payload;
+
+    return {
+      ...state,
+      items: state.items.filter((model) => model.id !== toastId),
+    };
+  }
+}