ApplicationError.jsx

/* this assumes you have a div, somewhere near
your containing div that is setup like this:

const hiddenMaskStyles = {
  display: 'none',
};

const errorMaskStyles = {
  minHeight: '560px',
  height: '560px',
  position: 'absolute',
  backdropFilter: 'blur(3px) brightness(60%)',
  width: '100%',
  zIndex: 1,
};

<div style={isError ? errorMaskStyles : hiddenMaskStyles} />
*/

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  mutateApp,
} from '../redux/actions';

import { hashCode } from '../lib/hash';
import { isNullish } from '../lib/is-nullish';

const errorStyles = {
  position: 'absolute',
  width: '93%',
  top: '210px',
  zIndex: 2,
};

const errorMessageTxt = {
  fontSize: '11px',
};

const errorMessageTitle = {
  fontWeight: 'bold',
  marginBottom: '5px',
};

const EventNameText = ({ eventName = null }) => {
  if (eventName === null) return '';
  return (
    <span>
      &nbsp;
      from event
      &nbsp;
      <strong>{eventName}</strong>
    </span>
  );
};

const ErrorText = ({ errorMessage = null, eventName = null, id = null }) => (
  <div id={`error-text-id-${id}`} key={`error-text-key-${id}`}>
    <span>{errorMessage}</span>
    {eventName !== null ? <EventNameText eventName={eventName} /> : ''}
  </div>
);

const FocusError = ({ eventName, errorMessage, handleError, id }) => (
  <div className="bs-well" style={errorStyles} id={`focus-error-id-${id}`} key={`focus-error-key-${id}`}>
    <div className="row">
      <div className="phone-eightcol tablet-eightcol eightcol col">
        <div className="text-notice" style={errorMessageTitle}>Hold on, there was an error:</div>
        <div className="text-muted" style={errorMessageTxt}>
          <ErrorText errorMessage={errorMessage} eventName={eventName} id={id} />
        </div>
      </div>
      <div className="phone-fourcol tablet-fourcol fourcol col">
        <button type="button" className="bs-btn inverted full-width" onClick={handleError}>Okay, got it</button>
      </div>
    </div>
  </div>
);

const ToastError = ({
  eventName,
  errorMessage,
  handleError,
  duration,
  id,
}) => {
  setTimeout(() => handleError(), duration);
  return (
    <div className="bs-well" style={errorStyles} id={`toast-error-id-${id}`} key={`toast-error-key-${id}`}>
      <div className="row">
        <div className="col">
          <div className="text-notice" style={errorMessageTitle}>Uh oh, just a second...</div>
          <div className="text-muted" style={errorMessageTxt}>
            <ErrorText errorMessage={errorMessage} eventName={eventName} id={id} />
          </div>
        </div>
      </div>
    </div>
  );
};

class ApplicationError extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.mutateApp = props.mutateApp;
    this.handleError = this.handleError.bind(this);
  }

  handleError() {
    this.mutateApp({
      isError: false,
      errorMessage: null,
      eventName: null,
      isToast: false,
      duration: 3000,
    });
  }

  render() {
    const { application = {} } = this.props;
    const {
      isError = false,
      errorMessage = null,
      isToast = false,
      eventName = null,
      duration = 3000,
    } = application;
    const id = errorMessage ? hashCode(errorMessage) : '';
    if (isError === false || isNullish(errorMessage)) return '';
    return isToast === true
      ? <ToastError duration={duration} eventName={eventName} errorMessage={errorMessage} handleError={this.handleError} id={id} /> // eslint-disable-line
      : <FocusError eventName={eventName} errorMessage={errorMessage} handleError={this.handleError} id={id} />;  // eslint-disable-line
  }
}

const mapStateToProps = (state) => state;

export default connect(mapStateToProps, {
  mutateApp,
})(ApplicationError);