dce-reactkit 3.0.0-beta.23 → 3.0.0-beta.27

package/src/components/AppWrapper.tsx

@@ -28,22 +28,70 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 type Props = {
   // The entire app
   children: React.ReactNode,
+  // Copy of CACCL's send request function
+  sendRequest: SendRequestFunction,
   // True if this app is a dark-themed app
   dark?: boolean,
   // Custom session expired message
   sessionExpiredMessage?: string,
 };
 
+// Type of CACCL's send request function
+type SendRequestFunction = (
+  opts: {
+    path: string;
+    method: ('GET' | 'POST' | 'DELETE' | 'PUT');
+    params?: {
+      [x: string]: any;
+    } | undefined;
+    headers?: {
+      [x: string]: any;
+    } | undefined;
+    numRetries?: number | undefined;
+  },
+) => Promise<{
+  body: any;
+  status: number;
+  headers: {
+    [x: string]: any;
+  };
+}>;
+
 /*------------------------------------------------------------------------*/
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/*              Send Request              */
+/*----------------------------------------*/
+
+// Store copy of caccl send request
+let _cacclSendRequest: SendRequestFunction;
+
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+export const cacclSendRequest: SendRequestFunction = async (opts) => {
+  // Make sure send request has been passed in
+  if (!_cacclSendRequest) {
+    throw new ErrorWithCode(
+      'The request could not be sent because the AppWrapper component does not have a copy of sendRequest from CACCL.',
+      ReactKitErrorCode.NoCACCLSendRequestFunction,
+    );
+  }
+
+  return _cacclSendRequest(opts);
+};
+
 /*----------------------------------------*/
 /*                  Alert                 */
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setAlertInfo: (info: { title: string, text: string }) => void;
+let setAlertInfo: (info: undefined | { title: string, text: string }) => void;
 let onAlertClosed: () => void;
 
 /**
@@ -79,7 +127,7 @@ export const alert = async (title: string, text: string): Promise<undefined> =>
 /*----------------------------------------*/
 
 // Stored copies of setters
-let setConfirmInfo: (info: { title: string, text: string }) => void;
+let setConfirmInfo: (info: undefined | { title: string, text: string }) => void;
 let onConfirmClosed: (confirmed: boolean) => void;
 
 /**
@@ -190,10 +238,14 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
+    sendRequest,
     dark,
     sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.',
   } = props;
 
+  // Store copy of send request
+  _cacclSendRequest = sendRequest;
+
   /* -------------- State ------------- */
 
   // Fatal error
@@ -217,20 +269,26 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   const [
     alertInfo,
     setAlertInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setAlertInfo = setAlertInfoInner;
 
   // Confirm
   const [
     confirmInfo,
     setConfirmInfoInner,
-  ] = useState<{
-    title: string,
-    text: string
-  }>();
+  ] = useState<
+    undefined
+    | {
+      title: string,
+      text: string
+    }
+  >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
   // Session expired
@@ -282,6 +340,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           if (onConfirmClosed) {
             onConfirmClosed(buttonType === ModalButtonType.Okay);
           }
+          setConfirmInfo(undefined);
         }}
         dontAllowBackdropExit
       >

package/src/helpers/genRouteHandler.ts

