Baseline email wrapper

client/src/components/send-email-button/send-email-button.component.jsx

@@ -0,0 +1,46 @@
+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({
+  emailConfig,
+  handleConfigChange,
+  handleHtmlChange
+}) {
+  return (
+    <div>
+      THis is where the text editing will happen To
+      <Input
+        defaultValue={emailConfig.to}
+        onChange={handleConfigChange}
+        name='to'
+      />
+      CC
+      <Input
+        defaultValue={emailConfig.cc}
+        onChange={handleConfigChange}
+        name='cc'
+      />
+      Subject
+      <Input
+        defaultValue={emailConfig.subject}
+        onChange={handleConfigChange}
+        name='subject'
+      />
+      <CKEditor
+        editor={ClassicEditor}
+        data={emailConfig.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/send-email-button/send-email-button.container.jsx

@@ -0,0 +1,72 @@
+import { Button, Modal } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useQuery } from "react-apollo";
+//Message options has the to & from  details
+//Query Config is what can get popped into UseQuery(QUERY_NAME, {variables: {vars}, fetchonly})
+//Template Which template should be used to send the email.
+import ReactDOMServer from "react-dom/server";
+import { renderEmail } from "react-html-email";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import SendEmailButtonComponent from "./send-email-button.component";
+export default function SendEmail({
+  MessageOptions,
+  QueryConfig,
+  Template,
+  ...otherProps
+}) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [emailConfig, setEmailConfig] = useState({ ...MessageOptions });
+  const [gqlQuery, vars] = QueryConfig;
+
+  const { loading, data } = useQuery(gqlQuery, {
+    ...vars,
+    fetchPolicy: "network-only",
+    skip: !modalVisible
+  });
+  if (data && !emailConfig.html) {
+    console.log(ReactDOMServer.renderToStaticMarkup(<Template data={data} />));
+    setEmailConfig({
+      ...emailConfig,
+      //html: ReactDOMServer.renderToStaticMarkup(<Template data={data} />)
+      html: renderEmail(<Template data={data} />)
+    });
+  }
+
+  const handleConfigChange = event => {
+    const { name, value } = event.target;
+    setEmailConfig({ ...emailConfig, [name]: value });
+  };
+
+  const handleHtmlChange = text => {
+    setEmailConfig({ ...emailConfig, html: text });
+  };
+
+  const sendEmail = () => {
+    axios.post("/sendemail", emailConfig).then(response => {
+      alert(JSON.stringify(response));
+    });
+  };
+  return (
+    <div>
+      <Modal
+        destroyOnClose={true}
+        visible={modalVisible}
+        width={"80%"}
+        onOk={sendEmail}
+        onCancel={() => setModalVisible(false)}>
+        <LoadingSpinner loading={loading}>
+          <SendEmailButtonComponent
+            handleConfigChange={handleConfigChange}
+            emailConfig={emailConfig}
+            handleHtmlChange={handleHtmlChange}
+          />
+        </LoadingSpinner>
+      </Modal>
+
+      <Button onClick={() => setModalVisible(true)}>
+        {otherProps.children}
+      </Button>
+    </div>
+  );
+}