dce-reactkit 4.1.0 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/SimpleDateChooser.tsx

@@ -5,7 +5,10 @@
  */
 
 // Import React
-import React from 'react';
+import React, { useReducer } from 'react';
+
+// Import AppWrapper helpers
+import { confirm } from './AppWrapper';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
@@ -51,32 +54,86 @@ type Props = {
 };
 
 /*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
+/* -------------------------------- State ------------------------------- */
 /*------------------------------------------------------------------------*/
 
-const SimpleDateChooser: React.FC<Props> = (props) => {
-  /*------------------------------------------------------------------------*/
-  /* -------------------------------- Setup ------------------------------- */
-  /*------------------------------------------------------------------------*/
+/* -------------- Views ------------- */
 
-  /* -------------- Props ------------- */
+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;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/* --------------------------- Static Helpers --------------------------- */
+/*------------------------------------------------------------------------*/
+
+/**
+ * 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,
-  } = props;
-
-  /*------------------------------------------------------------------------*/
-  /* ------------------------------- Render ------------------------------- */
-  /*------------------------------------------------------------------------*/
-
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
+    numMonthsToShow = 6,
+  } = opts;
 
   // Determine the set of choices allowed
   const today = getTimeInfoInET();
@@ -171,93 +228,278 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     });
   }
 
-  // Create choice options
+  // 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 => {
   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;
-  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>,
+
+  // 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',
+      },
     );
 
-    // 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>,
-        );
+    // 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,
       });
     }
-  });
+  };
 
-  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,
-          );
-        }}
-      >
-        {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,
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- 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>,
           );
-        }}
+        });
+      }
+    });
+
+    // Create body
+    body = (
+      <div
+        className="SimpleDateChooser-inner-container d-inline-block"
+        aria-label={`date chooser with selected date: ${month}/${day}/${year}`}
       >
-        {dayOptions}
-      </select>
-    </div>
+        {/* 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>
   );
 };