dce-reactkit 3.1.19 → 3.2.0-beta.1

package/dist/esm/types/types/LogFunction.d.ts

@@ -0,0 +1,20 @@
+import Log from './Log';
+import LogAction from './LogAction';
+/**
+ * Type of a log action function
+ * @author Gabe Abrams
+ */
+declare type LogFunction = (opts: ({
+    category: string;
+    subcategory?: string;
+    tags?: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+} & ({
+    error: any;
+} | {
+    target: string;
+    action: LogAction;
+}))) => Promise<Log>;
+export default LogFunction;

package/dist/esm/types/types/LogSource.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Source of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogSource {
+    Client = "client",
+    Server = "server"
+}
+export default LogSource;

package/dist/esm/types/types/LogType.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogType {
+    Action = "action",
+    Error = "error"
+}
+export default LogType;

package/dist/index.d.ts

@@ -1,6 +1,21 @@
 /// <reference types="react" />
 import React from 'react';
 
+/**
+ * Bootstrap variants
+ * @author Gabe Abrams
+ */
+declare enum Variant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Success = "success",
+    Warning = "warning",
+    Info = "info",
+    Danger = "danger",
+    Light = "light",
+    Dark = "dark"
+}
+
 /**
  * A wrapper for the entire React app that adds global functionality like
  *   handling for fatal error messages, adds bootstrap support
@@ -43,11 +58,21 @@ declare const alert: (title: string, text: string) => Promise<undefined>;
  * @author Gabe Abrams
  * @param title the title text to display at the top of the alert
  * @param text the text to display in the alert
- * @param [confirmButtonText=Okay] the text of the confirm button
- * @param [cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts={}] additional options for the confirmation dialog
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm
+ *   button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel
+ *   button
  * @returns true if the user confirmed
  */
-declare const confirm: (title: string, text: string, confirmButtonText?: string, cancelButtonText?: string) => Promise<boolean>;
+declare const confirm: (title: string, text: string, opts?: {
+    confirmButtonText?: string | undefined;
+    confirmButtonVariant?: Variant | undefined;
+    cancelButtonText?: string | undefined;
+    cancelButtonVariant?: Variant | undefined;
+} | undefined) => Promise<boolean>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams
@@ -75,21 +100,6 @@ declare type Props$c = {
 };
 declare const ErrorBox: React.FC<Props$c>;
 