@@ -0,0 +1,323 @@
+// Import caccl functions
+import { cacclGetLaunchInfo } from '../server/initServer';
+
+// Import shared types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+import ParamType from '../types/ParamType';
+
+// Import helpers
+import handleError from './handleError';
+import handleSuccess from './handleSuccess';
+
+/**
+ * Generate an express API route handler
+ * @author Gabe Abrams
+ * @param params map containing parameters that are included in the request
+ *   (map: param name => type)
+ * @param handler function that processes the request
+ * @returns express route handler that takes the following arguments:
+ *   params (map: param name => value), handleSuccess (function for handling
+ *   successful requests), handleError (function for handling failed requests),
+ *   req (express request object), res (express response object)
+ */
+const genRouteHandler = (
+  params: {
+    [k: string]: ParamType
+  },
+  handler: (
+    opts: {
+      params: {
+        [k: string]: any
+      },
+      handleSuccess: (body: any) => void,
+      handleError: (error: any) => void,
+      req: any,
+      res: any,
+    },
+  ) => void,
+) => {
+  // Return a route handler
+  return async (req: any, res: any) => {
+    // Output params
+    const output: { [k in string]: any } = {};
+
+    /*----------------------------------------*/
+    /*              Parse Params              */
+    /*----------------------------------------*/
+
+    // Process items one by one
+    const paramList = Object.entries(params);
+    for (let i = 0; i < paramList.length; i++) {
+      const [name, type] = paramList[i];
+
+      // Find the value as a string
+      const value = (
+        req.params[name]
+        || req.query[name]
+        || req.body[name]
+      );
+
+      // Parse
+      if (type === ParamType.Boolean || type === ParamType.BooleanOptional) {
+        // Boolean
+
+        // Handle case where value doesn't exist
+        if (value === undefined) {
+          if (type === ParamType.BooleanOptional) {
+            output[name] = undefined;
+          } else {
+            return handleError(
+              res,
+              {
+                message: `Parameter ${name} is required, but it was not included.`,
+                code: ReactKitErrorCode.MissingParameter,
+                status: 422,
+              },
+            );
+          }
+        } else {
+          // Value exists
+
+          // Simplify value
+          const simpleVal = (
+            String(value)
+              .trim()
+              .toLowerCase()
+          );
+
+          // Parse
+          output[name] = (
+            [
+              'true',
+              'yes',
+              'y',
+              '1',
+              't',
+            ].indexOf(simpleVal) >= 0
+          );
+        }
+      } else if (type === ParamType.Float || type === ParamType.FloatOptional) {
+        // Float
+
+        // Handle case where value doesn't exist
+        if (value === undefined) {
+          if (type === ParamType.FloatOptional) {
+            output[name] = undefined;
+          } else {
+            return handleError(
+              res,
+              {
+                message: `Parameter ${name} is required, but it was not included.`,
+                code: ReactKitErrorCode.MissingParameter,
+                status: 422,
+              },
+            );
+          }
+        } else if (!Number.isNaN(Number.parseFloat(String(value)))) {
+          // Value is a number
+          output[name] = Number.parseFloat(String(value));
+        } else {
+          // Issue!
+          return handleError(
+            res,
+            {
+              message: `Request data was malformed: ${name} was not a valid float.`,
+              code: ReactKitErrorCode.InvalidParameter,
+              status: 422,
+            },
+          );
+        }
+      } else if (type === ParamType.Int || type === ParamType.IntOptional) {
+        // Int
+
+        // Handle case where value doesn't exist
+        if (value === undefined) {
+          if (type === ParamType.IntOptional) {
+            output[name] = undefined;
+          } else {
+            return handleError(
+              res,
+              {
+                message: `Parameter ${name} is required, but it was not included.`,
+                code: ReactKitErrorCode.MissingParameter,
+                status: 422,
+              },
+            );
+          }
+        } else if (!Number.isNaN(Number.parseInt(String(value), 10))) {
+          // Value is a number
+          output[name] = Number.parseInt(String(value), 10);
+        } else {
+          // Issue!
+          return handleError(
+            res,
+            {
+              message: `Request data was malformed: ${name} was not a valid int.`,
+              code: ReactKitErrorCode.InvalidParameter,
+              status: 422,
+            },
+          );
+        }
+      } else if (type === ParamType.JSON || type === ParamType.JSONOptional) {
+        // Stringified JSON
+
+        // Handle case where value doesn't exist
+        if (value === undefined) {
+          if (type === ParamType.JSONOptional) {
+            output[name] = undefined;
+          } else {
+            return handleError(
+              res,
+              {
+                message: `Parameter ${name} is required, but it was not included.`,
+                code: ReactKitErrorCode.MissingParameter,
+                status: 422,
+              },
+            );
+          }
+        } else {
+          // Value exists
+
+          // Parse
+          try {
+            output[name] = JSON.parse(String(value));
+          } catch (err) {
+            return handleError(
+              res,
+              {
+                message: `Request data was malformed: ${name} was not a valid JSON payload.`,
+                code: ReactKitErrorCode.InvalidParameter,
+                status: 422,
+              },
+            );
+          }
+        }
+      } else if (type === ParamType.String || type === ParamType.StringOptional) {
+        // String
+
+        // Handle case where value doesn't exist
+        if (value === undefined) {
+          if (type === ParamType.StringOptional) {
+            output[name] = undefined;
+          } else {
+            return handleError(
+              res,
+              {
+                message: `Parameter ${name} is required, but it was not included.`,
+                code: ReactKitErrorCode.MissingParameter,
+                status: 422,
+              },
+            );
+          }
+        } else {
+          // Value exists
+
+          // Leave as is
+          output[name] = value;
+        }
+      } else {
+        // No valid data type
+        return handleError(
+          res,
+          {
+            message: `An internal error occurred: we could not determine the type of ${name}.`,
+            code: ReactKitErrorCode.InvalidParameter,
+            status: 422,
+          },
+        );
+      }
+    }
+
+    /*----------------------------------------*/
+    /*               Launch Info              */
+    /*----------------------------------------*/
+
+    // Get launch info
+    const { launched, launchInfo } = cacclGetLaunchInfo(req);
+    if (!launched || !launchInfo) {
+      return handleError(
+        res,
+        {
+          message: 'Your session has expired. Please refresh the page and try again.',
+          code: ReactKitErrorCode.SessionExpired,
+          status: 440,
+        },
+      );
+    }
+
+    // Error if user info cannot be found
+    if (
+      !launchInfo.userId
+      || !launchInfo.userFirstName
+      || !launchInfo.userLastName
+      || (
+        launchInfo.notInCourse
+        && !launchInfo.isAdmin
+      )
+      || (
+        !launchInfo.isTTM
+        && !launchInfo.isLearner
+        && !launchInfo.isAdmin
+      )
+    ) {
+      return handleError(
+        res,
+        {
+          message: 'Your session was invalid. Please refresh the page and try again.',
+          code: ReactKitErrorCode.SessionExpired,
+          status: 440,
+        },
+      );
+    }
+
+    // Add launch info to output
+    output.userId = launchInfo.userId;
+    output.userFirstName = launchInfo.userFirstName;
+    output.userLastName = launchInfo.userLastName;
+    output.isLearner = !!launchInfo.isLearner;
+    output.isTTM = !!launchInfo.isTTM;
+    output.isAdmin = !!launchInfo.isAdmin;
+    output.isWatchingInPrivate = !!(req.session.isWatchingInPrivate);
+
+    /*----------------------------------------*/
+    /*       Require Course Consistency       */
+    /*----------------------------------------*/
+
+    // Make sure the user actually launched from the appropriate course
+    if (
+      output.courseId
+      && launchInfo.courseId
+      && output.courseId !== launchInfo.courseId
+      && !output.isTTM
+      && !output.isAdmin
+    ) {
+      // Course of interest is not the launch course
+      return handleError(
+        res,
+        {
+          message: 'You switched sessions by opening Immersive Classroom in another tab. Please refresh the page and try again.',
+          code: ReactKitErrorCode.WrongCourse,
+          status: 401,
+        },
+      );
+    }
+
+    /*------------------------------------------------------------------------*/
+    /*                              Call handler                              */
+    /*------------------------------------------------------------------------*/
+
+    handler({
+      params: output,
+      handleSuccess: (body: any) => {
+        return handleSuccess(res, body);
+      },
+      handleError: (error: any) => {
+        return handleError(res, error);
+      },
+      req,
+      res,
+    });
+  };
+};
+
+export default genRouteHandler;

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;

