dce-reactkit 2.0.10 → 3.0.0-beta.1

package/src/components/AppWrapper.tsx

@@ -1,189 +0,0 @@
-/**
- * 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;
-let setFatalErrorTitle: (title: string) => void;
-
-/**
- * Show a fatal error message
- * @author Gabe Abrams
- * @param error the error to show
- * @param [errorTitle] title of the error box
- */
-export const showFatalError = (
-  error: any,
-  errorTitle: string = 'An Error Occurred',
-) => {
-  // 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);
-  setFatalErrorTitle(errorTitle);
-};
-
-/*------------------------------------------------------------------------*/
-/*                                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;
-  const [fatalErrorTitle, setFatalErrorTitleInner] = useState(null);
-  setFatalErrorTitle = setFatalErrorTitleInner;
-
-  // 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'
-              : fatalErrorTitle
-          )}
-          error={error}
-        />
-      </div>
-    );
-  }
-
-  // Show the app itself
-  return (
-    <>
-      {children}
-    </>
-  );
-};
-
-/*------------------------------------------------------------------------*/
-/*                                 Wrap Up                                */
-/*------------------------------------------------------------------------*/
-
-// Export component
-export default AppWrapper;

package/src/components/ErrorBox.tsx

@@ -1,124 +0,0 @@
-/**
- * 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/src/components/LoadingSpinner.tsx

@@ -1,105 +0,0 @@
-/**
- * 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;