@appbuckets/react-ui-smart-components/QuerySuspenseError/QuerySuspenseError.js

UI Extended Components that work with @appbuckets/react-client and @appbuckets/react-ui

'use strict';

var React = require('react');
var Divider = require('@appbuckets/react-ui/Divider');
var Header = require('@appbuckets/react-ui/Header');
var Message = require('@appbuckets/react-ui/Message');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var Divider__default = /*#__PURE__*/ _interopDefaultLegacy(Divider);
var Header__default = /*#__PURE__*/ _interopDefaultLegacy(Header);
var Message__default = /*#__PURE__*/ _interopDefaultLegacy(Message);

var QuerySuspenseError = function (props) {
  // ----
  // Error deconstruct
  // ----
  var error = props.error,
    method = props.method,
    message = props.message,
    response = props.response,
    statusCode = props.statusCode,
    stack = props.stack,
    url = props.url;
  // ----
  // Internal Data
  // ----
  var viewErrorExtra = process.env.NODE_ENV === 'development';
  // ----
  // Memoized Data
  // ----
  var extraContent = React__namespace.useMemo(
    function () {
      return (
        viewErrorExtra &&
        React__namespace.createElement(
          React__namespace.Fragment,
          null,
          React__namespace.createElement(Divider__default['default'], {
            danger: true,
            content: statusCode,
            textAlign: 'left',
          }),
          url &&
            React__namespace.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React__namespace.createElement(
                'b',
                { style: { display: 'block' } },
                'URL'
              ),
              React__namespace.createElement(
                'p',
                null,
                method || 'GET',
                ' @ ',
                url
              )
            ),
          response &&
            React__namespace.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React__namespace.createElement(
                'b',
                { style: { display: 'block' } },
                'RESPONSE'
              ),
              React__namespace.createElement(
                'pre',
                {
                  className: 'has-text-danger has-font-bold',
                  style: {
                    padding: 12,
                    borderRadius: 5,
                    whiteSpace: 'pre-wrap',
                    backgroundColor: 'rgba(0,0,0,.05)',
                  },
                },
                JSON.stringify(response, null, 2)
              )
            ),
          stack &&
            React__namespace.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React__namespace.createElement(
                'b',
                { style: { display: 'block' } },
                'STACK'
              ),
              React__namespace.createElement(
                'p',
                { style: { whiteSpace: 'pre-wrap' } },
                stack
              )
            )
        )
      );
    },
    [method, response, stack, statusCode, url, viewErrorExtra]
  );
  // ----
  // Rewrite error object if exists
  // ----
  if (props.Error instanceof Error) {
    return React__namespace.createElement(QuerySuspenseError, {
      statusCode: 500,
      error: props.Error.name,
      message: props.Error.message,
      stack: props.Error.stack,
    });
  }
  // ----
  // Component Render
  // ----
  return React__namespace.createElement(
    Message__default['default'],
    { appearance: 'danger' },
    React__namespace.createElement(Header__default['default'], {
      content: error || 'Error',
      subheader: message || 'server-error',
    }),
    extraContent
  );
};
QuerySuspenseError.displayName = 'QuerySuspenseError';

module.exports = QuerySuspenseError;