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

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

import * as React from 'react';
import Divider from '@appbuckets/react-ui/Divider';
import Header from '@appbuckets/react-ui/Header';
import Message from '@appbuckets/react-ui/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.useMemo(
    function () {
      return (
        viewErrorExtra &&
        React.createElement(
          React.Fragment,
          null,
          React.createElement(Divider, {
            danger: true,
            content: statusCode,
            textAlign: 'left',
          }),
          url &&
            React.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React.createElement('b', { style: { display: 'block' } }, 'URL'),
              React.createElement('p', null, method || 'GET', ' @ ', url)
            ),
          response &&
            React.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React.createElement(
                'b',
                { style: { display: 'block' } },
                'RESPONSE'
              ),
              React.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.createElement(
              'div',
              { className: 'mt-4 has-text-left' },
              React.createElement(
                'b',
                { style: { display: 'block' } },
                'STACK'
              ),
              React.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.createElement(QuerySuspenseError, {
      statusCode: 500,
      error: props.Error.name,
      message: props.Error.message,
      stack: props.Error.stack,
    });
  }
  // ----
  // Component Render
  // ----
  return React.createElement(
    Message,
    { appearance: 'danger' },
    React.createElement(Header, {
      content: error || 'Error',
      subheader: message || 'server-error',
    }),
    extraContent
  );
};
QuerySuspenseError.displayName = 'QuerySuspenseError';

export { QuerySuspenseError as default };