Components/NotificationHandler/NotificationHandler.jsx

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";
import { connect } from "react-redux";
import Alert from "@material-ui/lab/Alert";
import PropTypes from "prop-types";

/**
 * The notification handler props
 * @typedef NotificationHandlerProps
 * @type {props}
 * @property {string} notificationMessage Obtained from the store, the message to be displayed. Can be any valid string.
 * @property {string} notificationType Obtained from the store, the message type (error, success, info, etc...)
 * @category Props
 */

/**
 * Handles all application notification shown to the user
 * @category NotificationHandler
 */
class NotificationHandler extends React.Component {
    /**
     * Default constructor. visibility is set to false by default. Controlled through state property "open"
     * @param {...NotificationHandlerProps} props Props received so that the component can function properly.
     * @category NotificationHandler
     */
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

    /**
     * If a new notification message is received, show it accordingly.
     * @category NotificationHandler
     */
  componentDidUpdate(prevProps) {
    const { notificationMessage } = this.props;
    if (
      notificationMessage &&
      notificationMessage !== prevProps.notificationMessage
    ) {
      this.handleOpen();
    }
  }

    /**
     * Show the notification to the view.
     * @category NotificationHandler
     */
  handleOpen = () => {
    this.setState({
      open: true
    });
  };

    /**
     * Hide the notification from the view.
     * @category NotificationHandler
     */
  handleClose = () => {
    this.setState({
      open: false
    });
  };

    /**
     * Render the notification to the dom.
     * @category NotificationHandler
     */
  render() {
    const { notificationMessage, notificationType } = this.props;
    const { open } = this.state;
    return (
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={open}
        autoHideDuration={6000}
        onClose={this.handleClose}
      >
        <Alert
          onClose={this.handleClose}
          severity={notificationType}
          elevation={6}
          variant="filled"
        >
          {notificationMessage}
        </Alert>
      </Snackbar>
    );
  }
}

const mapStateToProps = state => {
  return {
    notificationMessage: state.MapReducer.notificationMessage,
    notificationType: state.MapReducer.notificationType
  };
};

NotificationHandler.propTypes = {
  notificationMessage: PropTypes.string.isRequired,
  notificationType: PropTypes.string.isRequired
};

export default connect(mapStateToProps)(NotificationHandler);