From 6dd09451a3fe828c1aa368b52a5543686d68104e Mon Sep 17 00:00:00 2001
From: Thomas Tracy <contact@tjtracy.com>
Date: Tue, 17 May 2022 12:05:27 -0400
Subject: [PATCH] refactor: [MICROBA-1506] refactor message modal (#41)

This pr extracts out the message modal so that it can be reused
elsewhere in the app. Specifically so we can reuse it for the "view"
button in the scheduled emails table.
---
 .../BulkEmailContentHistory.jsx               | 66 +++--------------
 .../ViewEmailModal.jsx                        | 73 +++++++++++++++++++
 2 files changed, 84 insertions(+), 55 deletions(-)
 create mode 100644 src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx

diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
index 1bde13d..5087831 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import {
-  Button, Icon, Modal, StatefulButton,
+  Button, Icon, StatefulButton,
 } from '@edx/paragon';
 import { SpinnerSimple } from '@edx/paragon/icons';
 import messages from './messages';
 import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
+import ViewEmailModal from './ViewEmailModal';
 
 function BulkEmailContentHistory({ intl, copyTextToEditor }) {
   const { courseId } = useParams();
@@ -78,58 +79,6 @@ function BulkEmailContentHistory({ intl, copyTextToEditor }) {
     setIsMessageModalOpen(true);
   };
 
-  /**
-   * Renders a modal that will display the contents of a single historical email message sent via the bulk course email
-   * tool to a user.
-   */
-  const renderMessageModal = () => (
-    <div>
-      <Modal
-        open={isMessageModalOpen}
-        title=""
-        body={(
-          <div>
-            <div className="d-flex flex-row">
-              <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
-              <p className="pl-2">{messageContent.subject}</p>
-            </div>
-            <div className="d-flex flex-row">
-              <p>{intl.formatMessage(messages.modalMessageSentBy)}</p>
-              <p className="pl-2">{messageContent.requester}</p>
-            </div>
-            <div className="d-flex flex-row">
-              <p>{intl.formatMessage(messages.modalMessageTimeSent)}</p>
-              <p className="pl-2">{messageContent.created}</p>
-            </div>
-            <div className="d-flex flex-row">
-              <p>{intl.formatMessage(messages.modalMessageSentTo)}</p>
-              <p className="pl-2">{messageContent.sent_to}</p>
-            </div>
-            <hr className="py-2" />
-            <div>
-              <p>{intl.formatMessage(messages.modalMessageBody)}</p>
-              {/* eslint-disable-next-line react/no-danger */}
-              <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
-            </div>
-          </div>
-        )}
-        onClose={() => setIsMessageModalOpen(false)}
-        buttons={[
-          <Button onClick={() => {
-            copyTextToEditor(messageContent.email.html_message);
-            setIsMessageModalOpen(false);
-          }}
-          >
-            <FormattedMessage
-              id="bulk.email.tool.copy.message.button"
-              defaultMessage="Copy to editor"
-            />
-          </Button>,
-        ]}
-      />
-    </div>
-  );
-
   const tableColumns = [
     {
       Header: `${intl.formatMessage(messages.emailHistoryTableColumnHeaderSubject)}`,
@@ -176,7 +125,14 @@ function BulkEmailContentHistory({ intl, copyTextToEditor }) {
 
   return (
     <div>
-      <div>{messageContent && renderMessageModal()}</div>
+      {messageContent && (
+        <ViewEmailModal
+          messageContent={messageContent}
+          isOpen={isMessageModalOpen}
+          setModalOpen={setIsMessageModalOpen}
+          copyTextToEditor={copyTextToEditor}
+        />
+      )}
       <div>
         <p>{intl.formatMessage(messages.emailHistoryTableSectionButtonHeader)}</p>
         <StatefulButton
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
new file mode 100644
index 0000000..70844b2
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal } from '@edx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+function ViewEmailModal({
+  intl, messageContent, isOpen, setModalOpen, copyTextToEditor,
+}) {
+  return (
+    <div>
+      <Modal
+        open={isOpen}
+        title=""
+        body={(
+          <div>
+            <div className="d-flex flex-row">
+              <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
+              <p className="pl-2">{messageContent.subject}</p>
+            </div>
+            <div className="d-flex flex-row">
+              <p>{intl.formatMessage(messages.modalMessageSentBy)}</p>
+              <p className="pl-2">{messageContent.requester}</p>
+            </div>
+            <div className="d-flex flex-row">
+              <p>{intl.formatMessage(messages.modalMessageTimeSent)}</p>
+              <p className="pl-2">{messageContent.created}</p>
+            </div>
+            <div className="d-flex flex-row">
+              <p>{intl.formatMessage(messages.modalMessageSentTo)}</p>
+              <p className="pl-2">{messageContent.sent_to}</p>
+            </div>
+            <hr className="py-2" />
+            <div>
+              <p>{intl.formatMessage(messages.modalMessageBody)}</p>
+              {/* eslint-disable-next-line react/no-danger */}
+              <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
+            </div>
+          </div>
+        )}
+        onClose={() => setModalOpen(false)}
+        buttons={[
+          <Button
+            onClick={() => {
+              copyTextToEditor(messageContent.email.html_message);
+              setModalOpen(false);
+            }}
+          >
+            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+          </Button>,
+        ]}
+      />
+    </div>
+  );
+}
+
+ViewEmailModal.propTypes = {
+  intl: intlShape.isRequired,
+  messageContent: PropTypes.shape({
+    subject: PropTypes.string,
+    requester: PropTypes.string,
+    created: PropTypes.string,
+    email: PropTypes.shape({
+      html_message: PropTypes.string,
+    }).isRequired,
+    sent_to: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setModalOpen: PropTypes.func.isRequired,
+  copyTextToEditor: PropTypes.func.isRequired,
+};
+
+export default injectIntl(ViewEmailModal);