TBC Common React App Error Modal

Common Error Modal for all Trinidad Benham React apps

Install

npm install --save tbc-common-error

Redux Store

In app's Actions.js file:

import * as errorActions from "tbc-common-error/dist/Redux/ErrorActions";

Then add "errorActions" to actions object.

In app's configureStore.js file:

import errorState from "tbc-common-error/dist/Redux/errorsReducer";

Then add "errorState" to combineReducers object.

In action files that should dispatch "setError":

import { setError } from "tbc-common-error/dist/Redux/ErrorActions";

Error Modal Component:

In component toward top of hierarchy with access to state ("errorState", specifically):

import ErrorModalContainer from "tbc-common-error/dist/Component/ErrorModalContainer";

<ErrorModalContainer errorState={errorState} setError={setError} />

Where errorState is errorState, and setError comes from error actions.

Error Modal will sit on top of any children/sibling components.

Activating/deactivating Error Modal

To open the Error Modal, dispatch setError({message}) where {message} is the error message.

Error modal has its own dismiss button.

Example:

const API_call = () => dispatch => { // API call .then(success => // success) .catch(error => { dispatch(setError(error.message)) }); };

PropTypes

import * as errorTypes from "tbc-common-error/dist/Types/types";

Component.propTypes = {
  errorState: errorTypes.errorState.types
};

Component.defaultProps = {
  errorState: errorTypes.errorState.defaults
};

ActionTypes

For some components (testing, in particular), you may need to import ActionTypes from the Loading module. Use the following:

import { SET_ERROR } from "tbc-common-error/dist/Redux/ActionTypes";

Required NPM Packages

npm install --save bootstrap reactstrap @material-ui/core lodash

Testing

For any unit test file that deep renders ("mounts") this imported component, add the following:

jest.mock("tbc-common-error/dist/Component/ErrorModalContainer", () => "div");