dce-reactkit 2.0.5 → 2.0.6

package/lib/components/AppWrapper.tsx

@@ -0,0 +1,181 @@
+/**
+ * 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, useEffect } from 'react';
+
+// Import shared components
+import ErrorBox from './ErrorBox';
+
+// Import helpers
+import { setSessionExpiryHandler } from '../helpers/visitServerEndpoint';
+
+// 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,
+  // Custom session expired message
+  sessionExpiredMessage?: string,
+};
+
+/*------------------------------------------------------------------------*/
+/*                             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): React.ReactElement => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    children,
+    dark,
+    sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Fatal error
+  const [fatalErrorMessage, setFatalErrorMessageInner] = useState(null);
+  setFatalErrorMessage = setFatalErrorMessageInner;
+  const [fatalErrorCode, setFatalErrorCodeInner] = useState(null);
+  setFatalErrorCode = setFatalErrorCodeInner;
+
+  // Session expired
+  const [sessionHasExpired, setSessionHasExpired] = useState(false);
+
+  /*------------------------------------------------------------------------*/
+  /*                           Lifecycle Functions                          */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Mount
+   * @author Gabe Abrams
+   */
+  useEffect(
+    () => {
+      // Add session expired handler
+      setSessionExpiryHandler(() => {
+        // Session expired!
+        setSessionHasExpired(true);
+      });
+    },
+    [],
+  );
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Show error
+  if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
+    // Re-encapsulate in an error
+    const error = (
+      sessionHasExpired
+        ? new ErrorWithCode(
+          fatalErrorMessage,
+          fatalErrorCode,
+        )
+        : new ErrorWithCode(
+          sessionExpiredMessage,
+          ReactKitErrorCode.SessionExpired,
+        )
+    );
+
+    // Build error screen
+    return (
+      <div
+        style={{
+          display: 'block',
+          width: '100vw',
+          minHeight: '100vh',
+          paddingTop: '10rem',
+          backgroundColor: (
+            dark
+              ? '#222'
+              : '#fff'
+          ),
+        }}
+      >
+        <ErrorBox
+          title={(
+            sessionHasExpired
+              ? 'Session Expired'
+              : undefined
+          )}
+          error={error}
+        />
+      </div>
+    );
+  }
+
+  // Show the app itself
+  return (
+    <>
+      {children}
+    </>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default AppWrapper;

package/lib/components/ErrorBox.tsx

@@ -0,0 +1,124 @@
+/**
+ * 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,
+  // Customized title of error box
+  title?: string,
+  // Handler for close,
+  onClose?: () => void,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const ErrorBox: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    error,
+    title = 'An Error Occurred',
+    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"
+        />
+        {title}
+      </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/lib/components/LoadingSpinner.tsx

@@ -0,0 +1,105 @@
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+
+// Import FontAwesome Icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+
+const style = `
+/* Blips */
+.LoadingSpinner-blip-1,
+.LoadingSpinner-blip-2,
+.LoadingSpinner-blip-3,
+.LoadingSpinner-blip-4 {
+  font-size: 25px;
+  opacity: 0.6;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+/* First Blip */
+.LoadingSpinner-blip-1 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+}
+
+/* Second Blip */
+.LoadingSpinner-blip-2 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+/* Third Blip */
+.LoadingSpinner-blip-3 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.2s;
+}
+
+/* Fourth Blip */
+.LoadingSpinner-blip-4 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.3s;
+}
+
+/* Pop Animation for Each Blip */
+@keyframes LoadingSpinner-pop-animation {
+  0%  {
+    transform: scale(1.0);
+  }
+  10% {
+    transform: scale(1.5);
+  }
+  30% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+`;
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const LoadingSpinner = () => {
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  // Add all four blips to a container
+  return (
+    <div className="text-center LoadingSpinner LoadingSpinner-container">
+      <style>{style}</style>
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-1 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-2 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-3 me-1"
+      />
+      <FontAwesomeIcon
+        icon={faCircle}
+        className="LoadingSpinner-blip-4"
+      />
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default LoadingSpinner;