Refactord email popup screen to use Redx + implement all email redux/saga scaffolding.

client/src/components/email-overlay/email-overlay.component.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Input } from "antd";
+import CKEditor from "@ckeditor/ckeditor5-react";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+
+export default function SendEmailButtonComponent({
+  messageOptions,
+  handleConfigChange,
+  handleHtmlChange
+}) {
+  return (
+    <div>
+      <Input
+        defaultValue={messageOptions.to}
+        onChange={handleConfigChange}
+        name='to'
+      />
+      CC
+      <Input
+        defaultValue={messageOptions.cc}
+        onChange={handleConfigChange}
+        name='cc'
+      />
+      Subject
+      <Input
+        defaultValue={messageOptions.subject}
+        onChange={handleConfigChange}
+        name='subject'
+      />
+      <CKEditor
+        editor={ClassicEditor}
+        data={messageOptions.html}
+        onInit={editor => {
+          //You can store the "editor" and use when it is needed.
+          console.log("Editor is ready to use!", editor);
+        }}
+        onChange={(event, editor) => {
+          const data = editor.getData();
+          console.log({ event, editor, data });
+          handleHtmlChange(data);
+        }}
+      />
+    </div>
+  );
+}

client/src/components/email-overlay/email-overlay.container.jsx

@@ -0,0 +1,100 @@
+import { Button, Modal } from "antd";
+import React, { useEffect, useState } from "react";
+import { useLazyQuery } from "react-apollo";
+import { renderEmail } from "react-html-email";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  sendEmail,
+  toggleEmailOverlayVisible
+} from "../../redux/email/email.actions";
+import {
+  selectEmailConfig,
+  selectEmailVisible
+} from "../../redux/email/email.selectors.js";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import EmailOverlayComponent from "./email-overlay.component";
+
+const mapStateToProps = createStructuredSelector({
+  modalVisible: selectEmailVisible,
+  emailConfig: selectEmailConfig
+});
+const mapDispatchToProps = dispatch => ({
+  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
+  sendEmail: email => dispatch(sendEmail(email))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function SendEmail({
+  emailConfig,
+  modalVisible,
+  sendEmail,
+  toggleEmailOverlayVisible
+}) {
+  const [messageOptions, setMessageOptions] = useState(
+    emailConfig.messageOptions
+  );
+  useEffect(() => {
+    setMessageOptions(emailConfig.messageOptions);
+  }, [setMessageOptions, emailConfig.messageOptions]);
+
+  const [executeQuery, { called, loading, data }] = useLazyQuery(
+    emailConfig.queryConfig[0],
+    {
+      ...emailConfig.queryConfig[1],
+      fetchPolicy: "network-only"
+    }
+  );
+
+  if (
+    emailConfig.queryConfig[0] &&
+    emailConfig.queryConfig[1] &&
+    modalVisible &&
+    !called
+  ) {
+    executeQuery();
+  }
+
+  if (data && !messageOptions.html && emailConfig.template) {
+    //console.log(ReactDOMServer.renderToStaticMarkup(<Template data={data} />));
+    setMessageOptions({
+      ...messageOptions,
+      //html: ReactDOMServer.renderToStaticMarkup(<Template data={data} />)
+      html: renderEmail(<emailConfig.template data={data} />)
+    });
+  }
+
+  const handleOk = () => {
+    sendEmail("Clicked OK");
+    toggleEmailOverlayVisible();
+  };
+  const handleConfigChange = event => {
+    const { name, value } = event.target;
+    setMessageOptions({ ...messageOptions, [name]: value });
+  };
+  const handleHtmlChange = text => {
+    setMessageOptions({ ...messageOptions, html: text });
+  };
+
+  return (
+    <div>
+      <Modal
+        destroyOnClose={true}
+        visible={modalVisible}
+        width={"80%"}
+        onOk={handleOk}
+        onCancel={() => toggleEmailOverlayVisible()}>
+        <LoadingSpinner loading={loading}>
+          <EmailOverlayComponent
+            handleConfigChange={handleConfigChange}
+            messageOptions={messageOptions}
+            handleHtmlChange={handleHtmlChange}
+          />
+        </LoadingSpinner>
+      </Modal>
+
+      <Button onClick={() => toggleEmailOverlayVisible()}>Show</Button>
+    </div>
+  );
+});