dce-reactkit 3.4.0 → 3.5.1-beta.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "dce-reactkit",
-  "version": "3.4.0",
+  "version": "3.5.1-beta.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
-    "test": "jest --runInBand"
+    "test": "jest"
   },
   "jest": {
     "preset": "ts-jest",
@@ -28,25 +28,26 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "react": "^x.x.x"
+    "react": "^x.x.x",
+    "express": "^x.x.x"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@types/express": "^4.17.17",
     "@types/jest": "^28.1.7",
-    "@types/node": "^20.2.5",
     "@types/react": "^17.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "eslint": "^8.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "eslint": "^8.14.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "raixa": "^1.0.19",
@@ -54,6 +55,9 @@
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.9.5"
+    "typescript": "^4.6.3"
+  },
+  "dependencies": {
+    "react-select": "^5.7.3"
   }
 }

package/src/client/initClient.tsx

@@ -17,22 +17,22 @@ import ReactKitErrorCode from '../types/ReactKitErrorCode';
  */
 type SendRequestFunction = (
   opts: {
-    path: string;
-    method: ('GET' | 'POST' | 'DELETE' | 'PUT');
+    path: string,
+    method: ('GET' | 'POST' | 'DELETE' | 'PUT'),
     params?: {
-      [x: string]: any;
-    } | undefined;
+      [x: string]: any
+    } | undefined,
     headers?: {
-      [x: string]: any;
-    } | undefined;
-    numRetries?: number | undefined;
+      [x: string]: any,
+    } | undefined,
+    numRetries?: number | undefined,
   },
 ) => Promise<{
-  body: any;
-  status: number;
+  body: any,
+  status: number,
   headers: {
-    [x: string]: any;
-  };
+    [x: string]: any
+  },
 }>;
 
 /*----------------------------------------*/