-/**
- * Bootstrap variants
- * @author Gabe Abrams
- */
-declare enum Variant {
-    Primary = "primary",
-    Secondary = "secondary",
-    Success = "success",
-    Warning = "warning",
-    Info = "info",
-    Danger = "danger",
-    Light = "light",
-    Dark = "dark"
-}
-
 /**
  * Types of buttons in the modal
  * @author Gabe Abrams
@@ -505,6 +515,135 @@ declare enum ParamType {
     StringOptional = "string-optional"
 }
 
+/**
+ * Main information in a log event
+ * @author Gabe Abrams
+ */
+declare type LogMainInfo = {
+    id: string;
+    userFirstName: string;
+    userLastName: string;
+    userEmail: string;
+    userId: number;
+    isLearner: boolean;
+    isAdmin: boolean;
+    isTTM: boolean;
+    courseId: number;
+    courseName: string;
+    browser: {
+        name: string;
+        version: string;
+    };
+    device: {
+        os: string;
+        isMobile: boolean;
+    };
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    timestamp: number;
+    category: string;
+    subcategory: string;
+    tags: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+};
+
+/**
+ * Source of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogSource {
+    Client = "client",
+    Server = "server"
+}
+
+/**
+ * Log info that is specific to the type of source
+ * @author Gabe Abrams
+ */
+declare type LogSourceSpecificInfo = ({
+    source: LogSource.Client;
+} | {
+    source: LogSource.Server;
+    routePath: string;
+    routeTemplate: string;
+});
+
+/**
+ * Types of actions
+ * @author Gabe Abrams
+ */
+declare enum LogAction {
+    Open = "open",
+    Close = "close",
+    Expand = "expand",
+    Collapse = "collapse",
+    View = "view",
+    Interrupt = "interrupt",
+    Create = "create",
+    Edit = "edit",
+    Delete = "delete",
+    Add = "add",
+    Remove = "remove",
+    Activate = "activate",
+    Deactivate = "deactivate",
+    Peek = "peek",
+    Unknown = "unknown"
+}
+
+/**
+ * Type of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogType {
+    Action = "action",
+    Error = "error"
+}
+
+/**
+ * Log info that is specific to the type of log
+ * @author Gabe Abrams
+ */
+declare type LogTypeSpecificInfo = ({
+    type: LogType.Error;
+    errorMessage: string;
+    errorCode: string;
+    errorStack: string;
+} | {
+    type: LogType.Action;
+    target: string;
+    action: LogAction;
+});
+
+/**
+ * A single log event corresponding to an action performed by a user or an
+ *   error encountered by a user
+ * @author Gabe Abrams
+ */
+declare type Log = (LogMainInfo & LogSourceSpecificInfo & LogTypeSpecificInfo);
+
+/**
+ * Type of a log action function
+ * @author Gabe Abrams
+ */
+declare type LogFunction = (opts: ({
+    category: string;
+    subcategory?: string;
+    tags?: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+} & ({
+    error: any;
+} | {
+    target: string;
+    action: LogAction;
+}))) => Promise<Log>;
+
 /**
  * Generate an express API route handler
  * @author Gabe Abrams
@@ -546,6 +685,7 @@ declare const genRouteHandler: (opts: {
             pageTitle?: string | undefined;
             status?: number | undefined;
         } | undefined) => void;
+        logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;
 }) => (req: any, res: any, next: () => void) => Promise<undefined>;
@@ -584,10 +724,16 @@ declare type GetLaunchInfoFunction = (req: any) => {
  * Prepare dce-reactkit to run on the server
  * @author Gabe Abrams
  * @param opts object containing all arguments
+ * @param opts.app express app from inside of the postprocessor function that
+ *   we will add routes to
  * @param opts.getLaunchInfo CACCL LTI's get launch info function
+ * @param [opts.logCollection] mongo collection from dce-mango to use for
+ *   storing logs. If none is included, logs are written to the console
  */
 declare const initServer: (opts: {
+    app: any;
     getLaunchInfo: GetLaunchInfoFunction;
+    logCollection?: any;
 }) => void;
 
 /**
@@ -717,4 +863,4 @@ declare enum DayOfWeek {
     Sunday = "u"
 }
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, ItemPicker, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initServer, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, ItemPicker, LoadingSpinner, Log, LogAction, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initServer, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.1.19",
+  "version": "3.2.0-beta.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -14,6 +14,7 @@ import ErrorBox from './ErrorBox';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 import ModalButtonType from '../types/ModalButtonType';
 import ModalType from '../types/ModalType';
+import Variant from '../types/Variant';
 
 // Import shared components
 import Modal from './Modal';
@@ -133,8 +134,12 @@ let setConfirmInfo: (
     | {
       title: string,
       text: string,
-      confirmButtonText: string,
-      cancelButtonText: string,
+      opts: {
+        confirmButtonText?: string,
+        confirmButtonVariant?: Variant,
+        cancelButtonText?: string,
+        cancelButtonVariant?: Variant,
+      },
     }
   ),
 ) => void;
@@ -146,15 +151,24 @@ let onConfirmClosed: (confirmed: boolean) => void;
  * @author Gabe Abrams
  * @param title the title text to display at the top of the alert
  * @param text the text to display in the alert
- * @param [confirmButtonText=Okay] the text of the confirm button
- * @param [cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts={}] additional options for the confirmation dialog
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm
+ *   button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel
+ *   button
  * @returns true if the user confirmed
  */
 export const confirm = async (
   title: string,
   text: string,
-  confirmButtonText: string = 'Okay',
-  cancelButtonText: string = 'Cancel',
+  opts?: {
+    confirmButtonText?: string,
+    confirmButtonVariant?: Variant,
+    cancelButtonText?: string,
+    cancelButtonVariant?: Variant,
+  },
 ): Promise<boolean> => {
   // Fallback if confirm is not available
   if (!setConfirmInfo) {
@@ -172,8 +186,7 @@ export const confirm = async (
     setConfirmInfo({
       title,
       text,
-      confirmButtonText,
-      cancelButtonText,
+      opts: (opts ?? {}),
     });
   });
 };
