dce-reactkit 3.0.1 → 3.0.2

package/src/components/SimpleDateChooser.tsx

@@ -0,0 +1,222 @@
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import helpers
+import getOrdinal from '../helpers/getOrdinal';
+import getTimeInfoInET from '../helpers/getTimeInfoInET';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Aria label
+  ariaLabel: string,
+  // Name of the chooser (machine-readable, hyphenated)
+  name: string,
+  // Currently selected month
+  month: number,
+  // Currently selected day
+  day: number,
+  // Currently selected year
+  year: number,
+  /**
+   * Handler for when date changes
+   * @param month new 1-indexed month number
+   * @param day new 1-indexed day number
+   * @param year new full year number
+   */
+  onChange: (month: number, day: number, year: number) => void,
+  // Number of months in the future to allow the user to schedule into
+  // (max is 12)
+  numMonthsToShow?: number,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+// Constants
+const MONTH_NAMES = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const SimpleDateChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    ariaLabel,
+    name,
+    month,
+    day,
+    year,
+    onChange,
+  } = props;
+  const numMonthsToShow = Math.min(props.numMonthsToShow ?? 6, 12);
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                Main UI                 */
+  /*----------------------------------------*/
+
+  // Determine the set of choices allowed
+  const today = getTimeInfoInET();
+  const choices: {
+    choiceName: string,
+    month: number,
+    days: number[],
+    year: number,
+  }[] = [];
+  for (let i = 0; i < numMonthsToShow; i++) {
+    // Get month and year info
+    const unmoddedMonth = (today.month + i);
+    const month = (
+      unmoddedMonth > 12
+        ? unmoddedMonth - 12
+        : unmoddedMonth
+    );
+    const monthName = MONTH_NAMES[month - 1];
+    const year = (
+      unmoddedMonth > 12
+        ? today.year + 1
+        : today.year
+    );
+
+    // Figure out which days are allowed
+    const days = [];
+    const numDaysInMonth = (new Date(year, month, 0)).getDate();
+    const firstDay = (
+      month === today.month
+        ? today.day // Current month: start at current date
+        : 1 // Future month: start at beginning of month
+    );
+    for (let day = firstDay; day <= numDaysInMonth; day++) {
+      days.push(day);
+    }
+
+    choices.push({
+      choiceName: `${monthName} ${year}`,
+      month,
+      year,
+      days,
+    });
+  }
+
+  // Create choice options
+  const monthOptions: React.ReactNode[] = [];
+  const dayOptions: React.ReactNode[] = [];
+  choices.forEach((choice) => {
+    // Create month option
+    monthOptions.push(
+      <option
+        key={choice.month}
+        value={choice.month}
+        aria-label={`choose ${choice.choiceName}`}
+        onSelect={() => {
+          onChange(choice.month, choice.days[0], choice.year);
+        }}
+      >
+        {choice.choiceName}
+      </option>
+    );
+
+    if (month === choice.month) {
+      // This is the currently selected month
+      // Create day options
+      choice.days.forEach((dayChoice) => {
+        const ordinal = getOrdinal(dayChoice);
+        dayOptions.push(
+          <option
+            key={dayChoice}
+            value={dayChoice}
+            aria-label={`choose date ${dayChoice}`}
+          >
+            {dayChoice}
+            {ordinal}
+          </option>
+        );
+      });
+    }
+  });
+
+  return (
+    <div
+      className="SimpleDateChooser d-inline-block"
+      aria-label={`date chooser with selected date: ${month} ${day}, ${year}`}
+    >
+      {/* Month Chooser */}
+      <select
+        aria-label={`month for ${ariaLabel}`}
+        className="custom-select d-inline-block mr-1"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-month`}
+        value={month}
+        onChange={(e) => {
+          const choice = choices[e.target.selectedIndex];
+
+          // Change day, month, and year
+          onChange(
+            choice.month,
+            choice.days[0],
+            choice.year,
+          );
+        }}
+      >
+        {monthOptions}
+      </select>
+
+      {/* Day Chooser */}
+      <select
+        aria-label={`day for ${ariaLabel}`}
+        className="custom-select d-inline-block"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-day`}
+        value={day}
+        onChange={(e) => {
+          // Only change the day
+          onChange(
+            month,
+            Number.parseInt(e.target.value, 10),
+            year,
+          );
+        }}
+      >
+        {dayOptions}
+      </select>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default SimpleDateChooser;

package/src/components/TabBox.tsx

