dce-reactkit 3.2.1 → 3.2.2-beta.10

package/sandbox.js

@@ -1,20 +1,81 @@
-const { parallelLimit, waitMs } = require('.');
+const monthNames = [
+  { short: 'Jan', full: 'January' },
+  { short: 'Feb', full: 'February' },
+  { short: 'Mar', full: 'March' },
+  { short: 'Apr', full: 'April' },
+  { short: 'May', full: 'May' },
+  { short: 'Jun', full: 'June' },
+  { short: 'Jul', full: 'July' },
+  { short: 'Aug', full: 'August' },
+  { short: 'Sep', full: 'September' },
+  { short: 'Oct', full: 'October' },
+  { short: 'Nov', full: 'November' },
+  { short: 'Dec', full: 'December' },
+];
 
-(async () => {
+/**
+ * Get the name of a month given the month number (1 = January, etc.)
+ *   If an invalid number is provided, we will treat it like January
+ * @author Gabe Abrams
+ * @param month the number of the month
+ * @returns object containing multiple month name formats:
+ *   { short, full } where short will look like "Jan" and full will look like
+ *   "January"
+ */
+const getMonthName = (month) => {
+  return (monthNames[month - 1] ?? monthNames[0]);
+};
 
-  const tasks = [2, 4, 3, 5, 6, 20, 1, 1, 1, 1, 5, 4, 6].map((sec, i) => {
-    return async () => {
-      let prefix = '';
-      for (let j = 0; j < i; j++) {
-        prefix += '\t';
-      }
-      for (let j = 0; j < sec * 5; j++) {
-        await waitMs(200);
-        console.log(`${prefix}${j}/${sec * 5}`);
-      }
-      return i;
-    };
-  });
+today = {
+  year: 2023,
+  month: 1,
+  day: 11,
+};
+numMonthsToShow = 6;
+chooseFromPast = true;
+
+const choices = [];
+let startYear = today.year;
+let startMonth = today.month;
+if (chooseFromPast) {
+  startMonth -= Math.max(0, numMonthsToShow - 1);
+  if (startMonth <= 0) {
+    startMonth += 12;
+    startYear -= 1;
+  }
+}
+for (let i = 0; i < numMonthsToShow; i++) {
+  // Get month and year info
+  const unmoddedMonth = (startMonth + i);
+  const month = (
+    unmoddedMonth > 12
+      ? unmoddedMonth - 12
+      : unmoddedMonth
+  );
+  const monthName = getMonthName(month).full;
+  const year = (
+    unmoddedMonth > 12
+      ? startYear + 1
+      : startYear
+  );
 
-  const results = await parallelLimit(tasks, 1000);
-})();
+  // 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,
+  });
+}
+console.log(choices);

package/src/components/AppWrapper.tsx

@@ -21,6 +21,8 @@ import Modal from './Modal';
 
 // Import custom errors
 import ErrorWithCode from '../errors/ErrorWithCode';
+import logClientEvent from '../helpers/logClientEvent';
+import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
 
 /*------------------------------------------------------------------------*/
 /*                                  Props                                 */
@@ -222,6 +224,19 @@ export const showFatalError = (
       : String(error.code ?? ReactKitErrorCode.NoCode)
   );
 
+  // Add log
+  logClientEvent({
+    context: LogBuiltInMetadata.Context.ClientFatalError,
+    error: {
+      message,
+      code,
+      stack: (error ?? {}).stack,
+    },
+    metadata: {
+      errorTitle,
+    },
+  });
+
   // Handle case where app hasn't loaded
   if (!setFatalErrorMessage || !setFatalErrorCode) {
     alert(

package/src/components/ButtonInputGroup.tsx

@@ -18,6 +18,8 @@ type Props = {
   minLabelWidth?: string,
   // Buttons
   children: React.ReactNode,
+  // Additional class names to add to the outer container
+  className?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -36,6 +38,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
     label,
     minLabelWidth,
     children,
+    className,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -47,7 +50,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   return (
-    <div className="input-group">
+    <div className={`input-group ${className ?? ''}`}>
       <div className="input-group-prepend d-flex w-100">
         {/* Label */}
         <span

package/src/components/CSVDownloadButton.tsx

@@ -0,0 +1,102 @@
+/**
+ * Button for downloading a csv file
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // The filename
+  filename: string,
+  // The contents of the CSV file to download
+  csv: string,
+  // Id of the button
+  id?: string,
+  // Class name of the button
+  className?: string,
+  // Aria label for the button
+  ariaLabel?: string,
+  // Style for the button
+  style?: { [k: string]: any },
+  // Handler for when the button is clicked (in addition to download)
+  onClick?: () => void,
+  // Contents of button
+  children?: React.ReactNode,
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const CSVDownloadButton: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    filename,
+    csv,
+    id,
+    className,
+    ariaLabel,
+    style,
+    onClick,
+    children,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Render the button
+  return (
+    <a
+      id={id}
+      download={filename}
+      href={`data:application/octet-stream,${csv}`}
+      className={`CSVDownloadButton-button ${className ?? 'btn btn-secondary'}`}
+      aria-label={(
+        ariaLabel
+          ? `Click to download ${filename}`
+          : ariaLabel
+      )}
+      style={style}
+      onClick={onClick}
+    >
+      {!children && (
+        <>
+          <FontAwesomeIcon
+            icon={faCloudDownloadAlt}
+            className="mr-2"
+          />
+          Download CSV
+        </>
+      )}
+      {children}
+    </a>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default CSVDownloadButton;