@@ -290,7 +303,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     undefined
     | {
       title: string,
-      text: string
+      text: string,
     }
   >(undefined);
   setAlertInfo = setAlertInfoInner;
@@ -304,8 +317,12 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     | {
       title: string,
       text: string,
-      confirmButtonText: string,
-      cancelButtonText: string,
+      opts: {
+        confirmButtonText?: string,
+        confirmButtonVariant?: Variant,
+        cancelButtonText?: string,
+        cancelButtonVariant?: Variant,
+      },
     }
   >(undefined);
   setConfirmInfo = setConfirmInfoInner;
@@ -358,8 +375,10 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         key={`confirm-${confirmInfo.title}-${confirmInfo.text}`}
         title={confirmInfo.title}
         type={ModalType.OkayCancel}
-        okayLabel={confirmInfo.confirmButtonText}
-        cancelLabel={confirmInfo.cancelButtonText}
+        okayLabel={confirmInfo.opts.confirmButtonText}
+        okayVariant={confirmInfo.opts.confirmButtonVariant}
+        cancelLabel={confirmInfo.opts.cancelButtonText}
+        cancelVariant={confirmInfo.opts.cancelButtonVariant}
         onClose={(buttonType) => {
           setConfirmInfo(undefined);
           if (onConfirmClosed) {

package/src/constants/LOG_ROUTE_PATH.ts

@@ -0,0 +1,9 @@
+import ROUTE_PATH_PREFIX from './ROUTE_PATH_PREFIX';
+
+/**
+ * Path of the route for storing client-side logs
+ * @author Gabe Abrams
+ */
+const LOG_ROUTE_PATH = `${ROUTE_PATH_PREFIX}/log`;
+
+export default LOG_ROUTE_PATH;

package/src/constants/ROUTE_PATH_PREFIX.ts

@@ -0,0 +1,7 @@
+/**
+ * Path that all routes start with
+ * @author Gabe Abrams
+ */
+const ROUTE_PATH_PREFIX = '/dce-reactkit';
+
+export default ROUTE_PATH_PREFIX;

package/src/helpers/genRouteHandler.ts

@@ -1,5 +1,8 @@
 // Import caccl functions
-import { cacclGetLaunchInfo } from '../server/initServer';
+import {
+  cacclGetLaunchInfo,
+  internalGetLogCollection,
+} from '../server/initServer';
 
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
@@ -9,6 +12,17 @@ import ParamType from '../types/ParamType';
 import handleError from './handleError';
 import handleSuccess from './handleSuccess';
 import genErrorPage from '../html/genErrorPage';
+import parseUserAgent from './parseUserAgent';
+import getTimeInfoInET from './getTimeInfoInET';
+
+// Import shared types
+import LogFunction from '../types/LogFunction';
+import Log from '../types/Log';
+import LogType from '../types/LogType';
+import LogSource from '../types/LogSource';
+import LogTypeSpecificInfo from '../types/Log/LogTypeSpecificInfo';
+import LogMainInfo from '../types/Log/LogMainInfo';
+import LogSourceSpecificInfo from '../types/Log/LogSourceSpecificInfo';
 
 /**
  * Generate an express API route handler
@@ -55,6 +69,7 @@ const genRouteHandler = (
             status?: number,
           },
         ) => void,
+        logServerEvent: LogFunction,
       },
     ) => any,
     skipSessionCheck?: boolean,
@@ -439,6 +454,118 @@ const genRouteHandler = (
       );
     }
 
+    /*----------------------------------------*/
+    /*               Log Handler              */
+    /*----------------------------------------*/
+
+    // Create a log handler function
+
+    /**
+     * Log an event on the server
+     * @author Gabe Abrams
+     */
+    const logServerEvent: LogFunction = async (opts) => {
+      // NOTE: internally, we slip through an opts.overrideAsClientEvent boolean
+      // that indicates that this is actually a client event, but we don't
+      // include that in the LogFunction type because this is internal and
+      // hidden from users
+
+      // Parse user agent
+      const {
+        browser,
+        device,
+      } = parseUserAgent(req.headers['user-agent']);
+
+      // Get time info in ET
+      const {
+        timestamp,
+        year,
+        month,
+        day,
+        hour,
+        minute,
+      } = getTimeInfoInET();
+
+      // Main log info
+      const mainLogInfo: LogMainInfo = {
+        id: `${launchInfo.userId}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
+        userFirstName: launchInfo.userFirstName,
+        userLastName: launchInfo.userLastName,
+        userEmail: launchInfo.userEmail,
+        userId: launchInfo.userId,
+        isLearner: !!launchInfo.isLearner,
+        isAdmin: !!launchInfo.isAdmin,
+        isTTM: !!launchInfo.isTTM,
+        courseId: launchInfo.courseId,
+        courseName: launchInfo.courseName,
+        browser,
+        device,
+        year,
+        month,
+        day,
+        hour,
+        minute,
+        timestamp,
+        category: opts.category,
+        subcategory: opts.subcategory ?? 'none',
+        tags: opts.tags ?? [],
+        metadata: opts.metadata ?? {},
+      };
+
+      // Type-specific info
+      const typeSpecificInfo: LogTypeSpecificInfo = (
+        ('error' in opts && opts.error)
+          ? {
+            type: LogType.Error,
+            errorMessage: opts.error.message ?? 'Unknown message',
+            errorCode: opts.error.code ?? ReactKitErrorCode.NoCode,
+            errorStack: opts.error.stack ?? 'No stack',
+          }
+          : {
+            type: LogType.Action,
+            target: (opts as any).target ?? 'Unknown',
+            action: (opts as any).action ?? 'Unknown'
+          }
+      );
+
+      // Source-specific info
+      const sourceSpecificInfo: LogSourceSpecificInfo = (
+        (opts as any).overrideAsClientEvent
+          ? {
+            source: LogSource.Client,
+          }
+          : {
+            source: LogSource.Server,
+            routePath: req.path,
+            routeTemplate: req.route.path,
+          }
+      );
+
+      // Build log event
+      const log: Log = {
+        ...mainLogInfo,
+        ...typeSpecificInfo,
+        ...sourceSpecificInfo,
+      };
+
+      // Either print to console or save to db
+      const logCollection = internalGetLogCollection();
+      if (logCollection) {
+        // Store to the log collection
+        await logCollection.insert(log);
+      } else {
+        // Print to console
+        if (log.type === LogType.Error) {
+          console.error('dce-reactkit error log:', log);
+        } else {
+          console.log('dce-reactkit action log:', log);
+        }
+      }
+
+      // Return log entry
+      return log;
+    };
+
     /*------------------------------------------------------------------------*/
     /*                              Call handler                              */
     /*------------------------------------------------------------------------*/
@@ -504,6 +631,7 @@ const genRouteHandler = (
         },
         redirect,
         renderErrorPage,
+        logServerEvent,
       });
 
       // Send results to client (only if next wasn't called)

package/src/helpers/logClientEvent.tsx

@@ -0,0 +1,50 @@
+// Import shared types
+import LOG_ROUTE_PATH from '../constants/LOG_ROUTE_PATH';
+import LogFunction from '../types/LogFunction';
+
+// Import shared functions
+import visitServerEndpoint from './visitServerEndpoint';
+
+/**
+ * Log a user action on the client (cannot be used on the server)
+ * @author Gabe Abrams
+ */
+const logClientEvent: LogFunction = async (opts) => {
+  return visitServerEndpoint({
+    path: LOG_ROUTE_PATH,
+    method: 'POST',
+    params: {
+      category: opts.category,
+      subcategory: opts.subcategory,
+      tags: JSON.stringify(opts.tags),
+      metadata: JSON.stringify(opts.metadata ?? {}),
+      errorMessage: (
+        (opts as any).error
+          ? (opts as any).error.message
+          : undefined
+      ),
+      errorCode: (
+        (opts as any).error
+          ? (opts as any).error.code
+          : undefined
+      ),
+      errorStack: (
+        (opts as any).error
+          ? (opts as any).error.stack
+          : undefined
+      ),
+      target: (
+        (opts as any).target
+          ? (opts as any).target
+          : undefined
+      ),
+      action: (
+        (opts as any).action
+          ? (opts as any).action
+          : undefined
+      ),
+    },
+  });
+};
+
+export default logClientEvent;