@@ -15,6 +15,8 @@ type Props = {
   title: React.ReactNode,
   // Children/contents inside the box
   children: React.ReactNode,
+  // If true, don't add padding below the tab box
+  noBottomPadding?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -22,63 +24,67 @@ type Props = {
 /*------------------------------------------------------------------------*/
 
 const style = `
-/* Tab Box */
-.TabBox-box {
-  /* Light Border */
-  border: 2px solid #dedede;
-  
-  /* Rounded Corners (except top-left) */
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Very Light Gray Border */
-  background: #fdfdfd;
-
-  /* Align Contents on Left */
-  text-align: left;
-}
-
-/* Container for Title */
-.TabBox-title-container {
-  /* Place on Left */
-  position: relative;
-  left: 0;
-  text-align: left;
-}
-
-/* Tab-style Title */
-.TabBox-title {
-  /* Place so it Barely Overlaps the Box Border */
-  display: inline-block;
-  position: relative;
-  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
-
-  /* Title-sized Font */
-  font-size: 25px;
-
-  /* Add Border on Top and Sides */
-  border-top: 2px solid #dedede;
-  border-left: 2px solid #dedede;
-  border-right: 2px solid #dedede;
-
-  /* Round the Top Corners */
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Add Text Padding */
-  padding-left: 12px;
-  padding-right: 12px;
-
-  /* Match Background Color of Box */
-  background: #fdfdfd;
-}
-
-/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
-.TabBox-children {
-  position: relative;
-  z-index: 1;
-}
+  /* Tab Box */
+  .TabBox-box {
+    /* Light Border */
+    border: 0.15rem solid #dedede;
+    
+    /* Rounded Corners (except top-left) */
+    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    /* Very Light Gray Border */
+    background: #fdfdfd;
+
+    /* Align Contents on Left */
+    text-align: left;
+
+    /* Add Text Padding */
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
+  /* Container for Title */
+  .TabBox-title-container {
+    /* Place on Left */
+    position: relative;
+    left: 0;
+    text-align: left;
+  }
+
+  /* Tab-style Title */
+  .TabBox-title {
+    /* Place so it Barely Overlaps the Box Border */
+    display: inline-block;
+    position: relative;
+    top: 0.15rem; /* Gives Illusion that Border Doesn't Exist Below Tab */
+
+    /* Title-sized Font */
+    font-size: 1.5rem;
+
+    /* Add Border on Top and Sides */
+    border-top: 0.15rem solid #dedede;
+    border-left: 0.15rem solid #dedede;
+    border-right: 0.15rem solid #dedede;
+
+    /* Round the Top Corners */
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    /* Add Text Padding */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    /* Match Background Color of Box */
+    background: #fdfdfd;
+  }
+
+  /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+  .TabBox-children {
+    position: relative;
+    z-index: 1;
+  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -95,6 +101,7 @@ const TabBox: React.FC<Props> = (props) => {
   const {
     title,
     children,
+    noBottomPadding,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -107,7 +114,7 @@ const TabBox: React.FC<Props> = (props) => {
 
   // Full UI
   return (
-    <div>
+    <div className={`TabBox-container ${noBottomPadding ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 

package/src/helpers/genRouteHandler.ts

@@ -0,0 +1,329 @@
+// 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 opts object containing all arguments
+ * @param opts.paramTypes map containing the types for each parameter that is
+ *   included in the request (map: param name => type)
+ * @param opts.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),
+ *   next (express next function)
+ */
+const genRouteHandler = (
+  opts: {
+    paramTypes?: {
+      [k: string]: ParamType
+    },
+    handler: (
+      opts: {
+        params: {
+          [k: string]: any
+        },
+        handleSuccess: (body: any) => void,
+        handleError: (error: any) => void,
+        req: any,
+        res: any,
+        next: () => void,
+      },
+    ) => void,
+  },
+) => {
+  // Return a route handler
+  return async (req: any, res: any, next: () => void) => {
+    // Output params
+    const output: { [k in string]: any } = {};
+
+    /*----------------------------------------*/
+    /*              Parse Params              */
+    /*----------------------------------------*/
+
+    // Process items one by one
+    const paramList = Object.entries(opts.paramTypes ?? {});
+    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                              */
+    /*------------------------------------------------------------------------*/
+
+    opts.handler({
+      params: output,
+      handleSuccess: (body: any) => {
+        return handleSuccess(res, body);
+      },
+      handleError: (error: any) => {
+        return handleError(res, error);
+      },
+      req,
+      res,
+      next,
+    });
+  };
+};
+
+export default genRouteHandler;