refactor: updated eslintrc & resolved unstable nested component error

.eslintrc.js

@@ -1,3 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig(
+  'eslint',
+  {
+    rules: {
+      'template-curly-spacing': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react/jsx-no-bind': [0, { ignoreDOMComponents: true }],
+    },
+  },
+);

src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx

@@ -45,6 +45,55 @@ const FORM_ACTIONS = {
   PATCH: 'PATCH',
 };
 
+function AlertMessage(intl, editor, isScheduled) {
+  return (
+    <>
+      <p>{intl.formatMessage(messages.bulkEmailTaskAlertRecipients, { subject: editor.emailSubject })}</p>
+      <ul className="list-unstyled">
+        {editor.emailRecipients.map((group) => (
+          <li key={group}>{group}</li>
+        ))}
+      </ul>
+      {!isScheduled && (
+      <p>
+        <strong>{intl.formatMessage(messages.bulkEmailInstructionsCaution)}</strong>
+        {intl.formatMessage(messages.bulkEmailInstructionsCautionMessage)}
+      </p>
+      )}
+    </>
+  );
+}
+
+function EditMessage(intl, editor, isScheduled) {
+  return (
+    <>
+      <p>
+        {intl.formatMessage(messages.bulkEmailTaskAlertEditingDate, {
+          dateTime: new Date(`${editor.scheduleDate} ${editor.scheduleTime}`).toLocaleString(),
+        })}
+      </p>
+      <p>
+        {intl.formatMessage(messages.bulkEmailTaskAlertEditingSubject, {
+          subject: editor.emailSubject,
+        })}
+      </p>
+      <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingTo)}</p>
+      <ul className="list-unstyled">
+        {editor.emailRecipients.map((group) => (
+          <li key={group}>{group}</li>
+        ))}
+      </ul>
+      <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingWarning)}</p>
+      {!isScheduled && (
+      <p>
+        <strong>{intl.formatMessage(messages.bulkEmailInstructionsCaution)}</strong>
+        {intl.formatMessage(messages.bulkEmailInstructionsCautionMessage)}
+      </p>
+      )}
+    </>
+  );
+}
+
 function BulkEmailForm(props) {
   const { courseId, cohorts, intl } = props;
   const [{ editor }, dispatch] = useContext(BulkEmailContext);
@@ -205,58 +254,15 @@ function BulkEmailForm(props) {
     } else {
       setEmailFormStatus(FORM_SUBMIT_STATES.DEFAULT);
     }
-  }, [isScheduled, editor.editMode, editor.isLoading, editor.errorRetrievingData, editor.formComplete]);
-
-  const AlertMessage = () => (
-    <>
-      <p>{intl.formatMessage(messages.bulkEmailTaskAlertRecipients, { subject: editor.emailSubject })}</p>
-      <ul className="list-unstyled">
-        {editor.emailRecipients.map((group) => (
-          <li key={group}>{group}</li>
-        ))}
-      </ul>
-      {!isScheduled && (
-        <p>
-          <strong>{intl.formatMessage(messages.bulkEmailInstructionsCaution)}</strong>
-          {intl.formatMessage(messages.bulkEmailInstructionsCautionMessage)}
-        </p>
-      )}
-    </>
-  );
-
-  const EditMessage = () => (
-    <>
-      <p>
-        {intl.formatMessage(messages.bulkEmailTaskAlertEditingDate, {
-          dateTime: new Date(`${editor.scheduleDate} ${editor.scheduleTime}`).toLocaleString(),
-        })}
-      </p>
-      <p>
-        {intl.formatMessage(messages.bulkEmailTaskAlertEditingSubject, {
-          subject: editor.emailSubject,
-        })}
-      </p>
-      <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingTo)}</p>
-      <ul className="list-unstyled">
-        {editor.emailRecipients.map((group) => (
-          <li key={group}>{group}</li>
-        ))}
-      </ul>
-      <p>{intl.formatMessage(messages.bulkEmailTaskAlertEditingWarning)}</p>
-      {!isScheduled && (
-        <p>
-          <strong>{intl.formatMessage(messages.bulkEmailInstructionsCaution)}</strong>
-          {intl.formatMessage(messages.bulkEmailInstructionsCautionMessage)}
-        </p>
-      )}
-    </>
-  );
+  }, [isScheduled, editor.editMode, editor.isLoading, editor.errorRetrievingData,
+    editor.formComplete, delayedEmailFormReset]);
 
   return (
     <div className={classNames('w-100 m-auto', !isMobile && 'p-4 border border-primary-200')}>
       <TaskAlertModal
         isOpen={isTaskAlertOpen}
-        alertMessage={editor.editMode ? EditMessage() : AlertMessage()}
+        alertMessage={editor.editMode
+          ? EditMessage(intl, editor, isScheduled) : AlertMessage(intl, editor, isScheduled)}
         close={(event) => {
           closeTaskAlert();
           if (event.target.name === 'continue') {

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx

@@ -94,6 +94,12 @@ function BulkEmailContentHistory({ intl }) {
     },
   ];
 
+  const getCell = (tableData, row) => (
+    <Button variant="link" className="px-1" onClick={() => onViewMessageClick(tableData[row.index])}>
+      {intl.formatMessage(messages.buttonViewMessage)}
+    </Button>
+  );
+
   /**
    * Paragon's DataTable supports the ability to add extra columns that might not directly coincide with the data being
    * represented in the table. We are using an additional column to embed a button that will open a Modal to display the
@@ -106,11 +112,7 @@ function BulkEmailContentHistory({ intl }) {
       {
         id: 'view_message',
         Header: '',
-        Cell: ({ row }) => (
-          <Button variant="link" className="px-1" onClick={() => onViewMessageClick(tableData[row.index])}>
-            {intl.formatMessage(messages.buttonViewMessage)}
-          </Button>
-        ),
+        Cell: ({ row }) => getCell(tableData, row),
       },
     ];
   };

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx

@@ -108,6 +108,25 @@ function BulkEmailScheduledEmailsTable({ intl }) {
       }),
     );
   };
+
+  const getCell = (row, state, page, previousPage) => (
+    <>
+      <IconButton src={Visibility} iconAs={Icon} alt="View" onClick={() => handleViewEmail(row)} />
+      <IconButton
+        src={Delete}
+        iconAs={Icon}
+        alt="Delete"
+        onClick={() => {
+          setCurrentTask({
+            row, pageIndex: state.pageIndex, page, previousPage,
+          });
+          openConfirmModal();
+        }}
+      />
+      <IconButton src={Edit} iconAs={Icon} alt="Edit" onClick={() => handleEditEmail(row)} />
+    </>
+  );
+
   return (
     <>
       <TaskAlertModal
@@ -167,23 +186,7 @@ function BulkEmailScheduledEmailsTable({ intl }) {
               Header: 'Action',
               Cell: ({
                 row, state, page, previousPage,
-              }) => (
-                <>
-                  <IconButton src={Visibility} iconAs={Icon} alt="View" onClick={() => handleViewEmail(row)} />
-                  <IconButton
-                    src={Delete}
-                    iconAs={Icon}
-                    alt="Delete"
-                    onClick={() => {
-                      setCurrentTask({
-                        row, pageIndex: state.pageIndex, page, previousPage,
-                      });
-                      openConfirmModal();
-                    }}
-                  />
-                  <IconButton src={Edit} iconAs={Icon} alt="Edit" onClick={() => handleEditEmail(row)} />
-                </>
-              ),
+              }) => getCell(row, state, page, previousPage),
             },
           ]}
         />