dce-reactkit 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/components/AppWrapper.tsx

@@ -0,0 +1,127 @@
+/**
+ * A wrapper for the entire React app that adds global functionality like
+ *   handling for fatal error messages
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useState } from 'react';
+
+// Import shared components
+import ErrorBox from './ErrorBox';
+
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+// Import custom errors
+import ErrorWithCode from '../errors/ErrorWithCode';
+
+/*------------------------------------------------------------------------*/
+/*                                  Props                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // The entire app
+  children: React.ReactNode,
+  // True if this app is a dark-themed app
+  dark?: boolean,
+};
+
+/*------------------------------------------------------------------------*/
+/*                             Static Helpers                             */
+/*------------------------------------------------------------------------*/
+
+// Stored copies of setters
+let setFatalErrorMessage: (message: string) => void;
+let setFatalErrorCode: (code: string) => void;
+
+/**
+ * Show a fatal error message
+ * @author Gabe Abrams
+ * @param error the error to show
+ */
+export const showFatalError = (error: any) => {
+  // Determine message and code
+  const message: string = (
+    typeof error === 'string'
+      ? error.trim()
+      : String(error.message ?? 'An unknown error occurred.')
+  );
+  const code: string = (
+    typeof error === 'string'
+      ? ReactKitErrorCode.NoCode
+      : String(error.code ?? ReactKitErrorCode.NoCode)
+  );
+
+  // Handle case where app hasn't loaded
+  if (!setFatalErrorMessage || !setFatalErrorCode) {
+    return alert(`An error has occurred: ${message} (code: ${code}). Please contact support.`);
+  }
+
+  // Use setters
+  setFatalErrorMessage(message);
+  setFatalErrorCode(code);
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const AppWrapper = (props: Props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    children,
+    dark,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Fatal error
+  const [fatalErrorMessage, setFatalErrorMessageInner] = useState(null);
+  setFatalErrorMessage = setFatalErrorMessageInner;
+  const [fatalErrorCode, setFatalErrorCodeInner] = useState(null);
+  setFatalErrorCode = setFatalErrorCodeInner;
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Show error
+  if (fatalErrorMessage || fatalErrorCode) {
+    // Re-encapsulate in an error
+    const error = new ErrorWithCode(
+      fatalErrorMessage,
+      fatalErrorCode,
+    );
+
+    return (
+      <div
+        style={{
+          display: 'block',
+          width: '100vw',
+          minHeight: '100vh',
+          paddingTop: '10rem',
+        }}
+      >
+        <ErrorBox
+          error={error}
+        />
+      </div>
+    );
+  }
+
+  // Show the app itself
+  return children;
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default AppWrapper;

package/src/components/ErrorBox.tsx

@@ -0,0 +1,121 @@
+/**
+ * Displays an error
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Error to display
+  error: any,
+  // Handler for close,
+  onClose?: () => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ErrorBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    error,
+    onClose,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Determine error text
+  const errorText: string = (
+    typeof error === 'string'
+      ? error.trim()
+      : String(error.message || 'An unknown error occurred. Please contact support.')
+  );
+
+  // Error code box
+  let errorCodeBox;
+  if (error && (error as any).code) {
+    errorCodeBox = (
+      <span>
+        {' '}
+        <span
+          style={{
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            paddingLeft: '3px',
+            paddingRight: '3px',
+            color: '#DC4150',
+            fontVariant: 'small-caps',
+            fontSize: '80%',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          code:
+          {' '}
+          {String((error as any).code ?? ReactKitErrorCode.NoCode).toUpperCase()}
+        </span>
+      </span>
+    );
+  }
+
+  // Main UI
+  return (
+    <div
+      className="alert alert-danger text-center"
+      style={{
+        maxWidth: '650px',
+        margin: 'auto',
+      }}
+    >
+      <h4 className="mb-1">
+        <FontAwesomeIcon
+          icon={faExclamationTriangle}
+          className="me-2"
+        />
+        An Error Occurred
+      </h4>
+      <div>
+        {errorText}
+        {errorCodeBox}
+      </div>
+      {onClose && (
+        <div className="mt-2">
+          <button
+            type="button"
+            className="btn btn-light"
+            aria-label="dismiss error and close this activity or view"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default ErrorBox;

package/src/helpers/showFatalError.tsx

@@ -0,0 +1,3 @@
+import { showFatalError } from '../components/AppWrapper';
+
+export default showFatalError;