Lesson Plan JS -> TS UI conversion and implementation enhancements

client/app/bundles/course/lesson-plan/constants.ts

@@ -0,0 +1,13 @@
+import mirrorCreator from 'mirror-creator';
+
+export const fields = mirrorCreator([
+  'ITEM_TYPE',
+  'TITLE',
+  'START_AT',
+  'BONUS_END_AT',
+  'END_AT',
+  'PUBLISHED',
+  'LOCATION',
+  'DESCRIPTION',
+  'EVENT_TYPE',
+]);

client/app/bundles/course/lesson-plan/containers/EventFormDialog/index.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+
+import FormDialogue from 'lib/components/form/FormDialogue';
+import { useAppSelector } from 'lib/hooks/store';
+
+import { EventFormValues, FormSubmitHandler } from '../../types';
+
+import EventForm from './EventForm';
+
+interface EventFormDialogProps {
+  open: boolean;
+  onClose: () => void;
+  formTitle?: string;
+  initialValues: EventFormValues;
+  onSubmit: FormSubmitHandler<EventFormValues>;
+}
+
+interface EventSuggestions {
+  eventTypes: string[];
+  eventLocations: string[];
+}
+
+/**
+ * Controlled by whoever opens it: the owner supplies the handler and the initial
+ * values, and the dialog closes itself once `onSubmit` reports success. The
+ * handler used to be stashed in the Redux store, which is not serialisable.
+ *
+ * The existing event types and locations are still read from the store, since
+ * they are derived from the lesson plan itself rather than from the opener.
+ */
+const EventFormDialog = (props: EventFormDialogProps): JSX.Element => {
+  const { open, onClose, formTitle, initialValues, onSubmit } = props;
+
+  const [isDirty, setIsDirty] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const items = useAppSelector((state) => state.lessonPlan.lessonPlan.items);
+
+  const { eventTypes, eventLocations } = items.reduce<EventSuggestions>(
+    (values, item) => {
+      if (!item.eventId) {
+        return values;
+      }
+      if (item.location) {
+        values.eventLocations.push(item.location);
+      }
+      if (item.lesson_plan_item_type?.[0]) {
+        values.eventTypes.push(item.lesson_plan_item_type[0]);
+      }
+      return values;
+    },
+    { eventTypes: [], eventLocations: [] },
+  );
+
+  const handleSubmit: FormSubmitHandler<EventFormValues> = async (
+    data,
+    setError,
+  ) => {
+    setSubmitting(true);
+    try {
+      const succeeded = await onSubmit(data, setError);
+      if (succeeded) onClose();
+      return succeeded;
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <FormDialogue
+      disabled={submitting}
+      form="event-form"
+      hideForm={onClose}
+      open={open}
+      skipConfirmation={!isDirty}
+      title={formTitle}
+    >
+      <EventForm
+        disabled={submitting}
+        eventLocations={[...new Set(eventLocations)]}
+        eventTypes={[...new Set(eventTypes)]}
+        initialValues={initialValues}
+        onDirtyChange={setIsDirty}
+        onSubmit={handleSubmit}
+      />
+    </FormDialogue>
+  );
+};
+
+export default EventFormDialog;

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/EnterEditModeButton.jsx → client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/EnterEditModeButton.tsx

@@ -1,8 +1,9 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@mui/material';
 
 import { getCourseId } from 'lib/helpers/url-helpers';
+import useTranslation from 'lib/hooks/useTranslation';
 
 const translations = defineMessages({
   enterEditMode: {
@@ -11,15 +12,17 @@ const translations = defineMessages({
   },
 });
 
-const EnterEditModeButton = () => {
+const EnterEditModeButton = (): JSX.Element => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const courseId = getCourseId();
+
   return (
     <Button
-      onClick={() => navigate(`/courses/${courseId}/lesson_plan/edit`)}
+      onClick={(): void => navigate(`/courses/${courseId}/lesson_plan/edit`)}
       variant="outlined"
     >
-      <FormattedMessage {...translations.enterEditMode} />
+      {t(translations.enterEditMode)}
     </Button>
   );
 };