dce-reactkit 3.12.3 → 4.0.0-beta-logreviewer.1

package/src/components/Modal/index.tsx

@@ -32,7 +32,7 @@ import NUM_MODAL_PORTALS from '../../constants/NUM_MODAL_PORTALS';
 // Import shared helpers
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
-import { isDarkModeOn } from '../../client/initClient';
+import { isDarkModeOn } from '../../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Constants ----------------------------- */

package/src/components/Pagination.tsx

@@ -0,0 +1,162 @@
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props
+type Props = {
+  // Current page number (1-indexed)
+  currentPage: number,
+  // Total number of pages
+  numPages: number,
+  // True if a page change is in progress (to disable buttons)
+  loading?: boolean;
+  // Callback when a page is clicked
+  onPageChanged: (page: number) => void;
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const Pagination: React.FC<Props> = ({
+  currentPage,
+  numPages,
+  loading = false,
+  onPageChanged,
+}) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  // Compute pages to display
+  const pages: number[] = [];
+  const delta = 2; // how many pages to show on either side of current
+  let start = Math.max(1, currentPage - delta);
+  let end = Math.min(numPages, currentPage + delta);
+
+  // If we are too close to the beginning or end, shift the window.
+  if (currentPage - delta < 1) {
+    end = Math.min(numPages, end + (1 - (currentPage - delta)));
+  }
+  if (currentPage + delta > numPages) {
+    start = Math.max(1, start - ((currentPage + delta) - numPages));
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  return (
+    <nav aria-label="Page navigation for logs" className="mt-3">
+      <ul className="pagination justify-content-center">
+        {/* Previous Button */}
+        <li className={`page-item ${(currentPage <= 1 || loading) ? 'disabled' : ''}`}>
+          <button
+            type="button"
+            className="page-link"
+            onClick={() => { return onPageChanged(currentPage - 1); }}
+            disabled={currentPage <= 1 || loading}
+            aria-label="Go to previous page"
+          >
+            <FontAwesomeIcon icon={faArrowLeft} />
+            {' '}
+            Prev
+          </button>
+        </li>
+
+        {/* First page (if needed) */}
+        {currentPage > 3
+        && pages[0] !== 1
+        && (
+          <li className="page-item">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => { return onPageChanged(1); }}
+              disabled={loading}
+              aria-label="Go to page 1"
+            >
+              1
+            </button>
+          </li>
+        )}
+
+        {/* Ellipsis if gap between first page and start of window */}
+        {currentPage > 4 && (
+          <li className="page-item disabled">
+            <span className="page-link">...</span>
+          </li>
+        )}
+
+        {/* Page numbers */}
+        {pages.map((pageNum) => {
+          return (
+            <li key={pageNum} className={`page-item ${pageNum === currentPage ? 'active' : ''}`}>
+              <button
+                type="button"
+                className="page-link"
+                onClick={() => { return onPageChanged(pageNum); }}
+                disabled={loading}
+                aria-label={`Go to page ${pageNum}`}
+              >
+                {pageNum}
+              </button>
+            </li>
+          );
+        })}
+
+        {/* Ellipsis if gap between end of window and last page */}
+        {currentPage < numPages - 3 && (
+          <li className="page-item disabled">
+            <span className="page-link">...</span>
+          </li>
+        )}
+
+        {/* Last page (if needed) */}
+        {currentPage < numPages - 2
+        && pages[pages.length - 1] !== numPages
+        && (
+          <li className="page-item">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => { return onPageChanged(numPages); }}
+              disabled={loading}
+              aria-label="Go to last page"
+            >
+              {numPages}
+            </button>
+          </li>
+        )}
+
+        {/* Next Button */}
+        <li className={`page-item ${(currentPage >= numPages || loading) ? 'disabled' : ''}`}>
+          <button
+            type="button"
+            className="page-link"
+            onClick={() => { return onPageChanged(currentPage + 1); }}
+            disabled={currentPage >= numPages || loading}
+            aria-label="Go to next page"
+          >
+            Next
+            {' '}
+            <FontAwesomeIcon icon={faArrowRight} />
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;

package/src/components/RadioButton.tsx

@@ -13,7 +13,9 @@ import { faCircle } from '@fortawesome/free-regular-svg-icons';
 
 // Import shared types
 import Variant from '../types/Variant';
-import { isDarkModeOn } from '../client/initClient';
+
+// Import shared helpers
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

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/constants/LOG_REVIEW_GET_LOGS_ROUTE.ts

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

package/src/helpers/cloneDeep.ts

@@ -0,0 +1,11 @@
+import clone from 'nanoclone';
+
+/**
+ * Deeply clones an object
+ * @author Yuen Ler Chow
+ * @param obj the object to clone
+ * @returns a deep clone of the object
+ */
+const cloneDeep: <T>(obj: T) => T = clone;
+
+export default cloneDeep;

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

@@ -38,12 +38,16 @@ 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 LOG_REVIEW_GET_LOGS_ROUTE from './constants/LOG_REVIEW_GET_LOGS_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,7 +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 getMonthName from './helpers/getMonthName';
 import genCSV from './helpers/genCSV';
 import canReviewLogs from './helpers/canReviewLogs';
@@ -77,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';
@@ -94,16 +92,15 @@ 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 cloneDeep from './helpers/cloneDeep';
 
 // 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,8 +109,14 @@ 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 ReactKitErrorCode from './types/ReactKitErrorCode';
+import LogReviewerFilterState from './types/LogReviewerFilterState';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -159,6 +162,10 @@ export {
   MINUTE_IN_MS,
   HOUR_IN_MS,
   DAY_IN_MS,
+  LOG_REVIEW_ROUTE_PATH_PREFIX,
+  LOG_ROUTE_PATH,
+  LOG_REVIEW_STATUS_ROUTE,
+  LOG_REVIEW_GET_LOGS_ROUTE,
   // Dynamic Constants
   DynamicWord,
   // Helpers
@@ -203,6 +210,7 @@ export {
   capitalize,
   shuffleArray,
   getWordCount,
+  cloneDeep,
   // Client helpers
   initClient,
   visitServerEndpoint,
@@ -212,15 +220,8 @@ export {
   combineClassNames,
   useForceRender,
   setClientEventMetadataPopulator,
-  // Server helpers
-  initServer,
-  genRouteHandler,
-  handleError,
-  handleSuccess,
-  initLogCollection,
-  addDBEditorEndpoints,
-  visitEndpointOnAnotherServer,
   // Types
+  ParamType,
   ModalButtonType,
   ModalSize,
   ModalType,
@@ -234,13 +235,16 @@ export {
   LogBuiltInMetadata,
   LogMetadataType,
   LogFunction,
+  LogTypeSpecificInfo,
+  LogMainInfo,
+  LogSourceSpecificInfo,
+  LogLevel,
   IntelliTableColumn,
   DropdownItemType,
+  LogReviewerFilterState,
   // Component-specific-types
   PickableItem,
   DBEntry,
   DBEntryField,
   DBEntryFieldType,
-  // Server types
-  ParamType,
 };

package/src/types/LogReviewerFilterState/ActionErrorFilterState.ts

@@ -0,0 +1,21 @@
+import LogType from '../LogType';
+
+// Action filter state (only relevant for action logs)
+type ActionErrorFilterState = {
+  // Required type of log
+  type: LogType | undefined, // If undefined, no filter applied
+  // Query for error message (only relevant if type is error)
+  errorMessage: string, // If empty, no filter applied
+  // Query for error code (only relevant if type is error)
+  errorCode: string, // If empty, no filter applied
+  // Action targets to include (only relevant if type is action)
+  target: {
+    [k: string]: boolean
+  },
+  // Action types to include (only relevant if type is action)
+  action: {
+    [k: string]: boolean
+  },
+};
+
+export default ActionErrorFilterState;

package/src/types/LogReviewerFilterState/AdvancedFilterState.ts

@@ -0,0 +1,33 @@
+import LogSource from '../LogSource';
+
+// Advanced filter state
+type AdvancedFilterState = {
+  // Query for user first name (case insensitive)
+  userFirstName: string, // If empty, no filter applied
+  // Query for user last name (case insensitive)
+  userLastName: string, // If empty, no filter applied
+  // Query for user email (case insensitive)
+  userEmail: string, // If empty, no filter applied
+  // Match for userId (numerical)
+  userId: string, // If empty, no filter applied
+  // If true, include students
+  includeLearners: boolean,
+  // If true, include ttms
+  includeTTMs: boolean,
+  // If true, include admins
+  includeAdmins: boolean,
+  // Match for courseId (numerical)
+  courseId: string, // If empty, no filter applied
+  // Query for course name (case insensitive)
+  courseName: string, // If empty, no filter applied
+  // Required isMobile value
+  isMobile: (true | false | undefined), // If undefined, no filter applied
+  // Required log source value
+  source: LogSource | undefined, // If undefined, no filter applied
+  // Query for route path (only relevant if source is server)
+  routePath: string, // If empty, no filter applied
+  // Query for route template (only relevant if source is server)
+  routeTemplate: string, // If empty, no filter applied
+};
+
+export default AdvancedFilterState;

package/src/types/LogReviewerFilterState/ContextFilterState.ts

@@ -0,0 +1,13 @@
+// Context filter state
+type ContextFilterState = {
+  [k: string]: (
+    // No subcontexts
+    | boolean // True if selected
+    // Includes subcontexts
+    | {
+      [k: string]: boolean // True if selected
+    }
+  )
+};
+
+export default ContextFilterState;

package/src/types/LogReviewerFilterState/DateFilterState.ts

@@ -0,0 +1,23 @@
+// Date filter state
+type DateFilterState = {
+  // Current start date
+  startDate: {
+    // Full year
+    year: number,
+    // 1-indexed month
+    month: number,
+    // 1-indexed day
+    day: number,
+  },
+  // Current end date
+  endDate: {
+    // Full year
+    year: number,
+    // 1-indexed month
+    month: number,
+    // 1-indexed day
+    day: number,
+  },
+};
+
+export default DateFilterState;

package/src/types/LogReviewerFilterState/TagFilterState.ts

@@ -0,0 +1,6 @@
+// Tag filter state
+type TagFilterState = {
+  [k: string]: boolean // tag => true if in the list of tags to show
+};
+
+export default TagFilterState;

package/src/types/LogReviewerFilterState/index.ts

@@ -0,0 +1,24 @@
+import DateFilterState from './DateFilterState';
+import ContextFilterState from './ContextFilterState';
+import TagFilterState from './TagFilterState';
+import ActionErrorFilterState from './ActionErrorFilterState';
+import AdvancedFilterState from './AdvancedFilterState';
+
+/**
+ * A bundle of filter state objects for each type of filter
+ * @author Gabe Abrams
+ */
+type LogReviewerFilterState = {
+  // Date filter state
+  dateFilterState: DateFilterState,
+  // Context filter state
+  contextFilterState: ContextFilterState,
+  // Tag filter state
+  tagFilterState: TagFilterState,
+  // Action error filter state
+  actionErrorFilterState: ActionErrorFilterState,
+  // Advanced filter state
+  advancedFilterState: AdvancedFilterState,
+};
+
+export default LogReviewerFilterState;

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 = DRK18
+// Highest error code = DRK34
 
 /**
  * List of error codes built into the react kit
@@ -8,23 +8,7 @@ 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',
 }
 
 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;