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

package/src/components/SimpleDateChooser.tsx

@@ -1,16 +1,26 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardenia Liu
  */
 
 // Import React
-import React from 'react';
-import getMonthName from '../helpers/getMonthName';
+import React, { useReducer } from 'react';
+
+// Import AppWrapper helpers
+import { confirm } from './AppWrapper';
 
 // Import helpers
 import getOrdinal from '../helpers/getOrdinal';
+import getMonthName from '../helpers/getMonthName';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
 
+// Import classes
+import ErrorWithCode from '../errors/ErrorWithCode';
+
+// Import types
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Types ------------------------------- */
 /*------------------------------------------------------------------------*/
@@ -33,40 +43,97 @@ type Props = {
    * @param year new full year number
    */
   onChange: (month: number, day: number, year: number) => void,
-  // Number of months to allow the user to choose from
-  // (max is 12, default is 6)
+  // Number of months in either the past or future to allow the user to choose from
+  // If we aren't allowing the past or the future, we will throw an error
+  // (max is 12, default is 6 in the past and 6 in the future)
   numMonthsToShow?: number,
-  // If true, instead of showing numMonthsToShow months into the future,
-  // show numMonthsToShow months into the past
-  chooseFromPast?: boolean,
+  // If true, the user isn't allowed to select dates in the past
+  dontAllowPast?: boolean,
+  // If true, the user isn't allowed to select dates in the future
+  dontAllowFuture?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
+/* -------------------------------- State ------------------------------- */
 /*------------------------------------------------------------------------*/
 
-const SimpleDateChooser: React.FC<Props> = (props) => {
-  /*------------------------------------------------------------------------*/
-  /* -------------------------------- Setup ------------------------------- */
-  /*------------------------------------------------------------------------*/
+/* -------------- Views ------------- */
 
-  /* -------------- Props ------------- */
+enum View {
+  // Date chooser
+  DateChooser = 'DateChooser',
+  // Invalid date
+  InvalidDate = 'InvalidDate',
+}
 
-  const {
-    ariaLabel,
-    name,
-    onChange,
-    chooseFromPast,
-    numMonthsToShow = 6,
-  } = props;
+/* -------- State Definition -------- */
 
-  /*------------------------------------------------------------------------*/
-  /* ------------------------------- Render ------------------------------- */
-  /*------------------------------------------------------------------------*/
+type State = {
+  view: View,
+};
 
-  /*----------------------------------------*/
-  /* --------------- Main UI -------------- */
-  /*----------------------------------------*/
+/* ------------- 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 {
+    dontAllowFuture,
+    dontAllowPast,
+    numMonthsToShow = 6,
+  } = opts;
 
   // Determine the set of choices allowed
   const today = getTimeInfoInET();
@@ -76,16 +143,41 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     days: number[],
     year: number,
   }[] = [];
+
   let startYear = today.year;
   let startMonth = today.month;
-  if (chooseFromPast) {
+
+  // Don't allow past or future dates
+  if (dontAllowPast && dontAllowFuture) {
+    throw new ErrorWithCode(
+      'No past or future dates allowed',
+      ReactKitErrorCode.SimpleDateChooserInvalidDateRange,
+    );
+  }
+
+  // Require numMonthsToShow to be positive
+  if (numMonthsToShow <= 0) {
+    throw new ErrorWithCode(
+      'numMonthsToShow must be positive',
+      ReactKitErrorCode.SimpleDateChooserInvalidNumMonths,
+    );
+  }
+
+  // Recalculate startMonth and startYear when allowing past dates
+  if (!dontAllowPast) {
     startMonth -= Math.max(0, numMonthsToShow - 1);
     while (startMonth <= 0) {
       startMonth += 12;
       startYear -= 1;
     }
   }
-  for (let i = 0; i < numMonthsToShow; i++) {
+  // Calculate total number of months to show
+  let totalMonthsToShow = numMonthsToShow;
+  if (!dontAllowPast && !dontAllowFuture) {
+    totalMonthsToShow = totalMonthsToShow * 2 - 1;
+  }
+
+  for (let i = 0; i < totalMonthsToShow; i++) {
     // Get month and year info
     const unmoddedMonth = (startMonth + i);
     let month = unmoddedMonth;
@@ -105,24 +197,25 @@ const SimpleDateChooser: React.FC<Props> = (props) => {
     // Figure out which days are allowed
     const days = [];
     const numDaysInMonth = (new Date(year, month, 0)).getDate();
-    if (chooseFromPast) {
-      // Past selection
-      const numDaysToAdd = (
-        (month === today.month)
-          ? today.day // Current month, only add up to today
-          : numDaysInMonth // Past month, add all days
-      );
-      for (let day = 1; day <= numDaysToAdd; day++) {
-        days.push(day);
+
+    // Current month
+    if (month === today.month && year === today.year) {
+      // Past selection: add all previous days of the month
+      if (!dontAllowPast) {
+        for (let day = 1; day < today.day; day++) {
+          days.push(day);
+        }
       }
-    } else {
+      days.push(today.day); // Add current day
       // Future selection: add all remaining days of the month
-      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++) {
+      if (!dontAllowFuture) {
+        for (let day = today.day + 1; day <= numDaysInMonth; day++) {
+          days.push(day);
+        }
+      }
+    } else { // Past or future month
+      // Include all days in the month
+      for (let day = 1; day <= numDaysInMonth; day++) {
         days.push(day);
       }
     }
@@ -135,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',
+      },
     );
 
-    if (month === choice.month) {
-      // This is the currently selected 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>
   );
 };