TBC Common React App Loaders

Common Loaders for all Trinidad Benham React apps

Install

npm install --save tbc-common-loader

Redux Store

In Actions.js file:

import * as loadingActions from "tbc-common-loader/dist/Redux/LoadingActions";

Then add "loadingActions" to actions object.

In configureStore.js file:

import loadingState from "tbc-common-loader/dist/Redux/loadingStateReducer";

Then add "loadingState" to combineReducers object.

In action files that should dispatch "setLoading" or "setAltLoading":

import { setLoading, setAltLoading } from "tbc-common-loader/dist/Redux/LoadingActions";

Loading Spinner Component:

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

import Loading from "tbc-common-loader/dist/Component/Loading";

<Loading loadingState={loadingState} />

Component is a modal, so will sit on top of any children components.

loadingState here refers to the actual Redux store state (provided as part of the module)

Loading Progress Bar Component:

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

import AltLoader from "tbc-common-loader/dist/Component/AltLoader";

<AltLoader loadingState={loadingState} />

Component is a progress bar, so should be placed where it will display above or below the UI.

loadingState here refers to the actual Redux store state (provided as part of the module)

Activating/deactivating Loader

To enable loading, dispatch setLoading({message}) or setAltLoading({message}) where {message} is the loading message you wish to display. If no message is required, use Boolean true instead.

To disable loading, dispatch setLoading(false) or setAltLoading(false).

NOTE: Loading state is incremental, meaning you can call setLoading/setAltLoading multiple times with multiple messages; the latest message will be displayed, and then when setLoading/setAltLoading is set to false, the last message will removed.

Example: You are loading two API calls back-to-back. In order to prevent flickering with the loading modal, the calls should be made as follows:

const API_one = () => { dispatch(setLoading("API Call One")); ... .then(() => { // when API call is done dispatch(setLoading(false)); }) };

const API_two = () => { dispatch(setLoading("API Call Two")); ... .then(() => { // when API call is done dispatch(setLoading(false)); }) };

When these two calls are made back to back, the loading message will appear with "API Call One" first, replaced by "API Call Two". Then, when the first API call is complete, the "...Two" message will be removed, revealing "API Call One". When the second call is complete, then the "...One" message will be removed, and without any messages, the loading modal will vanish.

PropTypes

import * as loadingTypes from "tbc-common-loader/dist/Types/types";

Component.propTypes = {
  loadingState: loadingTypes.loadingState.types
};

Component.defaultProps = {
  loadingState: loadingTypes.loadingState.defaults
};

ActionTypes

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

import { SET_LOADING, SET_ALT_LOADING } from "tbc-common-loader/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-loader/dist/Component/Loading", () => "div"); jest.mock("tbc-common-loader/dist/Component/AltLoader", () => "div");