dce-reactkit 3.12.3 → 4.0.0-beta.1

package/src/components/AppWrapper.tsx

@@ -32,10 +32,12 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
 import logClientEvent from '../helpers/logClientEvent';
+// TODO: fix dependency cycle
+// eslint-disable-next-line import/no-cycle
 import {
   getSessionExpiredMessage,
   isDarkModeOn,
-} from '../client/initClient';
+} from '../helpers/initClient';
 import waitMs from '../helpers/waitMs';
 
 // Import constants

package/src/components/CheckboxButton.tsx

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

package/src/components/Dropdown.tsx

@@ -16,7 +16,7 @@ import Variant from '../types/Variant';
 import DropdownItemType from '../types/DropdownItemType';
 
 // Check dark mode
-import { isDarkModeOn } from '../client/initClient';
+import { isDarkModeOn } from '../helpers/initClient';
 
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */

package/src/components/IntelliTable.tsx

@@ -315,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })

package/src/components/ItemPicker/NestableItemList.tsx

@@ -272,7 +272,6 @@ const NestableItemList: React.FC<Props> = (props) => {
                 }}
                 ariaLabel={`Select ${item.name}`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Light}
               />
 
               {/* Children */}

package/src/components/ItemPicker/index.tsx

@@ -33,8 +33,6 @@ type Props = {
   onChanged: (updatedItems: PickableItem[]) => void,
   // If true, don't add margin to bottom of item picker
   noBottomMargin?: boolean,
-  // If true, hide select all or none buttons
-  hideSelectAllOrNoneButtons?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -54,61 +52,12 @@ const ItemPicker: React.FC<Props> = (props) => {
     items,
     onChanged,
     noBottomMargin,
-    hideSelectAllOrNoneButtons,
   } = props;
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
-  /**
-   * Updates the checked state of an item (including all children)
-   * @author Yuen Ler Chow
-   * @param item the item to update
-   * @param checked the new checked state
-   * @returns the updated item
-   */
-  const updateItemChecked = (
-    item: PickableItem,
-    checked: boolean,
-  ): PickableItem => {
-    if (item.isGroup) {
-      return {
-        ...item,
-        children: item.children.map((child) => {
-          return updateItemChecked(child, checked);
-        }),
-      };
-    }
-    return { ...item, checked };
-  };
-
-  /**
-   * Selects all items in the list
-   * @author Yuen Ler Chow
-   */
-  const handleSelectAll = () => {
-    const updatedItems = items.map(
-      (item) => {
-        return updateItemChecked(item, true);
-      },
-    );
-    onChanged(updatedItems);
-  };
-
-  /**
-   * Deselects all items in the list
-   * @author Yuen Ler Chow
-   */
-  const handleDeselectAll = () => {
-    const updatedItems = items.map(
-      (item) => {
-        return updateItemChecked(item, false);
-      },
-    );
-    onChanged(updatedItems);
-  };
-
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -117,55 +66,10 @@ const ItemPicker: React.FC<Props> = (props) => {
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
-  // Select all/none
-  const selectAllOrNone = (
-    !hideSelectAllOrNoneButtons
-      ? (
-        <div
-          className="d-flex h-100 align-items-end flex-row"
-        >
-          <div className="d-flex justify-content-end">
-            {/* Label */}
-            <div
-              className="me-2"
-              style={{ fontSize: '1.2rem' }}
-            >
-              Select
-            </div>
-            {/* Buttons */}
-            <div className="btn-group" role="group">
-              {/* All */}
-              <button
-                type="button"
-                style={{ borderRight: '0.1rem solid white' }}
-                aria-label="Select all contexts"
-                className="btn btn-secondary py-0"
-                onClick={handleSelectAll}
-              >
-                All
-              </button>
-              {/* None */}
-              <button
-                type="button"
-                aria-label="Deselect all contexts"
-                className="btn btn-secondary py-0"
-                onClick={handleDeselectAll}
-              >
-                None
-              </button>
-            </div>
-          </div>
-        </div>
-      )
-      : undefined
-  );
-
-  // Main UI
   return (
     <TabBox
       title={title}
       noBottomMargin={noBottomMargin}
-      topRightChildren={selectAllOrNone}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/Modal/ModalProps.ts

@@ -69,10 +69,6 @@ type ModalProps = {
   confirmVariant?: Variant,
   // True if modal should be on top of other modals
   onTopOfOtherModals?: boolean,
-  // If true, the modal is loading
-  isLoading?: boolean,
-  // If true, the loading is cancelable
-  isLoadingCancelable?: boolean,
 };
 
 export default ModalProps;

package/src/components/Modal/index.tsx

@@ -14,9 +14,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 // Import other components
-import LoadingSpinner from '../LoadingSpinner';
-
-// Import helpers
 import waitMs from '../../helpers/waitMs';
 
 // Import types
@@ -32,7 +29,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 ----------------------------- */
@@ -44,7 +41,6 @@ const BASE_Z_INDEX_ON_TOP = 2000000000;
 
 // Constants
 const MS_TO_ANIMATE = 200; // Animation duration
-const MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR = 1000;
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -260,8 +256,6 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
-    isLoading,
-    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -272,7 +266,6 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
-  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -305,15 +298,6 @@ const Modal: React.FC<ModalProps> = (props) => {
         if (mounted.current) {
           setAnimatingIn(false);
         }
-        if (isLoading) {
-          // wait before showing modal
-          await waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
-          if (mounted.current) {
-            setShowModal(true);
-          }
-        } else {
-          setShowModal(true);
-        }
       })();
 
       return () => {
@@ -416,17 +400,6 @@ const Modal: React.FC<ModalProps> = (props) => {
     animationClass = 'Modal-animating-pop';
   }
 
-  // default to show close button when not loading and not show close button when loading
-  // unless downShowXButton or isLoadingCancelable
-  const showCloseButton = (
-    // The modal must have an onClose function
-    onClose
-    // ...and the close button is allowed to be visible
-    && !dontShowXButton
-    // ...and should not be shown if the modal is loading and not cancelable
-    && !(isLoading && !isLoadingCancelable)
-  );
-
   // Render the modal
   const contentToRender = (
     <div
@@ -463,8 +436,6 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
-
-      {showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -527,7 +498,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {showCloseButton && (
+              {(onClose && !dontShowXButton) && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -547,34 +518,25 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-
-          <div
-            className="modal-body"
-            style={{
-              color: (
-                isDarkModeOn()
-                  ? 'white'
-                  : undefined
-              ),
-              backgroundColor: (
-                isDarkModeOn()
-                  ? '#444'
-                  : undefined
-              ),
-            }}
-          >
-            {
-              isLoading
-                ? (
-                  <>
-                    <LoadingSpinner />
-                    <span className="sr-only">Content loading</span>
-                  </>
-                )
-                : children
-            }
-          </div>
-
+          {children && (
+            <div
+              className="modal-body"
+              style={{
+                color: (
+                  isDarkModeOn()
+                    ? 'white'
+                    : undefined
+                ),
+                backgroundColor: (
+                  isDarkModeOn()
+                    ? '#444'
+                    : undefined
+                ),
+              }}
+            >
+              {children}
+            </div>
+          )}
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -601,7 +563,6 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
-      )}
     </div>
   );
 

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/TabBox.tsx

@@ -15,8 +15,6 @@ 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
@@ -51,9 +49,7 @@ const style = `
 
   /* Container for Title */
   .TabBox-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    /* Place on Left */
     position: relative;
     left: 0;
     text-align: left;
@@ -86,19 +82,6 @@ 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;
@@ -115,10 +98,11 @@ const TabBox: React.FC<Props> = (props) => {
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
 
+  /* -------------- Props ------------- */
+
   const {
     title,
     children,
-    topRightChildren,
     noBottomPadding,
     noBottomMargin,
   } = props;
@@ -127,23 +111,21 @@ const TabBox: React.FC<Props> = (props) => {
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
 
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  // Full UI
   return (
     <div className={`TabBox-container ${noBottomMargin ? '' : 'mb-2'}`}>
       {/* Style */}
       <style>{style}</style>
 
-      {/* Title Row with Left and Right sections */}
+      {/* Title */}
       <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/{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

@@ -43,7 +43,7 @@ import DAY_IN_MS from './constants/DAY_IN_MS';
 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 +55,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 +65,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 +72,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 +88,13 @@ 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,8 +103,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 ReactKitErrorCode from './types/ReactKitErrorCode';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -202,7 +198,6 @@ export {
   someAsync,
   capitalize,
   shuffleArray,
-  getWordCount,
   // Client helpers
   initClient,
   visitServerEndpoint,
@@ -212,15 +207,8 @@ export {
   combineClassNames,
   useForceRender,
   setClientEventMetadataPopulator,
-  // Server helpers
-  initServer,
-  genRouteHandler,
-  handleError,
-  handleSuccess,
-  initLogCollection,
-  addDBEditorEndpoints,
-  visitEndpointOnAnotherServer,
   // Types
+  ParamType,
   ModalButtonType,
   ModalSize,
   ModalType,
@@ -234,6 +222,10 @@ export {
   LogBuiltInMetadata,
   LogMetadataType,
   LogFunction,
+  LogTypeSpecificInfo,
+  LogMainInfo,
+  LogSourceSpecificInfo,
+  LogLevel,
   IntelliTableColumn,
   DropdownItemType,
   // Component-specific-types
@@ -241,6 +233,4 @@ export {
   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 = 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;