dce-reactkit 2.0.3 → 2.0.4

package/lib/helpers/visitServerEndpoint.js

@@ -39,13 +39,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setSessionExpiryHandler = void 0;
 // Initialize caccl
 var client_1 = require("caccl/client");
 // Import custom error
 var ErrorWithCode_1 = __importDefault(require("../errors/ErrorWithCode"));
 var ReactKitErrorCode_1 = __importDefault(require("../types/ReactKitErrorCode"));
+/*------------------------------------------------------------------------*/
+/*                                Listener                                */
+/*------------------------------------------------------------------------*/
+// Handler for session expiry
+var sessionExpiryHandler;
+// Keep track of whether or not session expiry has already been handled
+var sessionAlreadyExpired = false;
 /**
- * Visit an endpoint on the server
+ * Set the session expiry handler
+ * @author Gabe Abrams
+ * @param handler new handler to use when session expires
+ */
+var setSessionExpiryHandler = function (handler) {
+    sessionExpiryHandler = handler;
+};
+exports.setSessionExpiryHandler = setSessionExpiryHandler;
+/*------------------------------------------------------------------------*/
+/*                                  Main                                  */
+/*------------------------------------------------------------------------*/
+/**
+ * Visit an endpoint on the server [for client only]
  * @author Gabe Abrams
  * @param opts object containing all arguments
  * @param opts.path - the path of the server endpoint
@@ -68,12 +88,43 @@ var visitServerEndpoint = function (opts) { return __awaiter(void 0, void 0, voi
                 if (!response || !response.body) {
                     throw new ErrorWithCode_1.default('We didn\'t get a response from the server. Please check your internet connection.', ReactKitErrorCode_1.default.NoResponse);
                 }
-                if (!response.body.success) {
-                    // Other errors
-                    throw new ErrorWithCode_1.default((response.body.message
-                        || 'An unknown error occurred. Please contact an admin.'), (response.body.code
-                        || ReactKitErrorCode_1.default.NoCode));
+                if (!!response.body.success) return [3 /*break*/, 6];
+                if (!(response.body.code === ReactKitErrorCode_1.default.SessionExpired)) return [3 /*break*/, 5];
+                if (!sessionAlreadyExpired) return [3 /*break*/, 3];
+                // Never return (browser is already reloading)
+                return [4 /*yield*/, new Promise(function () {
+                        // Promise that never returns
+                    })];
+            case 2:
+                // Never return (browser is already reloading)
+                _a.sent();
+                _a.label = 3;
+            case 3:
+                sessionAlreadyExpired = true;
+                // Show session expiration message
+                if (sessionExpiryHandler) {
+                    // Use handler
+                    sessionExpiryHandler();
+                }
+                else {
+                    // Fallback to alert
+                    // eslint-disable-next-line no-alert
+                    alert('Your session has expired. Please start over.');
                 }
+                // Never return (don't continue execution)
+                return [4 /*yield*/, new Promise(function () {
+                        // Promise that never returns
+                    })];
+            case 4:
+                // Never return (don't continue execution)
+                _a.sent();
+                _a.label = 5;
+            case 5: 
+            // Other errors
+            throw new ErrorWithCode_1.default((response.body.message
+                || 'An unknown error occurred. Please contact an admin.'), (response.body.code
+                || ReactKitErrorCode_1.default.NoCode));
+            case 6:
                 body = response.body.body;
                 // Return
                 return [2 /*return*/, body];