@@ -56,32 +56,24 @@ let storedSendRequest: SendRequestFunction;
  * @returns sendRequest function
  */
 export const getSendRequest = async () => {
-  // Track timeout
-  let timedOut = false;
+  // Show timeout error if too much time passes
+  let successful = false;
   (async () => {
     await waitMs(5000);
-    timedOut = true;
+    
+    if (!successful) {
+      showFatalError(
+        new ErrorWithCode(
+          'Could not send a request because the request needed to be sent before dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
+          ReactKitErrorCode.NoCACCLSendRequestFunction,
+        ),
+      );
+    }
   })(),
 
   // Wait for initialization
   await initialized;
-
-  // Error if no send request function
-  if (timedOut) {
-    showFatalError(
-      new ErrorWithCode(
-        'Could not send a request because the request needed to be sent before dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
-        ReactKitErrorCode.NoCACCLSendRequestFunction,
-      ),
-    );
-
-    // Return dummy function that never resolves
-    return (
-      () => {
-        return new Promise(() => {});
-      }
-    ) as SendRequestFunction;
-  }
+  successful = true;
 
   // Return
   return storedSendRequest;

package/src/components/AppWrapper.tsx

@@ -434,4 +434,4 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 /*------------------------------------------------------------------------*/
 
 // Export component
-export default AppWrapper;
+export default AppWrapper;

package/src/components/DBEntryManagerPanel/AddOrEditDBEntry/CreatableMultiselect.tsx

@@ -0,0 +1,303 @@
+/**
+ * Multiselect component that allows the user to type in values and add them to
+ *   the multiselect component
+ * @author Yuen Ler Chow
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { KeyboardEventHandler, useReducer } from 'react';
+
+// Import React Select
+import CreatableSelect from 'react-select/creatable';
+import { MultiValue } from 'react-select';
+
+// Import other types
+import DBEntryFieldType from '../types/DBEntryFieldType';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Type of the field
+  type: DBEntryFieldType.StringArray | DBEntryFieldType.NumberArray,
+  // The values entered by the user
+  values: string[] | number[],
+  // Function to call when the values change
+  onChange: (values: string[] | number[]) => void,
+  // True if the field is disabled
+  disabled?: boolean,
+};
+
+// An option for the multiselect component
+type Option = {
+  // What the user sees and types in for the option
+  label: string,
+  // Lowercase, no spaces, no special characters of the label
+  value: string,
+};
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- State ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+/* -------- State Definition -------- */
+
+type State = {
+  // what the user has typed in so far(before pressing enter or tab)
+  inputValue: string,
+};
+
+/* ------------- Actions ------------ */
+
+// Types of actions
+enum ActionType {
+  // Update the input value
+  SetInputValue = 'SetInputValue',
+}
+
+// Action definitions
+type Action = (
+  | {
+    // Action type
+    type: ActionType.SetInputValue,
+    // New value
+    value: string,
+  }
+);
+
+/**
+ * Reducer that executes actions
+ * @author Yuen Ler Chow
+ * @param state current state
+ * @param action action to execute
+ * @returns updated state
+ */
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.SetInputValue: {
+      return {
+        ...state,
+        inputValue: action.value,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- State ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+const CreatableMultiselect: React.FC<Props> = (props) => {
+  // Destructure all props
+  const {
+    type,
+    values,
+    onChange,
+    disabled,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Initial state
+  const initialState: State = {
+    inputValue: '',
+  };
+
+  // Initialize state
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Destructure common state
+  const { inputValue } = state;
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Component Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Creates an option for the multiselect component
+   * @author Yuen Ler Chow
+   * @param label label of the option
+   * @returns the new option
+   */
+  const createOption = (label: string): Option => {
+    // set the value to the label without special characters and spaces, and lowercase
+    return {
+      label,
+      value: (
+        label
+          // Make lowercase
+          .toLowerCase()
+          // Replace special characters with nothing
+          .replace(/\W/g, '')
+          // Replace spaces with dashes
+          .replace(' ', '-')
+      ),
+    };
+  };
+
+  /**
+   * Adds the values to the multiselect component
+   * @author Yuen Ler Chow
+   * @param newValue new value to add
+   */
+  const addValues = (newValue: string) => {
+    if (type === DBEntryFieldType.NumberArray) {
+      const newValues = (
+        newValue
+          // Split into items
+          .split(',')
+          // Trim strings
+          .map((val) => {
+            return val.trim();
+          })
+          // Filter zero length
+          .filter((trimmedVal) => {
+            return trimmedVal.length > 0;
+          })
+          // Parse to number
+          .map(Number.parseFloat)
+          // Filter out existing values
+          .filter((numberVal) => {
+            return !values.some((value) => {
+              return value === numberVal;
+            });
+          })
+      );
+
+      // Notify parent of new values
+      onChange([...values, ...newValues] as number[]);
+    } else {
+      const newValues = (
+        newValue
+          // Split into items
+          .split(',')
+          // Trim strings
+          .map((val) => {
+            return val.trim();
+          })
+          // Filter zero length
+          .filter((trimmedVal) => {
+            return (trimmedVal.length > 0);
+          })
+          // Filter out existing values
+          .filter((val) => {
+            return !values.some((value) => {
+              return value === val;
+            });
+          })
+      );
+
+      // Notify parent of new values
+      onChange([...values, ...newValues] as string[]);
+    }
+
+    // Reset text field to empty because the values have been added
+    dispatch({
+      type: ActionType.SetInputValue,
+      value: '',
+    });
+  };
+
+  /**
+   * Adds the values to the multiselect component when enter or tab is pressed
+   * @author Yuen Ler Chow
+   * @param event keyboard event
+   */
+  const handleKeyDown: KeyboardEventHandler = (event) => {
+    // Skip if no input value
+    if (!inputValue) {
+      return;
+    }
+
+    // Add values if enter or tab is pressed
+    if (['Enter', 'Tab'].includes(event.key)) {
+      event.preventDefault();
+      addValues(inputValue);
+    }
+  };
+
+  /**
+   * Handles the input change of the multiselect component
+   * @author Yuen Ler Chow
+   * @param input input value
+   */
+  const handleInputChange = (input: string) => {
+    // Create copy of input value so we can modify it
+    let newValue = input;
+
+    // Don't allow user to type in non numbers
+    if (type === DBEntryFieldType.NumberArray) {
+      newValue = input.replace(/[^0-9,]/g, '');
+    }
+
+    if (input.includes(',')) {
+      // if the input has a comma, add the values separated by commas
+      addValues(newValue);
+    } else {
+      // simply update the input value to the new input value
+      dispatch({
+        type: ActionType.SetInputValue,
+        value: newValue,
+      });
+    }
+  };
+
+  /**
+   * Handles the value change of the multiselect component
+   * @author Yuen Ler Chow
+   * @param newValue new values
+   */
+  const handleValueChange = (newValues: MultiValue<Option>) => {
+    // Skip if no new values
+    if (!newValues) {
+      return;
+    }
+
+    // Update values based on type
+    if (type === DBEntryFieldType.NumberArray) {
+      const numberValues: number[] = newValues.map((val) => {
+        return Number.parseFloat(val.value);
+      });
+      onChange(numberValues);
+    } else {
+      const stringValues: string[] = newValues.map((val) => {
+        return val.value;
+      });
+      onChange(stringValues);
+    }
+  };
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  return (
+    <CreatableSelect
+      isDisabled={!!disabled}
+      components={{ DropdownIndicator: null }}
+      inputValue={inputValue}
+      isClearable
+      isMulti
+      menuIsOpen={false}
+      onChange={handleValueChange}
+      onInputChange={handleInputChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Type/paste value and press enter..."
+      value={values.map((val) => {
+        return createOption(String(val));
+      })}
+    />
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+export default CreatableMultiselect;