Message example

In this example we'll display a notification event after a button is pressed on the main page of our app.

You can find the relevant code in the example-modal branch here.

If you are using the app container as shown in the quickstart then the Message component has already been imported and situated under the Navbar, you can see this within the App Container code here:

<Router>
    <div className="app">
        {this._createNavBar()}
        <Message/>
        {this._createSwitches()}
    </div>
</Router>

If you are not using the app container you'll need to similarly import and place the <Message/> component in your page at a suitable location.

This will be our button that we'll place in our render method:

<button className="btn btn-primary m-r-8" onClick={onClickHandler}>
  Click me!
</button>

The onClickHandler will be a function that dispatches an action provided by the message library called setMessageWithTimeout. As this is an action we will first need to connect our main_page class to our redux store and map the dispatch to the prop. Let's do that by first adding the reducer to our store.js:

store.js:

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from 'redux-thunk';

import messageReducer from "./pf-lib/message/messageReducer";
import modalReducer from "./pf-lib/modal/modalReducer";

export default createStore(
  combineReducers({
    modalReducer,
    messageReducer, // the store required by the message utility
  }),
    applyMiddleware(thunk)
);

Then we'll map the dispatch to props and connect the component to the store:

import React, { Component } from "react";
import PropTypes from "prop-types";

// Import connect and set message action
import { connect } from 'react-redux';
import { setMessageWithTimeout } from '../pf-lib/message/messageActions.js'

export class main_page extends Component {
  render() {
  ....
  }
}

// Map the action to a prop
const mapDispatchToProps = (dispatch) => {
  return {
    setMessageWithTimeout: (msg, status) => {
      dispatch(setMessageWithTimeout(msg, status))
    },
  }
};

// Connect component to store, we don't have a state to map so we pass null 
export default connect(null, mapDispatchToProps)(main_page);

Now we are ready to create our onClickHandler:

const onClickHandler = () => {
  this.props.setMessageWithTimeout('You pressed a button.', 'success')
};

setMessageWithTimeout takes the message to be displayed, and the type of message (success, danger, warning, info), and will dispatch the action when used in this manner to display the component.

The final main_page should now look like this:

main_page.jsx

import React, { Component } from "react";
import { setMessageWithTimeout } from '../pf-lib/message/messageActions.js'
import PropTypes from "prop-types";
import { connect } from 'react-redux';

export class main_page extends Component {
  render() {
    const onClickHandler = () => {
      this.props.setMessageWithTimeout('You pressed a button.', 'success')
    };

    return (
      <div className="col col-cards-pf container-cards-pf fader">
        <div className="cards col-xs-10 col-md-8 ">
          <div className="card-pf card-pf-accented">
            <div className="card-pf-heading c">
              <h2 className="card-pf-title">
                Main Page!
              </h2>
              <div className="card-pf-footer">
                <button className="btn btn-primary m-r-8" onClick={onClickHandler}>
                  Click me!
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setMessageWithTimeout: (msg, status) => {
      dispatch(setMessageWithTimeout(msg, status))
    },
  }
};

export default connect(null, mapDispatchToProps)(main_page);

The code results in the following display, the colors will vary based on the level of warning passed in to setMessageWithTimeout: