dce-reactkit 4.0.2-beta-simple-date-chooser.1 → 4.1.0

package/src/components/Pagination.tsx

@@ -0,0 +1,172 @@
+// 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,
+  /**
+   * Handler for when page is changed
+   * @param page - the new page number
+   */
+  onPageChanged: (page: number) => void,
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const Pagination: React.FC<Props> = (props: Props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure props
+  const {
+    currentPage,
+    numPages,
+    loading = false,
+    onPageChanged,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  // 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/SimpleDateChooser.tsx

@@ -5,10 +5,7 @@
  */
 
 // Import React
-import React, { useReducer } from 'react';
-
-// Import AppWrapper helpers
-import { confirm } from './AppWrapper';
+import React from 'react';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
@@ -54,86 +51,32 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/* -------------------------------- State ------------------------------- */
+/* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
-/* -------------- Views ------------- */
-
-enum View {
-  // Date chooser
-  DateChooser = 'DateChooser',
-  // Invalid date
-  InvalidDate = 'InvalidDate',
-}
-
-/* -------- State Definition -------- */
-
-type State = {
-  view: View,
-};
-
-/* ------------- Actions ------------ */
-
-// Types of actions
-enum ActionType {
-  // Fix invalid date so it is now in range
-  FixInvalidDate = 'FixInvalidDate',
-}
-
-// Action definitions
-type Action = {
-  // Action type
-  type: ActionType.FixInvalidDate,
-};
-
-/**
- * Reducer that executes actions
- * @author Gardenia Liu
- * @param state current state
- * @param action action to execute
- * @returns updated state
- */
-const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case ActionType.FixInvalidDate: {
-      return {
-        ...state,
-        view: View.DateChooser,
-      };
-    }
-    default: {
-      return state;
-    }
-  }
-};
+const SimpleDateChooser: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
 
-/*------------------------------------------------------------------------*/
-/* --------------------------- Static Helpers --------------------------- */
-/*------------------------------------------------------------------------*/
+  /* -------------- Props ------------- */
 
-/**
- * Get the list of choices in the date chooser given props
- * @author Gardenia Liu
- * @author Gabe Abrams
- * @param opts object containing all arguments
- * @param opts.numMonthsToShow number of months to show
- * @param opts.dontAllowPast if true, the user isn't allowed to select dates in the past
- * @param opts.dontAllowFuture if true, the user isn't allowed to select dates in the future
- * @returns choices
- */
-const getChoices = (
-  opts: {
-    numMonthsToShow?: number,
-    dontAllowPast?: boolean,
-    dontAllowFuture?: boolean,
-  },
-) => {
-  // Destructure props
   const {
+    ariaLabel,
+    name,
+    onChange,
+    numMonthsToShow = 6,
     dontAllowFuture,
     dontAllowPast,
-    numMonthsToShow = 6,
-  } = opts;
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
 
   // Determine the set of choices allowed
   const today = getTimeInfoInET();
@@ -228,278 +171,93 @@ const getChoices = (
     });
   }
 