package/src/helpers/visitServerEndpoint.tsx

@@ -0,0 +1,110 @@
+// Import custom error
+import ErrorWithCode from '../errors/ErrorWithCode';
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+// Import helpers from app wrapper
+import { cacclSendRequest } from '../components/AppWrapper';
+
+/*------------------------------------------------------------------------*/
+/*                                Listener                                */
+/*------------------------------------------------------------------------*/
+
+// Handler for session expiry
+let sessionExpiryHandler: () => void;
+
+// Keep track of whether or not session expiry has already been handled
+let sessionAlreadyExpired = false;
+
+/**
+ * Set the session expiry handler
+ * @author Gabe Abrams
+ * @param handler new handler to use when session expires
+ */
+export const setSessionExpiryHandler = (handler: () => void) => {
+  sessionExpiryHandler = handler;
+};
+
+/*------------------------------------------------------------------------*/
+/*                                  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
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @returns response from server
+ */
+const visitServerEndpoint = async (
+  opts: {
+    path: string,
+    method?: ('GET' | 'POST' | 'DELETE' | 'PUT'),
+    params?: { [key in string]: any },
+  },
+): Promise<any> => {
+  // Send the request
+  const response = await cacclSendRequest({
+    path: opts.path,
+    method: opts.method ?? 'GET',
+    params: opts.params,
+  });
+
+  // Check for failure
+  if (!response || !response.body) {
+    throw new ErrorWithCode(
+      'We didn\'t get a response from the server. Please check your internet connection.',
+      ReactKitErrorCode.NoResponse,
+    );
+  }
+  if (!response.body.success) {
+    // Session expired
+    if (response.body.code === ReactKitErrorCode.SessionExpired) {
+      // Skip notice if session was already expired
+      if (sessionAlreadyExpired) {
+        // Never return (browser is already reloading)
+        await new Promise<{ [key in string]: any }>(() => {
+          // Promise that never returns
+        });
+      }
+      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)
+      await new Promise<{ [key in string]: any }>(() => {
+        // Promise that never returns
+      });
+    }
+
+    // Other errors
+    throw new ErrorWithCode(
+      (
+        response.body.message
+        || 'An unknown error occurred. Please contact an admin.'
+      ),
+      (
+        response.body.code
+        || ReactKitErrorCode.NoCode
+      ),
+    );
+  }
+
+  // Success! Extract the body
+  const { body } = response.body;
+
+  // Return
+  return body;
+};
+
+export default visitServerEndpoint;

