refactor: addressing some some improvements

eduNEXT · Dec 27, 2023 · 5528a12 · 5528a12
1 parent 13003f1
commit 5528a12
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 69 deletions.
diff --git a/plugins/communications-app/BodyForm/index.jsx b/plugins/communications-app/BodyForm/index.jsx
@@ -17,7 +17,7 @@ const BodyForm = () => {
     dispatch(formActions.updateForm({ body: value }));
   };
 
-  const bodyValidation = body.length > 0;
+  const isBodyValid = body.length > 0;
 
   return (
     <Form.Group controlId="emailBody">
@@ -26,7 +26,7 @@ const BodyForm = () => {
         onChange={handleChangeTextEditor}
         value={body}
       />
-      {isFormSubmitted && !bodyValidation && (
+      {isFormSubmitted && !isBodyValid && (
       <Form.Control.Feedback className="px-3" hasIcon type="invalid">
         {intl.formatMessage(messages.bodyFormFieldError)}
       </Form.Control.Feedback>

diff --git a/plugins/communications-app/BodyForm/messages.js b/plugins/communications-app/BodyForm/messages.js
@@ -5,7 +5,7 @@ const messages = defineMessages({
   bodyFormFieldLabel: {
     id: 'body.form.field.label',
     defaultMessage: 'Body',
-    description: 'Email Body label. Meant to have colon or equivilant punctuation.',
+    description: 'Email Body label. Meant to have colon or equivalent punctuation.',
   },
   bodyFormFieldError: {
     id: 'body.form.field.error',

diff --git a/plugins/communications-app/InputForm/index.jsx b/plugins/communications-app/InputForm/index.jsx
@@ -2,7 +2,10 @@ import PropTypes from 'prop-types';
 import { Form, Container } from '@edx/paragon';
 
 const InputForm = ({
-  isValid, controlId, label, feedbackText,
+  isValid,
+  controlId,
+  label,
+  feedbackText,
 }) => {
   const feedbackType = isValid ? 'valid' : 'invalid';
   return (

diff --git a/plugins/communications-app/RecipientsForm/index.jsx b/plugins/communications-app/RecipientsForm/index.jsx
@@ -8,9 +8,9 @@ import { actionCreators as formActions } from '@communications-app/src/component
 import './styles.scss';
 
 const disableIsHasLearners = ['track', 'cohort'];
+const recipientsFormDescription = 'A selectable choice from a list of potential email recipients';
 
-const RecipientsForm = (props) => {
-  const { cohorts: additionalCohorts } = props;
+const RecipientsForm = ({ cohorts: additionalCohorts }) => {
   const formData = useSelector((state) => state.form);
   const dispatch = useDispatch();
   const { isEditMode, emailRecipients, isFormSubmitted } = formData;
@@ -65,7 +65,7 @@ const RecipientsForm = (props) => {
           <FormattedMessage
             id="bulk.email.form.recipients.myself"
             defaultMessage="Myself"
-            description="A selectable choice from a list of potential email recipients"
+            description={recipientsFormDescription}
           />
         </Form.Checkbox>
         <Form.Checkbox
@@ -76,7 +76,7 @@ const RecipientsForm = (props) => {
           <FormattedMessage
             id="bulk.email.form.recipients.staff"
             defaultMessage="Staff/Administrators"
-            description="A selectable choice from a list of potential email recipients"
+            description={recipientsFormDescription}
           />
         </Form.Checkbox>
         <Form.Checkbox
@@ -88,7 +88,7 @@ const RecipientsForm = (props) => {
           <FormattedMessage
             id="bulk.email.form.recipients.verified"
             defaultMessage="Learners in the verified certificate track"
-            description="A selectable choice from a list of potential email recipients"
+            description={recipientsFormDescription}
           />
         </Form.Checkbox>
         {
@@ -118,7 +118,7 @@ const RecipientsForm = (props) => {
           <FormattedMessage
             id="bulk.email.form.recipients.audit"
             defaultMessage="Learners in the audit track"
-            description="A selectable choice from a list of potential email recipients"
+            description={recipientsFormDescription}
           />
         </Form.Checkbox>
         <Form.Checkbox
@@ -129,7 +129,7 @@ const RecipientsForm = (props) => {
           <FormattedMessage
             id="bulk.email.form.recipients.learners"
             defaultMessage="All Learners"
-            description="A selectable choice from a list of potential email recipients"
+            description={recipientsFormDescription}
           />
         </Form.Checkbox>
       </Form.CheckboxSet>

diff --git a/plugins/communications-app/RecipientsForm/styles.scss b/plugins/communications-app/RecipientsForm/styles.scss
@@ -1,8 +1,8 @@
 .recipient-groups {
-    > div {
-      padding-right: 0.5rem;
-      input {
-        padding: 0.5rem !important;
-      }
+  > div {
+    padding-right: 0.5rem;
+    input {
+      padding: 0.5rem !important;
     }
-  }
+  }
+}
diff --git a/plugins/communications-app/ScheduleSection/index.jsx b/plugins/communications-app/ScheduleSection/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
@@ -73,6 +73,40 @@ const ScheduleSection = ({ openTaskAlert }) => {
     dispatch(formActions.updateForm({ formStatus: 'default' }));
   };
 
+  const handleClickStatefulButton = (event) => {
+    event.preventDefault();
+    if (formStatus === 'schedule' && !isScheduledSubmitted) {
+      dispatch(formActions.updateForm({ isScheduleButtonClicked: true }));
+    }
+    openTaskAlert();
+  };
+
+  const statefulButtonIcons = useMemo(() => ({
+    default: <Icon src={Send} />,
+    schedule: <Icon src={Event} />,
+    reschedule: <Icon src={Event} />,
+    pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+    complete: <Icon src={Check} />,
+    completeSchedule: <Icon src={Check} />,
+    error: <Icon src={Cancel} />,
+  }), []);
+
+  const statefulButtonLabels = useMemo(() => ({
+    default: intl.formatMessage(messages.ScheduleSectionSubmitButtonDefault),
+    schedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonSchedule),
+    reschedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonReschedule),
+    pending: intl.formatMessage(messages.ScheduleSectionSubmitButtonPending),
+    complete: intl.formatMessage(messages.ScheduleSectionSubmitButtonComplete),
+    completeSchedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonCompleteSchedule),
+    error: intl.formatMessage(messages.ScheduleSectionSubmitButtonError),
+  }), [intl]);
+
+  const statefulButtonDisableStates = useMemo(() => [
+    'pending',
+    'complete',
+    'completeSchedule',
+  ], []);
+
   return (
     <Form.Group>
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -117,37 +151,11 @@ const ScheduleSection = ({ openTaskAlert }) => {
           className="send-email-btn"
           data-testid="send-email-btn"
           variant="primary"
-          onClick={(event) => {
-            event.preventDefault();
-            if (formStatus === 'schedule' && !isScheduledSubmitted) {
-              dispatch(formActions.updateForm({ isScheduleButtonClicked: true }));
-            }
-            openTaskAlert();
-          }}
+          onClick={handleClickStatefulButton}
           state={formStatus}
-          icons={{
-            default: <Icon src={Send} />,
-            schedule: <Icon src={Event} />,
-            reschedule: <Icon src={Event} />,
-            pending: <Icon src={SpinnerSimple} className="icon-spin" />,
-            complete: <Icon src={Check} />,
-            completeSchedule: <Icon src={Check} />,
-            error: <Icon src={Cancel} />,
-          }}
-          labels={{
-            default: intl.formatMessage(messages.ScheduleSectionSubmitButtonDefault),
-            schedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonSchedule),
-            reschedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonReschedule),
-            pending: intl.formatMessage(messages.ScheduleSectionSubmitButtonPending),
-            complete: intl.formatMessage(messages.ScheduleSectionSubmitButtonComplete),
-            completeSchedule: intl.formatMessage(messages.ScheduleSectionSubmitButtonCompleteSchedule),
-            error: intl.formatMessage(messages.ScheduleSectionSubmitButtonError),
-          }}
-          disabledStates={[
-            'pending',
-            'complete',
-            'completeSchedule',
-          ]}
+          icons={statefulButtonIcons}
+          labels={statefulButtonLabels}
+          disabledStates={statefulButtonDisableStates}
         />
 
         <Toast

diff --git a/plugins/communications-app/SubjectForm/index.jsx b/plugins/communications-app/SubjectForm/index.jsx
@@ -16,7 +16,7 @@ const SubjectForm = () => {
     dispatch(formActions.updateForm({ subject: value }));
   };
 
-  const subjectValidation = subject.length > 0;
+  const isSubjectValid = subject.length > 0;
 
   return (
     <Form.Group controlId="emailSubject" className="my-5">
@@ -27,7 +27,7 @@ const SubjectForm = () => {
         onChange={handleChangeEmailSubject}
         value={subject}
       />
-      { isFormSubmitted && !subjectValidation && (
+      { isFormSubmitted && !isSubjectValid && (
       <Form.Control.Feedback className="px-3" hasIcon type="invalid">
         {intl.formatMessage(messages.bulkEmailFormSubjectError)}
       </Form.Control.Feedback>

diff --git a/plugins/communications-app/TaskAlertModalForm/index.jsx b/plugins/communications-app/TaskAlertModalForm/index.jsx
@@ -33,6 +33,7 @@ const TaskAlertModalForm = ({
   } = formData;
 
   const changeFormStatus = (status) => dispatchForm(formActions.updateForm({ formStatus: status }));
+  const handleResetFormValues = () => dispatchForm(formActions.resetForm());
 
   const handlePostEmailTask = async () => {
     const emailData = new FormData();
@@ -51,7 +52,7 @@ const TaskAlertModalForm = ({
       await postBulkEmailInstructorTask(emailData, courseId);
       const newFormStatus = isScheduled ? 'completeSchedule' : 'complete';
       changeFormStatus(newFormStatus);
-      setTimeout(() => changeFormStatus('default'), 3000);
+      setTimeout(() => handleResetFormValues(), 3000);
     } catch {
       changeFormStatus('error');
     }
@@ -77,7 +78,7 @@ const TaskAlertModalForm = ({
     try {
       await patchScheduledBulkEmailInstructorTask(emailData, courseId, schedulingId);
       changeFormStatus('completeSchedule');
-      setTimeout(() => changeFormStatus('default'), 3000);
+      setTimeout(() => handleResetFormValues(), 3000);
     } catch {
       changeFormStatus('error');
     }
@@ -101,6 +102,22 @@ const TaskAlertModalForm = ({
     }
   };
 
+  const handleCloseTaskAlert = (event) => {
+    closeTaskAlert();
+
+    if (event.target.name === 'continue') {
+      if (!isFormSubmitted) {
+        dispatchForm(formActions.updateForm({ isFormSubmitted: true }));
+      }
+
+      if (isScheduleButtonClicked) {
+        dispatchForm(formActions.updateForm({ isScheduledSubmitted: true }));
+      }
+
+      createEmailTask();
+    }
+  };
+
   return (
     <TaskAlertModal
       isOpen={isTaskAlertOpen}
@@ -119,21 +136,7 @@ const TaskAlertModalForm = ({
             isScheduled={isScheduled}
           />
         )}
-      close={(event) => {
-        closeTaskAlert();
-
-        if (event.target.name === 'continue') {
-          if (!isFormSubmitted) {
-            dispatchForm(formActions.updateForm({ isFormSubmitted: true }));
-          }
-
-          if (isScheduleButtonClicked) {
-            dispatchForm(formActions.updateForm({ isScheduledSubmitted: true }));
-          }
-
-          createEmailTask();
-        }
-      }}
+      close={handleCloseTaskAlert}
     />
   );
 };

diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -40,9 +40,8 @@ export default function BulkEmailTool() {
                 <PluggableComponent
                   id="build-email-task-manager"
                   as="communications-app-build-email-task-manager"
-                  courseId={courseId}
                 >
-                  <BulkEmailTaskManager />
+                  <BulkEmailTaskManager courseId={courseId} />
                 </PluggableComponent>
               </div>
             </Container>