Merge pull request codeBelt#6 from codeBelt/feature/loading-indicator

Add Requesting and Error stores and selectors

Author: codeBelt

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged",
+      "pre-commit": "npm run lint && pretty-quick --staged",
       "post-commit": "git update-index -g"
     }
   },
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "axios": "0.19.0",
+    "classnames": "2.2.6",
     "connected-react-router": "6.5.2",
     "dayjs": "1.8.16",
     "history": "4.9.0",
@@ -61,6 +62,7 @@
   },
   "devDependencies": {
     "@craco/craco": "5.4.0",
+    "@types/classnames": "2.2.9",
     "@types/history": "4.7.3",
     "@types/jest": "24.0.18",
     "@types/node": "12.7.3",

src/models/IStore.ts

@@ -1,7 +1,11 @@
 import { RouterState } from 'connected-react-router';
 import IShowState from '../stores/show/models/IShowState';
+import IRequestingState from '../stores/requesting/models/IRequestingState';
+import IErrorState from '../stores/error/models/IErrorState';
 
 export default interface IStore {
+  readonly error: IErrorState;
+  readonly requesting: IRequestingState;
   readonly router: RouterState;
   readonly show: IShowState;
 }

src/selectors/error/ErrorSelector.ts

@@ -0,0 +1,54 @@
+import { createSelector, ParametricSelector } from 'reselect';
+import IErrorState from '../../stores/error/models/IErrorState';
+import IStore from '../../models/IStore';
+
+export class ErrorSelector {
+  public static selectRawErrors(errorState: IErrorState, actionTypes: string[]): IErrorState {
+    return actionTypes.reduce((partialState: object, actionType: string) => {
+      if (errorState[actionType]) {
+        partialState[actionType] = errorState[actionType];
+      }
+
+      return partialState;
+    }, {});
+  }
+
+  public static selectErrorText(errorState: IErrorState, actionTypes: string[]): string {
+    const partialErrorState = ErrorSelector.selectRawErrors(errorState, actionTypes) as IErrorState;
+
+    const errorList: string[] = actionTypes.reduce((errorMessages: string[], actionType: string) => {
+      if (partialErrorState[actionType]) {
+        const { message, errors } = partialErrorState[actionType];
+        const arrayOfErrors: string[] = errors.length ? errors : [message];
+
+        return errorMessages.concat(arrayOfErrors);
+      }
+
+      return errorMessages;
+    }, []);
+
+    return errorList.join(', ');
+  }
+
+  public static hasErrors(errorState: IErrorState, actionTypes: string[]): boolean {
+    return actionTypes.map((actionType: string) => errorState[actionType]).filter(Boolean).length > 0;
+  }
+}
+
+export const selectRawErrors: ParametricSelector<IStore, string[], IErrorState> = createSelector(
+  (state: IStore) => state.error,
+  (state: IStore, actionTypes: string[]) => actionTypes,
+  ErrorSelector.selectRawErrors
+);
+
+export const selectErrorText: ParametricSelector<IStore, string[], string> = createSelector(
+  (state: IStore) => state.error,
+  (state: IStore, actionTypes: string[]) => actionTypes,
+  ErrorSelector.selectErrorText
+);
+
+export const hasErrors: ParametricSelector<IStore, string[], boolean> = createSelector(
+  (state: IStore) => state.error,
+  (state: IStore, actionTypes: string[]) => actionTypes,
+  ErrorSelector.hasErrors
+);

src/selectors/requesting/RequestingSelector.ts

@@ -0,0 +1,15 @@
+import { createSelector, ParametricSelector } from 'reselect';
+import IRequestingState from '../../stores/requesting/models/IRequestingState';
+import IStore from '../../models/IStore';
+
+export class RequestingSelector {
+  public static selectRequesting(requestingState: IRequestingState, actionTypes: string[]): boolean {
+    return actionTypes.some((actionType: string) => requestingState[actionType]);
+  }
+}
+
+export const selectRequesting: ParametricSelector<IStore, string[], boolean> = createSelector(
+  (state: IStore) => state.requesting,
+  (state: IStore, actionTypes: string[]) => actionTypes,
+  RequestingSelector.selectRequesting
+);

src/stores/error/ErrorAction.ts

@@ -0,0 +1,15 @@
+import IAction from '../../models/IAction';
+import ActionUtility from '../../utilities/ActionUtility';
+
+export default class ErrorAction {
+  public static readonly CLEAR_ALL: string = 'ErrorAction.CLEAR_ALL';
+  public static readonly REMOVE: string = 'ErrorAction.REMOVE';
+
+  public static removeById(id: string): IAction<string> {
+    return ActionUtility.createAction(ErrorAction.REMOVE, id);
+  }
+
+  public static clearAll(): IAction<undefined> {
+    return ActionUtility.createAction(ErrorAction.CLEAR_ALL);
+  }
+}

src/stores/error/ErrorReducer.ts

@@ -0,0 +1,67 @@
+/*
+ * Note: This reducer breaks convention on how reducers should be setup.
+ */
+import IErrorState from './models/IErrorState';
+import IAction from '../../models/IAction';
+import ErrorAction from './ErrorAction';
+import HttpErrorResponseModel from '../../models/HttpErrorResponseModel';
+
+export default class ErrorReducer {
+  public static readonly initialState: IErrorState = {};
+
+  public static reducer(state: IErrorState = ErrorReducer.initialState, action: IAction<any>): IErrorState {
+    const { type, error, payload } = action;
+
+    /*
+     * Removes a specific error by it's id.
+     */
+    if (type === ErrorAction.REMOVE) {
+      return Object.entries(state).reduce((newState: object, [key, value]: [string, HttpErrorResponseModel]) => {
+        if (value.id !== payload) {
+          newState[key] = value;
+        }
+
+        return newState;
+      }, {});
+    }
+
+    /*
+     * Removes all the stored errors.
+     */
+    if (type === ErrorAction.CLEAR_ALL) {
+      return ErrorReducer.initialState;
+    }
+
+    /*
+     * If the action type has the key word 'REQUEST_' and not '_FINISHED' then we
+     * want to remove the old error because there is a new request happening.
+     */
+    const isStartRequestType: boolean = [type.includes('REQUEST_') === true, type.includes('_FINISHED') === false].every(Boolean);
+
+    if (isStartRequestType === true) {
+      return Object.entries(state).reduce((newState: object, [key, value]: [string, HttpErrorResponseModel]) => {
+        if (key !== `${type}_FINISHED`) {
+          newState[key] = value;
+        }
+
+        return newState;
+      }, {});
+    }
+
+    /*
+     * If the action type has the key word '_FINISHED' we use the type as the key value
+     * for the error.
+     */
+    const isFinishedRequestType: boolean = type.includes('_FINISHED');
+    const isError: boolean = [isFinishedRequestType, error].every(Boolean);
+
+    if (isError === false) {
+      return state;
+    }
+
+    return {
+      ...state,
+      [type]: payload!,
+    };
+  }
+}

src/stores/error/models/IErrorState.ts

@@ -0,0 +1,5 @@
+import HttpErrorResponseModel from '../../../models/HttpErrorResponseModel';
+
+export default interface IErrorState {
+  readonly [key: string]: HttpErrorResponseModel;
+}

src/stores/requesting/RequestingReducer.ts

@@ -0,0 +1,29 @@
+/*
+ * Note: This reducer breaks convention on how reducers should be setup.
+ */
+import IRequestingState from './models/IRequestingState';
+import IAction from '../../models/IAction';
+
+export default class RequestingReducer {
+  public static readonly initialState: IRequestingState = {};
+
+  public static reducer(state: IRequestingState = RequestingReducer.initialState, action: IAction<any>): IRequestingState {
+    // We only take actions that include 'REQUEST_' in the type.
+    const isRequestType: boolean = action.type.includes('REQUEST_');
+
+    if (isRequestType === false) {
+      return state;
+    }
+
+    // Remove the string '_FINISHED' from the action type so we can use it as the key on the state.
+    const [requestName] = action.type.split('_FINISHED');
+    // If the action type includes '_FINISHED'. The boolean value will be false. Otherwise we
+    // assume it is a starting request and will be set to true.
+    const isFinishedRequestType: boolean = action.type.includes('_FINISHED');
+
+    return {
+      ...state,
+      [requestName]: isFinishedRequestType === false,
+    };
+  }
+}

src/stores/requesting/models/IRequestingState.ts

@@ -0,0 +1,3 @@
+export default interface IRequestingState {
+  readonly [key: string]: boolean;
+}

src/stores/rootReducer.ts

@@ -3,9 +3,13 @@ import { connectRouter } from 'connected-react-router';
 import { History } from 'history';
 import IStore from '../models/IStore';
 import ShowReducer from './show/ShowReducer';
+import RequestingReducer from './requesting/RequestingReducer';
+import ErrorReducer from './error/ErrorReducer';
 
 export default (history: History): Reducer<IStore> => {
   const reducerMap: ReducersMapObject<IStore> = {
+    error: ErrorReducer.reducer,
+    requesting: RequestingReducer.reducer,
     router: connectRouter(history) as any,
     show: ShowReducer.reducer,
   };