package/src/index.ts

@@ -19,6 +19,10 @@ import padZerosLeft from './helpers/padZerosLeft';
 import roundToNumDecimals from './helpers/roundToNumDecimals';
 import sum from './helpers/sum';
 import waitMs from './helpers/waitMs';
+import visitServerEndpoint from './helpers/visitServerEndpoint';
+import genRouteHandler from './helpers/genRouteHandler';
+import handleError from './helpers/handleError';
+import handleSuccess from './helpers/handleSuccess';
 
 // Import types
 import ModalButtonType from './types/ModalButtonType';
@@ -26,6 +30,7 @@ import ModalSize from './types/ModalSize';
 import ModalType from './types/ModalType';
 import ReactKitErrorCode from './types/ReactKitErrorCode';
 import Variant from './types/Variant';
+import ParamType from './types/ParamType';
 
 // Export each item
 export {
@@ -52,10 +57,18 @@ export {
   roundToNumDecimals,
   sum,
   waitMs,
+  // Client helpers
+  visitServerEndpoint,
+  // Server helpers
+  genRouteHandler,
+  handleError,
+  handleSuccess,
   // Types
   ModalButtonType,
   ModalSize,
   ModalType,
   ReactKitErrorCode,
   Variant,
+  // Server types
+  ParamType,
 };