-  // Return choices
-  return choices;
-};
-
-/**
- * Checks whether a given date is outside the valid range of allowed choices
- * @author Gardenia Liu
- * @param opts object containing all arguments
- * @param opts.month 1-indexed month
- * @param opts.day day of the month
- * @param opts.year full year
- * @param opts.choices valid date choices
- * @returns true if date is out of range
- */
-const isDateOutOfRange = (
-  opts: {
-    month: number,
-    day: number,
-    year: number,
-    choices: {
-      month: number,
-      year: number,
-      days: number[]
-    }[],
-  },
-): boolean => {
+  // Create choice options
   const {
     month,
     day,
     year,
-    choices,
-  } = opts;
-
-  return !choices.some((choice) => {
-    return (
-      choice.month === month
-      && choice.year === year
-      && choice.days.includes(day)
-    );
-  });
-};
-
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
-/*------------------------------------------------------------------------*/
-
-const SimpleDateChooser: React.FC<Props> = (props) => {
-  /*------------------------------------------------------------------------*/
-  /* -------------------------------- Setup ------------------------------- */
-  /*------------------------------------------------------------------------*/
-
-  /* -------------- Props ------------- */
-
-  const {
-    ariaLabel,
-    name,
-    dontAllowPast,
-    dontAllowFuture,
-    numMonthsToShow,
-    onChange,
-    month,
-    day,
-    year,
   } = props;
-
-  // Get choices
-  const choices = getChoices({
-    numMonthsToShow,
-    dontAllowPast,
-    dontAllowFuture,
-  });
-
-  /* -------------- State ------------- */
-
-  // Check if the currently selected date is out of range
-  const currentSelectedDateOutOfRange = isDateOutOfRange({
-    month,
-    day,
-    year,
-    choices,
-  });
-
-  // Initial state
-  const initialState: State = {
-    view: (
-      currentSelectedDateOutOfRange
-        ? View.InvalidDate
-        : View.DateChooser
-    ),
-  };
-
-  // Initialize state
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  // Destructure common state
-  const {
-    view,
-  } = state;
-
-  /*------------------------------------------------------------------------*/
-  /* ------------------------- Component Functions ------------------------ */
-  /*------------------------------------------------------------------------*/
-
-  /**
-   * Ask the user if they want to edit an invalid date
-   * @author Gardenia Liu
-   * @author Gabe Abrams
-   */
-  const askToEditInvalidDate = async () => {
-    // Ask the user if they want to edit the date
-    const confirmed = await confirm(
-      'Are you sure?',
-      'The current date is outside the normal range. If you edit it, you\'ll need to choose a new date in the normal range.',
-      {
-        confirmButtonText: 'Edit Date',
-      },
+  const monthOptions: React.ReactNode[] = [];
+  const dayOptions: React.ReactNode[] = [];
+  choices.forEach((choice) => {
+    // Create month option
+    monthOptions.push(
+      <option
+        key={`${choice.year}-${choice.month}`}
+        value={`${choice.month}-${choice.year}`}
+        aria-label={`choose ${choice.choiceName}`}
+        onSelect={() => {
+          onChange(choice.month, choice.days[0], choice.year);
+        }}
+      >
+        {choice.choiceName}
+      </option>,
     );
 
-    // Check if user confirmed
-    if (confirmed) {
-      // Update the date to today
-      const today = getTimeInfoInET();
-      onChange(today.month, today.day, today.year);
-
-      // Update state
-      dispatch({
-        type: ActionType.FixInvalidDate,
+    // This is the currently selected month
+    if (month === choice.month) {
+      // Create day options
+      choice.days.forEach((dayChoice) => {
+        const ordinal = getOrdinal(dayChoice);
+        dayOptions.push(
+          <option
+            key={`${choice.year}-${choice.month}-${dayChoice}`}
+            value={dayChoice}
+            aria-label={`choose date ${dayChoice}`}
+          >
+            {dayChoice}
+            {ordinal}
+          </option>,
+        );
       });
     }
-  };
-
-  /*------------------------------------------------------------------------*/
-  /* ------------------------------- Render ------------------------------- */
-  /*------------------------------------------------------------------------*/
-
-  /*----------------------------------------*/
-  /* ---------------- Views --------------- */
-  /*----------------------------------------*/
-
-  // Body that will be filled with the current view
-  let body: React.ReactNode;
-
-  /* ---------- DateChooser ---------- */
-
-  if (view === View.DateChooser) {
-    // Create lists of options
-    const monthOptions: React.ReactNode[] = [];
-    const dayOptions: React.ReactNode[] = [];
-
-    // Render each option and add it to the list
-    choices.forEach((choice) => {
-      // Create month option
-      monthOptions.push(
-        <option
-          key={`${choice.year}-${choice.month}`}
-          value={`${choice.month}-${choice.year}`}
-          aria-label={`choose ${choice.choiceName}`}
-          onSelect={() => {
-            onChange(choice.month, choice.days[0], choice.year);
-          }}
-        >
-          {choice.choiceName}
-        </option>,
-      );
+  });
 
-      // This is the currently selected month
-      if (month === choice.month) {
-        // Create day options
-        choice.days.forEach((dayChoice) => {
-          const ordinal = getOrdinal(dayChoice);
-          dayOptions.push(
-            <option
-              key={`${choice.year}-${choice.month}-${dayChoice}`}
-              value={dayChoice}
-              aria-label={`choose date ${dayChoice}`}
-            >
-              {dayChoice}
-              {ordinal}
-            </option>,
+  return (
+    <div
+      className="SimpleDateChooser d-inline-block"
+      aria-label={`date chooser with selected date: ${month}/${day}/${year}`}
+    >
+      {/* Month Chooser */}
+      <select
+        aria-label={`month for ${ariaLabel}`}
+        className="custom-select d-inline-block mr-1"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-month`}
+        value={`${month}-${year}`}
+        onChange={(e) => {
+          const choice = choices[e.target.selectedIndex];
+
+          // Change day, month, and year
+          onChange(
+            choice.month,
+            choice.days[0],
+            choice.year,
           );
-        });
-      }
-    });
-
-    // Create body
-    body = (
-      <div
-        className="SimpleDateChooser-inner-container d-inline-block"
-        aria-label={`date chooser with selected date: ${month}/${day}/${year}`}
+        }}
       >
-        {/* Month Chooser */}
-        <select
-          aria-label={`month for ${ariaLabel}`}
-          className="custom-select d-inline-block mr-1"
-          style={{ width: 'auto' }}
-          id={`SimpleDateChooser-${name}-month`}
-          value={`${month}-${year}`}
-          onChange={(e) => {
-            const choice = choices[e.target.selectedIndex];
-
-            // Change day, month, and year
-            onChange(
-              choice.month,
-              choice.days[0],
-              choice.year,
-            );
-          }}
-        >
-          {monthOptions}
-        </select>
-
-        {/* Day Chooser */}
-        <select
-          aria-label={`day for ${ariaLabel}`}
-          className="custom-select d-inline-block"
-          style={{ width: 'auto' }}
-          id={`SimpleDateChooser-${name}-day`}
-          value={day}
-          onChange={(e) => {
-            // Only change the day
-            onChange(
-              month,
-              Number.parseInt(e.target.value, 10),
-              year,
-            );
-          }}
-        >
-          {dayOptions}
-        </select>
-      </div>
-    );
-  }
-
-  /* --------- DateOutOfRange --------- */
-
-  if (view === View.InvalidDate) {
-    body = (
-      <div className="SimpleDateChooser-inner-container d-inline-block">
-        <button
-          type="button"
-          className="btn btn-light"
-          onClick={askToEditInvalidDate}
-          aria-label={`edit date for ${ariaLabel}`}
-        >
-          {getMonthName(month).full}
-          {' '}
-          {day}
-          {getOrdinal(day)}
-          ,
-          {' '}
-          {year}
-        </button>
-        <button
-          type="button"
-          className="btn btn-secondary"
-          onClick={askToEditInvalidDate}
-          aria-label={`edit date for ${ariaLabel}`}
-        >
-          Edit
-        </button>
-      </div>
-    );
-  }
-
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
-
-  return (
-    <span className="SimpleDateChooser-outer-container">
-      {body}
-    </span>
+        {monthOptions}
+      </select>
+
+      {/* Day Chooser */}
+      <select
+        aria-label={`day for ${ariaLabel}`}
+        className="custom-select d-inline-block"
+        style={{ width: 'auto' }}
+        id={`SimpleDateChooser-${name}-day`}
+        value={day}
+        onChange={(e) => {
+          // Only change the day
+          onChange(
+            month,
+            Number.parseInt(e.target.value, 10),
+            year,
+          );
+        }}
+      >
+        {dayOptions}
+      </select>
+    </div>
   );
 };
 

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;