package/lib/helpers/visitServerEndpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"visitServerEndpoint.js","sourceRoot":"","sources":["../../src/helpers/visitServerEndpoint.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAAmB;AACnB,uCAA2C;AAE3C,sBAAsB;AACtB,0EAAoD;AACpD,iFAA2D;AAE3D;;;;;;;;GAQG;AACH,IAAM,mBAAmB,GAAG,UAC1B,IAIC;;;;oBAGgB,qBAAM,IAAA,oBAAW,EAAC;oBACjC,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;iBACpB,CAAC,EAAA;;gBAJI,QAAQ,GAAG,SAIf;gBAEF,oBAAoB;gBACpB,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;oBAC/B,MAAM,IAAI,uBAAa,CACrB,mFAAmF,EACnF,2BAAiB,CAAC,UAAU,CAC7B,CAAC;iBACH;gBACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE;oBAC1B,eAAe;oBACf,MAAM,IAAI,uBAAa,CACrB,CACE,QAAQ,CAAC,IAAI,CAAC,OAAO;2BAClB,qDAAqD,CACzD,EACD,CACE,QAAQ,CAAC,IAAI,CAAC,IAAI;2BACf,2BAAiB,CAAC,MAAM,CAC5B,CACF,CAAC;iBACH;gBAGO,IAAI,GAAK,QAAQ,CAAC,IAAI,KAAlB,CAAmB;gBAE/B,SAAS;gBACT,sBAAO,IAAI,EAAC;;;KACb,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}
+{"version":3,"file":"visitServerEndpoint.js","sourceRoot":"","sources":["../../src/helpers/visitServerEndpoint.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAAmB;AACnB,uCAA2C;AAE3C,sBAAsB;AACtB,0EAAoD;AACpD,iFAA2D;AAE3D,4EAA4E;AAC5E,4EAA4E;AAC5E,4EAA4E;AAE5E,6BAA6B;AAC7B,IAAI,oBAAgC,CAAC;AAErC,uEAAuE;AACvE,IAAI,qBAAqB,GAAG,KAAK,CAAC;AAElC;;;;GAIG;AACI,IAAM,uBAAuB,GAAG,UAAC,OAAmB;IACzD,oBAAoB,GAAG,OAAO,CAAC;AACjC,CAAC,CAAC;AAFW,QAAA,uBAAuB,2BAElC;AAEF,4EAA4E;AAC5E,4EAA4E;AAC5E,4EAA4E;AAE5E;;;;;;;;GAQG;AACH,IAAM,mBAAmB,GAAG,UAC1B,IAIC;;;;oBAGgB,qBAAM,IAAA,oBAAW,EAAC;oBACjC,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;iBACpB,CAAC,EAAA;;gBAJI,QAAQ,GAAG,SAIf;gBAEF,oBAAoB;gBACpB,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;oBAC/B,MAAM,IAAI,uBAAa,CACrB,mFAAmF,EACnF,2BAAiB,CAAC,UAAU,CAC7B,CAAC;iBACH;qBACG,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAtB,wBAAsB;qBAEpB,CAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,2BAAiB,CAAC,cAAc,CAAA,EAAvD,wBAAuD;qBAErD,qBAAqB,EAArB,wBAAqB;gBACvB,8CAA8C;gBAC9C,qBAAM,IAAI,OAAO,CAA2B;wBAC1C,6BAA6B;oBAC/B,CAAC,CAAC,EAAA;;gBAHF,8CAA8C;gBAC9C,SAEE,CAAC;;;gBAEL,qBAAqB,GAAG,IAAI,CAAC;gBAE7B,kCAAkC;gBAClC,IAAI,oBAAoB,EAAE;oBACxB,cAAc;oBACd,oBAAoB,EAAE,CAAC;iBACxB;qBAAM;oBACL,oBAAoB;oBAEpB,oCAAoC;oBACpC,KAAK,CAAC,8CAA8C,CAAC,CAAC;iBACvD;gBAED,0CAA0C;gBAC1C,qBAAM,IAAI,OAAO,CAA2B;wBAC1C,6BAA6B;oBAC/B,CAAC,CAAC,EAAA;;gBAHF,0CAA0C;gBAC1C,SAEE,CAAC;;;YAGL,eAAe;YACf,MAAM,IAAI,uBAAa,CACrB,CACE,QAAQ,CAAC,IAAI,CAAC,OAAO;mBAClB,qDAAqD,CACzD,EACD,CACE,QAAQ,CAAC,IAAI,CAAC,IAAI;mBACf,2BAAiB,CAAC,MAAM,CAC5B,CACF,CAAC;;gBAII,IAAI,GAAK,QAAQ,CAAC,IAAI,KAAlB,CAAmB;gBAE/B,SAAS;gBACT,sBAAO,IAAI,EAAC;;;KACb,CAAC;AAEF,kBAAe,mBAAmB,CAAC"}

package/lib/types/ParamType.d.ts

@@ -0,0 +1,17 @@
+/**
+ * API param types
+ * @author Gabe Abrams
+ */
+declare enum ParamType {
+    Boolean = "boolean",
+    BooleanOptional = "boolean-optional",
+    Float = "float",
+    FloatOptional = "float-optional",
+    Int = "int",
+    IntOptional = "int-optional",
+    JSON = "json",
+    JSONOptional = "json-optional",
+    String = "string",
+    StringOptional = "string-optional"
+}
+export default ParamType;

package/lib/types/ParamType.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * API param types
+ * @author Gabe Abrams
+ */
+var ParamType;
+(function (ParamType) {
+    ParamType["Boolean"] = "boolean";
+    ParamType["BooleanOptional"] = "boolean-optional";
+    ParamType["Float"] = "float";
+    ParamType["FloatOptional"] = "float-optional";
+    ParamType["Int"] = "int";
+    ParamType["IntOptional"] = "int-optional";
+    ParamType["JSON"] = "json";
+    ParamType["JSONOptional"] = "json-optional";
+    ParamType["String"] = "string";
+    ParamType["StringOptional"] = "string-optional";
+})(ParamType || (ParamType = {}));
+exports.default = ParamType;
+//# sourceMappingURL=ParamType.js.map

package/lib/types/ParamType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParamType.js","sourceRoot":"","sources":["../../src/types/ParamType.ts"],"names":[],"mappings":";;AAAA;;;GAGG;AACH,IAAK,SAWJ;AAXD,WAAK,SAAS;IACZ,gCAAmB,CAAA;IACnB,iDAAoC,CAAA;IACpC,4BAAe,CAAA;IACf,6CAAgC,CAAA;IAChC,wBAAW,CAAA;IACX,yCAA4B,CAAA;IAC5B,0BAAa,CAAA;IACb,2CAA8B,CAAA;IAC9B,8BAAiB,CAAA;IACjB,+CAAkC,CAAA;AACpC,CAAC,EAXI,SAAS,KAAT,SAAS,QAWb;AAED,kBAAe,SAAS,CAAC"}

package/lib/types/ReactKitErrorCode.d.ts

@@ -4,6 +4,10 @@
  */
 declare enum ReactKitErrorCode {
     NoResponse = "DRK1",
-    NoCode = "DRK2"
+    NoCode = "DRK2",
+    SessionExpired = "DRK3",
+    MissingParameter = "DRK4",
+    InvalidParameter = "DRK5",
+    WrongCourse = "DRK6"
 }
 export default ReactKitErrorCode;

package/lib/types/ReactKitErrorCode.js

@@ -9,6 +9,10 @@ var ReactKitErrorCode;
 (function (ReactKitErrorCode) {
     ReactKitErrorCode["NoResponse"] = "DRK1";
     ReactKitErrorCode["NoCode"] = "DRK2";
+    ReactKitErrorCode["SessionExpired"] = "DRK3";
+    ReactKitErrorCode["MissingParameter"] = "DRK4";
+    ReactKitErrorCode["InvalidParameter"] = "DRK5";
+    ReactKitErrorCode["WrongCourse"] = "DRK6";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 exports.default = ReactKitErrorCode;
 //# sourceMappingURL=ReactKitErrorCode.js.map

package/lib/types/ReactKitErrorCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactKitErrorCode.js","sourceRoot":"","sources":["../../src/types/ReactKitErrorCode.tsx"],"names":[],"mappings":";AAAA,4BAA4B;;AAE5B;;;GAGG;AACH,IAAK,iBAGJ;AAHD,WAAK,iBAAiB;IACpB,wCAAmB,CAAA;IACnB,oCAAe,CAAA;AACjB,CAAC,EAHI,iBAAiB,KAAjB,iBAAiB,QAGrB;AAED,kBAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ReactKitErrorCode.js","sourceRoot":"","sources":["../../src/types/ReactKitErrorCode.tsx"],"names":[],"mappings":";AAAA,4BAA4B;;AAE5B;;;GAGG;AACH,IAAK,iBAOJ;AAPD,WAAK,iBAAiB;IACpB,wCAAmB,CAAA;IACnB,oCAAe,CAAA;IACf,4CAAuB,CAAA;IACvB,8CAAyB,CAAA;IACzB,8CAAyB,CAAA;IACzB,yCAAoB,CAAA;AACtB,CAAC,EAPI,iBAAiB,KAAjB,iBAAiB,QAOrB;AAED,kBAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "react-bootstrap": "^2.2.3"
   },
   "devDependencies": {
+    "@types/express": "^4.17.13",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "eslint": "^8.12.0",

package/src/components/AppWrapper.tsx

@@ -5,11 +5,14 @@
  */
 
 // Import React
-import React, { useState } from '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';
 
@@ -25,6 +28,8 @@ type Props = {
   children: React.ReactNode,
   // True if this app is a dark-themed app
   dark?: boolean,
+  // Custom session expired message
+  sessionExpiredMessage?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -77,6 +82,7 @@ const AppWrapper = (props: Props) => {
   const {
     children,
     dark,
+    sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
   } = props;
 
   /* -------------- State ------------- */
@@ -87,18 +93,52 @@ const AppWrapper = (props: Props) => {
   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) {
+  if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
     // Re-encapsulate in an error
-    const error = new ErrorWithCode(
-      fatalErrorMessage,
-      fatalErrorCode,
+    const error = (
+      sessionHasExpired
+        ? new ErrorWithCode(
+          fatalErrorMessage,
+          fatalErrorCode,
+        )
+        : new ErrorWithCode(
+          sessionExpiredMessage,
+          ReactKitErrorCode.SessionExpired,
+        )
     );
 
+    // Build error screen
     return (
       <div
         style={{
@@ -106,9 +146,19 @@ const AppWrapper = (props: Props) => {
           width: '100vw',
           minHeight: '100vh',
           paddingTop: '10rem',
+          backgroundColor: (
+            dark
+              ? '#222'
+              : '#fff'
+          ),
         }}
       >
         <ErrorBox
+          title={(
+            sessionHasExpired
+              ? 'Session Expired'
+              : undefined
+          )}
           error={error}
         />
       </div>

package/src/components/ErrorBox.tsx

@@ -20,6 +20,8 @@ import ReactKitErrorCode from '../types/ReactKitErrorCode';
 type Props = {
   // Error to display
   error: any,
+  // Customized title of error box
+  title?: string,
   // Handler for close,
   onClose?: () => void,
 };
@@ -37,6 +39,7 @@ const ErrorBox: React.FC<Props> = (props) => {
 
   const {
     error,
+    title = 'An Error Occurred',
     onClose,
   } = props;
 
@@ -91,7 +94,7 @@ const ErrorBox: React.FC<Props> = (props) => {
           icon={faExclamationTriangle}
           className="me-2"
         />
-        An Error Occurred
+        {title}
       </h4>
       <div>
         {errorText}

package/src/helpers/handleError.ts

@@ -0,0 +1,65 @@
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+/**
+ * Handle an error and respond to the client
+ * @author Gabe Abrams
+ * @param res express response
+ * @param error error info
+ * @param opts.err the error to send to the client
+ *   or the error message
+ * @param [opts.code] an error code (only used if err.code is not
+ *   included)
+ * @param [opts.status=500] the https status code to use
+ *   defined)
+ */
+const handleError = (
+  res: any,
+  error: (
+    | {
+      message: any,
+      code?: string,
+      status?: number,
+    }
+    | Error
+    | string
+    | any
+  ),
+): undefined => {
+  // Get the error message
+  let message;
+  if (error && (error as any).message) {
+    message = (error.message || 'An unknown error occurred.');
+  } else if (typeof error === 'string') {
+    message = (
+      error.trim().length > 0
+        ? error
+        : 'An unknown error occurred.'
+    );
+  } else {
+    message = 'An unknown error occurred.';
+  }
+
+  // Get the error code
+  const code = (error.code || ReactKitErrorCode.NoCode);
+
+  // Get the status code
+  const status = (error.status || 500);
+
+  // Respond to user
+  res
+    // Set the http status code
+    .status(status)
+    // Send a JSON response
+    .json({
+      // Error message
+      message,
+      // Error code
+      code,
+      // Success = false flag so client can detect server-side errors
+      success: false,
+    });
+  return undefined;
+};
+
+export default handleError;

package/src/helpers/handleSuccess.ts

@@ -0,0 +1,18 @@
+/**
+ * Send successful API response
+ * @author Gabe Abrams
+ * @param res express response
+ * @param body the body of the response to send to the client
+ */
+const handleSuccess = (res: any, body: any): undefined => {
+  // Send a http 200 json response
+  res.json({
+    // Include the body as a parameter
+    body,
+    // Success = true flag so client can detect successful responses
+    success: true,
+  });
+  return undefined;
+};
+
+export default handleSuccess;