dce-reactkit 3.12.1-beta-cross-server.8 → 4.0.0-beta-date-and-time.1

package/src/components/SimpleTimeChooser.tsx

@@ -0,0 +1,195 @@
+/**
+ * A very simple, lightweight time chooser
+ * @author Gardenia Liu
+ */
+
+// Import React
+import React from 'react';
+
+// Import helpers
+import padZerosLeft from '../helpers/padZerosLeft';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+type Props = {
+  // Aria label
+  ariaLabel: string,
+  // Name of the chooser (machine-readable, hyphenated)
+  name: string,
+  // Currently selected hour of the day (24hr)
+  hour: number,
+  // Currently selected minute within the hour
+  minute: number,
+  /**
+   * Handler for when time changes
+   * @param hour new 24hr hour number
+   * @param minute new minute number
+   */
+  onChange: (hour: number, minute: number) => void,
+  // Interval in minutes between each choice
+  // Allowed options: 15, 30, 60, defaults to 15
+  // If an unsupported interval is passed in, it will default to 15
+  intervalMin?: number,
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Constants ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Allowed intervals between options
+const ALLOWED_INTERVALS = [15, 30, 60]; // min
+
+// Default interval to use if an unsupported interval is passed in
+const DEFAULT_INTERVAL = ALLOWED_INTERVALS[0]; // min
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const SimpleTimeChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  const {
+    ariaLabel,
+    name,
+    hour,
+    minute,
+    onChange,
+  } = props;
+  let {
+    intervalMin = DEFAULT_INTERVAL,
+  } = props;
+
+  // Use default interval if not supported
+  if (ALLOWED_INTERVALS.includes(intervalMin)) {
+    intervalMin = DEFAULT_INTERVAL;
+  }
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Component Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Convert number of minutes since midnight into 24hour and minute format
+   * @author Gabe Abrams
+   * @param minSinceMidnight total minutes since midnight
+   * @returns hours (24) and minutes
+   */
+  const convertMinSinceMidnightToHoursAndMin = (minSinceMidnight: number): {
+    hours: number,
+    minutes: number,
+  } => {
+    return {
+      hours: Math.floor(minSinceMidnight / 60),
+      minutes: minSinceMidnight % 60,
+    };
+  };
+
+  /**
+   * Convert time in minutes into HH:MM format
+   * @author Gardenia Liu
+   * @param totalMinutes total minutes since midnight
+   * @returns formatted time string
+   */
+  const formatTime = (totalMinutes: number): string => {
+    // Handle special cases
+    if (totalMinutes === 0) {
+      return '12:00 Midnight';
+    }
+    if (totalMinutes === 12 * 60) {
+      return '12:00 Noon';
+    }
+
+    // All normal cases:
+    const timeInfo = convertMinSinceMidnightToHoursAndMin(totalMinutes);
+    let { hours } = timeInfo;
+    const { minutes } = timeInfo;
+
+    // Process 24hr -> 12hr
+    const isAM = (hours < 12);
+    if (hours === 0) {
+      hours = 12;
+    } else if (hours > 12) {
+      hours %= 12;
+    }
+
+    // Pad with zeros
+    const paddedMinutes = padZerosLeft(minutes, 2);
+
+    // Assemble time string
+    return `${hours}:${paddedMinutes} ${isAM ? 'AM' : 'PM'}`;
+  };
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Generate list of time options
+  const times: string[] = [];
+  for (let time = 0; time < 24 * 60; time += intervalMin) {
+    times.push(formatTime(time));
+  }
+
+  // Create choice options
+  const selectedTimeMin = hour * 60 + minute; // minutes since midnight
+  const timeOptions: React.ReactNode[] = times.map((timeString, timeIndex) => {
+    // Create time option
+    const numMinutesForChoice = timeIndex * intervalMin;
+
+    // Render the option
+    return (
+      <option
+        key={numMinutesForChoice}
+        value={numMinutesForChoice}
+        aria-label={`choose ${timeString}`}
+      >
+        {timeString}
+      </option>
+    );
+  });
+
+  return (
+    <div
+      className="SimpleTimeChooser-container"
+      aria-label={`time chooser with selected time: ${formatTime(selectedTimeMin)}`}
+    >
+      {/* Time Chooser */}
+      <select
+        aria-label={`time for ${ariaLabel}`}
+        className="custom-select d-inline-block"
+        style={{ width: 'auto' }}
+        id={`SimpleTimeChooser-${name}-time`}
+        value={selectedTimeMin}
+        onChange={(e) => {
+          // Parse selector value (string)
+          const newTime = Number.parseInt(e.target.value, 10);
+
+          // Convert minutes since midnight to hour and minute
+          const timeInfo = convertMinSinceMidnightToHoursAndMin(newTime);
+
+          // Notify parent of change
+          onChange(timeInfo.hours, timeInfo.minutes);
+        }}
+      >
+        {timeOptions}
+      </select>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default SimpleTimeChooser;

package/src/components/TabBox.tsx

@@ -15,6 +15,8 @@ type Props = {
   title: React.ReactNode,
   // Children/contents inside the box
   children: React.ReactNode,
+  // Children to display on the top right of the tab box
+  topRightChildren?: React.ReactNode,
   // If true, don't add margin below the tab box
   noBottomMargin?: boolean,
   // If true, don't add padding to bottom of tab box
@@ -49,7 +51,9 @@ const style = `
 
   /* Container for Title */
   .TabBox-title-container {
-    /* Place on Left */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     position: relative;
     left: 0;
     text-align: left;
@@ -82,6 +86,19 @@ const style = `
     background: #fdfdfd;
   }
 
+  .TabBox-title-right-container {
+    display: flex;
+    flex-direction: row;
+    align-items: bottom;
+    height: 2.4rem;
+    overflow: visible;
+  }
+
+  .TabBox-title-right-contents {
+    margin-right: 0.5rem;
+    margin-bottom: 0.2rem;
+  }
+
   /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
   .TabBox-children {
     position: relative;
@@ -98,11 +115,10 @@ const TabBox: React.FC<Props> = (props) => {
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /* -------------- Props ------------- */
-
   const {
     title,
     children,
+    topRightChildren,
     noBottomPadding,
     noBottomMargin,
   } = props;
@@ -111,21 +127,23 @@ const TabBox: React.FC<Props> = (props) => {
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
-
-  // Full UI
   return (
     <div className={`TabBox-container ${noBottomMargin ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 
-      {/* Title */}
+      {/* Title Row with Left and Right sections */}
       <div className="TabBox-title-container">
         <div className="TabBox-title">
           {title}
         </div>
+        {topRightChildren && (
+          <div className="TabBox-title-right-container">
+            <div className="TabBox-title-right-contents">
+              {topRightChildren}
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Contents */}

package/src/components/Tooltip.tsx

@@ -15,7 +15,7 @@ type Props = {
   // Text of the tooltip
   text: string,
   // Children to wrap in the tooltip
-  children: JSX.Element,
+  children: any,
 };
 
 /*------------------------------------------------------------------------*/

package/src/helpers/getWordCount.ts

@@ -0,0 +1,26 @@
+const punctuationRegex = /[!@#$%^&*(),.?\/;:'"\-\[\]]/g;
+
+/**
+ * Get number of words in string 
+ * @author Gardenia Liu
+ * @author Allison Zhang
+ * @author Gabe Abrams
+ * @param text the string to check
+ * @returns number of words in the string
+ */
+const getWordCount = (text: string): number => {
+  const trimmedTextWithoutPunctuation = (
+    text
+      // Remove leading and trailing whitespace
+      .trim()
+      // Remove punctuation
+      .replace(punctuationRegex, '')
+  );
+  if (trimmedTextWithoutPunctuation.length === 0) {
+    return 0;
+  }
+
+  return trimmedTextWithoutPunctuation.split(/\s+/g).length;
+};
+
+export default getWordCount;

package/src/{client → helpers}/initClient.tsx

@@ -3,9 +3,11 @@
 // eslint-disable-next-line import/no-cycle
 import { showFatalError } from '../components/AppWrapper';
 
+// Import other helpers
+import waitMs from './waitMs';
+
 // Import shared types
 import ErrorWithCode from '../errors/ErrorWithCode';
-import waitMs from '../helpers/waitMs';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
 /*----------------------------------------*/
@@ -164,10 +166,12 @@ const initClient = (
     storedSendRequest = async () => {
       throw new Error('Cannot send requests because there is no server');
     };
+    noServer = true;
   } else {
     // Store values
     storedSendRequest = opts.sendRequest;
     sessionExpiredMessage = opts.sessionExpiredMessage;
+    noServer = false;
   }
 
   // Handle universal parts

package/src/helpers/logClientEvent.tsx

@@ -5,10 +5,12 @@ import LogFunction from '../types/LogFunction';
 import LogLevel from '../types/LogLevel';
 
 // Import shared functions
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import visitServerEndpoint from './visitServerEndpoint';
 
 // Import status
-import { appHasNoServer } from '../client/initClient';
+import { appHasNoServer } from './initClient';
 
 /* ------- Metadata Populator ------- */
 

package/src/helpers/visitServerEndpoint.tsx

@@ -7,7 +7,7 @@ import ReactKitErrorCode from '../types/ReactKitErrorCode';
 // Import helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { getSendRequest } from '../client/initClient';
+import { getSendRequest } from './initClient';
 import { showSessionExpiredMessage } from '../components/AppWrapper';
 
 /*------------------------------------------------------------------------*/

package/src/index.ts

@@ -15,6 +15,7 @@ import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';
 import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
+import SimpleTimeChooser from './components/SimpleTimeChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
 import PopFailureMark from './components/PopFailureMark';
@@ -38,12 +39,15 @@ import ErrorWithCode from './errors/ErrorWithCode';
 import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
 import HOUR_IN_MS from './constants/HOUR_IN_MS';
 import DAY_IN_MS from './constants/DAY_IN_MS';
+import LOG_REVIEW_ROUTE_PATH_PREFIX from './constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
+import LOG_ROUTE_PATH from './constants/LOG_ROUTE_PATH';
+import LOG_REVIEW_STATUS_ROUTE from './constants/LOG_REVIEW_STATUS_ROUTE';
 
 // Import dynamic constants
 import DynamicWord from './dynamicConstants/DynamicWord';
 
 // Import helpers
-import initClient from './client/initClient';
+import initClient from './helpers/initClient';
 import abbreviate from './helpers/abbreviate';
 import avg from './helpers/avg';
 import ceilToNumDecimals from './helpers/ceilToNumDecimals';
@@ -55,10 +59,6 @@ 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 initServer from './server/initServer';
 import getOrdinal from './helpers/getOrdinal';
 import getTimeInfoInET from './helpers/getTimeInfoInET';
 import stubServerEndpoint from './helpers/stubServerEndpoint';
@@ -69,8 +69,6 @@ import stringsToHumanReadableList from './helpers/stringsToHumanReadableList';
 import onlyKeepLetters from './helpers/onlyKeepLetters';
 import parallelLimit from './helpers/parallelLimit';
 import logClientEvent, { setClientEventMetadataPopulator } from './helpers/logClientEvent';
-import initLogCollection from './server/initLogCollection';
-import initCrossServerCredentialCollection from './server/initCrossServerCredentialCollection';
 import getMonthName from './helpers/getMonthName';
 import genCSV from './helpers/genCSV';
 import canReviewLogs from './helpers/canReviewLogs';
@@ -78,7 +76,6 @@ import isMobileOrTablet from './helpers/isMobileOrTablet';
 import extractProp from './helpers/extractProp';
 import compareArraysByProp from './helpers/compareArraysByProp';
 import getLocalTimeInfo from './helpers/getLocalTimeInfo';
-import addDBEditorEndpoints from './helpers/addDBEditorEndpoints';
 import genCommaList from './helpers/genCommaList';
 import validateEmail from './helpers/validators/validateEmail';
 import validatePhoneNumber from './helpers/validators/validatePhoneNumber';
@@ -95,15 +92,14 @@ import mapAsync from './helpers/asyncArrayFunctions/mapAsync';
 import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
-import visitEndpointOnAnotherServer from './helpers/visitEndpointOnAnotherServer';
+import getWordCount from './helpers/getWordCount';
 
 // Import types
+import ParamType from './types/ParamType';
 import ModalButtonType from './types/ModalButtonType';
 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';
 import DayOfWeek from './types/DayOfWeek';
 import Log from './types/Log';
 import LogType from './types/LogType';
@@ -112,9 +108,13 @@ import LogAction from './types/LogAction';
 import LogBuiltInMetadata from './types/LogBuiltInMetadata';
 import LogMetadataType from './types/LogMetadataType';
 import LogFunction from './types/LogFunction';
+import LogTypeSpecificInfo from './types/Log/LogTypeSpecificInfo';
+import LogMainInfo from './types/Log/LogMainInfo';
+import LogSourceSpecificInfo from './types/Log/LogSourceSpecificInfo';
+import LogLevel from './types/LogLevel';
 import IntelliTableColumn from './types/IntelliTableColumn';
 import DropdownItemType from './types/DropdownItemType';
-import CrossServerCredential from './types/CrossServerCredential';
+import ReactKitErrorCode from './types/ReactKitErrorCode';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -134,6 +134,7 @@ export {
   CheckboxButton,
   ButtonInputGroup,
   SimpleDateChooser,
+  SimpleTimeChooser,
   Drawer,
   PopSuccessMark,
   PopFailureMark,
@@ -160,6 +161,9 @@ export {
   MINUTE_IN_MS,
   HOUR_IN_MS,
   DAY_IN_MS,
+  LOG_REVIEW_ROUTE_PATH_PREFIX,
+  LOG_ROUTE_PATH,
+  LOG_REVIEW_STATUS_ROUTE,
   // Dynamic Constants
   DynamicWord,
   // Helpers
@@ -203,6 +207,7 @@ export {
   someAsync,
   capitalize,
   shuffleArray,
+  getWordCount,
   // Client helpers
   initClient,
   visitServerEndpoint,
@@ -212,16 +217,8 @@ export {
   combineClassNames,
   useForceRender,
   setClientEventMetadataPopulator,
-  // Server helpers
-  initServer,
-  genRouteHandler,
-  handleError,
-  handleSuccess,
-  initLogCollection,
-  initCrossServerCredentialCollection,
-  addDBEditorEndpoints,
-  visitEndpointOnAnotherServer,
   // Types
+  ParamType,
   ModalButtonType,
   ModalSize,
   ModalType,
@@ -235,14 +232,15 @@ export {
   LogBuiltInMetadata,
   LogMetadataType,
   LogFunction,
+  LogTypeSpecificInfo,
+  LogMainInfo,
+  LogSourceSpecificInfo,
+  LogLevel,
   IntelliTableColumn,
   DropdownItemType,
-  CrossServerCredential,
   // Component-specific-types
   PickableItem,
   DBEntry,
   DBEntryField,
   DBEntryFieldType,
-  // Server types
-  ParamType,
 };

package/src/types/ParamType.ts

@@ -3,16 +3,16 @@
  * @author Gabe Abrams
  */
 enum ParamType {
-  Boolean = 'boolean', // Boolean
-  BooleanOptional = 'boolean-optional', // Optional boolean
-  Float = 'float', // Float Number
-  FloatOptional = 'float-optional', // Optional Float Number
-  Int = 'int', // Integer Number
-  IntOptional = 'int-optional', // Optional Integer Number
-  JSON = 'json', // JSONified object
-  JSONOptional = 'json-optional', // Optional JSONified object
-  String = 'string', // String
-  StringOptional = 'string-optional', // Optional string
+  Boolean = 'Boolean', // Boolean
+  BooleanOptional = 'BooleanOptional', // Optional boolean
+  Float = 'Float', // Float Number
+  FloatOptional = 'FloatOptional', // Optional Float Number
+  Int = 'Int', // Integer Number
+  IntOptional = 'IntOptional', // Optional Integer Number
+  JSON = 'JSON', // JSONified object
+  JSONOptional = 'JSONOptional', // Optional JSONified object
+  String = 'String', // String
+  StringOptional = 'StringOptional', // Optional string
 }
 
 export default ParamType;

package/src/types/ReactKitErrorCode.tsx

@@ -1,4 +1,4 @@
-// Highest error code = DRK34
+// Highest error code = DRK36
 
 /**
  * List of error codes built into the react kit
@@ -8,37 +8,9 @@ enum ReactKitErrorCode {
   NoResponse = 'DRK1',
   NoCode = 'DRK2',
   SessionExpired = 'DRK3',
-  MissingParameter = 'DRK4',
-  InvalidParameter = 'DRK5',
-  HostNotAllowed = 'DRK17',
-  HostBanned = 'DRK18',
-  WrongCourse = 'DRK6',
   NoCACCLSendRequestFunction = 'DRK7',
-  NoCACCLGetLaunchInfoFunction = 'DRK8',
-  NotTTM = 'DRK9',
-  NotAdmin = 'DRK10',
-  NotAllowedToReviewLogs = 'DRK11',
-  ThemeCheckedBeforeReactKitReady = 'DRK12',
-  SessionExpiredMessageGottenBeforeReactKitReady = 'DRK13',
-
-  // Server-to-server requests
-  NotConnected = 'DRK14',
-  SelfSigned = 'DRK15',
-  ResponseParseError = 'DRK16',
-  SignedRequestUnparseable = 'DRK28',
-  SignedRequestInvalidCollection = 'DRK21',
-  SignedRequestInvalidCredential = 'DRK23',
-  SignedRequestInvalidScope = 'DRK22',
-  SignedRequestInvalidTimestamp = 'DRK24',
-  SignedRequestInvalidSignature = 'DRK25',
-  SignedRequestInvalidBody = 'DRK26',
-  CrossServerNoCredentialsToSignWith = 'DRK27',
-  CrossServerMissingSignedRequestInfo = 'DRK29',
-  CrossServerNoCredentialEncodingSalt = 'DRK30',
-  NoOauthLib = 'DRK31',
-  NoCryptoLib = 'DRK32',
-  InvalidCrossServerCredentialsFormat = 'DRK33',
-  UnknownCrossServerError = 'DRK34',
+  SimpleDateChooserInvalidDateRange = 'DRK35',
+  SimpleDateChooserInvalidNumMonths = 'DRK36',
 }
 
 export default ReactKitErrorCode;

package/dist/cjs/types/components/ItemPicker/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cjs/types/helpers/addDBEditorEndpoints.d.ts

@@ -1,41 +0,0 @@
-import express from 'express';
-/**
- * Interface for a collection in the database
- * @author Yuen Ler Chow
- */
-type DCEMangoCollection = {
-    /**
-     * Find all items in the collection that match the filter query
-     * @param filterQuery query for the filter
-     * @returns list of items that match the filter query
-     */
-    find: (filterQuery: any) => Promise<any[]>;
-    /**
-     * Insert an item into the collection
-     * @param item the item to insert
-     */
-    insert: (item: any) => Promise<void>;
-    /**
-     * Delete an item in the collection
-     * @param id the id of the item to delete
-     */
-    delete: (filterQuery: {
-        id: string;
-    }) => Promise<void>;
-};
-/**
- * Add all routes for the DBEditor
- * @author Yuen Ler Chow
- * @param opts object containing all arguments
- * @param opts.app express app to add routes too
- * @param opts.collectionName the name of the collection
- * @param opts.adminsOnly true if the endpoint is for admins only
- * @param opts.collection dce-mango db collection
- */
-declare const addDBEditorEndpoints: (opts: {
-    app: express.Application;
-    collectionName: string;
-    adminsOnly: boolean;
-    collection: DCEMangoCollection;
-}) => void;
-export default addDBEditorEndpoints;

package/dist/cjs/types/helpers/dataSigner.d.ts

@@ -1,40 +0,0 @@
-/**
- * Sign a request and get the new request params
- * @author Gabe Abrams
- * @param opts object containing all arguments
- * @param opts.method the method to sign
- * @param opts.path the http request path
- * @param opts.params the data in the body to sign
- * @param opts.key the reactkit key to sign with
- * @param opts.secret the reactkit secret to sign with
- * @return augmented params for the request, including a signature, timestamp, and key
- */
-export declare const signRequest: (opts: {
-    method: string;
-    path: string;
-    params: {
-        [key: string]: any;
-    };
-    key: string;
-    secret: string;
-}) => Promise<{
-    [key: string]: any;
-}>;
-/**
- * Validate a signed request. Throws an error if invalid
- * @author Gabe Abrams
- * @param opts object containing all arguments
- * @param opts.method the method of the data validate
- * @param opts.path the http request path to validate
- * @param opts.scope the name of the scope to validate
- * @param opts.params the request data to validate
- * @returns parsed and validated params
- */
-export declare const validateSignedRequest: (opts: {
-    method: string;
-    path: string;
-    scope: string;
-    params: {
-        [key: string]: any;
-    };
-}) => Promise<void>;