Status Messages

Status messages is the folder labelled messages. It contains the logic for setting up status messages, often used for notifications to the end user.

For any dependencies see here. You will need to add the messageReducer reducer to your store.

To use Status Messages as a standalone, you will need to import the Message container located in:

/message/container/Message.jsx

And simply add the following to where you want the message to appear (typically under the Navbar):

<Message/>

Once having done so, whenever you need to set a message status you simply need to import setMessageWithTimeout(msg, type)where msg is the message to be displayed, and the type is one of(danger, success, warning, info).

Note: that setMessageWithTimeoutis a dispatch and before using it you will need to ensure the calling class is connected to your store and the dispatch is mapped to a prop.

Example

An example use case could be that you would like to display a notification upon a successful GET request, and an error message if the HTTP request failed, one could do this like so:

//productActions.jsx
export function handleGETProducts(){
  const url = /get/the/products;
  return (dispatch) => {
    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: function(result){
        dispatch(setMessage('Successfully retrieved information from server', "success"));
      },
      error: function(){
        dispatch(setMessage('Could not successfully retrieve information from server', "danger"));
      },
    });
  };
}