Refactord email popup screen to use Redx + implement all email redux/saga scaffolding.
This commit is contained in:
Patrick Fic
37
client/src/components/_test/test.component.jsx
Normal file
37
client/src/components/_test/test.component.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { setEmailOptions } from "../../redux/email/email.actions";
|
||||
import T from "../../emails/parts-order/parts-order.email";
|
||||
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/parts-order/parts-order.query";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
});
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
setEmailOptions: e => dispatch(setEmailOptions(e))
|
||||
});
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(function Test({ setEmailOptions }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() =>
|
||||
setEmailOptions({
|
||||
messageOptions: {
|
||||
from: { name: "Kavia Autobdoy", address: "noreply@bodyshop.app" },
|
||||
to: "patrickwf@gmail.com",
|
||||
replyTo: "snaptsoft@gmail.com"
|
||||
},
|
||||
template: T,
|
||||
queryConfig: [
|
||||
REPORT_QUERY_PARTS_ORDER_BY_PK,
|
||||
{ variables: { id: "46f3aa34-c3bd-46c8-83fc-c93b7ce84f46" } }
|
||||
]
|
||||
})
|
||||
}>
|
||||
Set email config.
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@@ -4,35 +4,34 @@ import CKEditor from "@ckeditor/ckeditor5-react";
|
||||
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
|
||||
|
||||
export default function SendEmailButtonComponent({
|
||||
emailConfig,
|
||||
messageOptions,
|
||||
handleConfigChange,
|
||||
handleHtmlChange
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
THis is where the text editing will happen To
|
||||
<Input
|
||||
defaultValue={emailConfig.to}
|
||||
defaultValue={messageOptions.to}
|
||||
onChange={handleConfigChange}
|
||||
name='to'
|
||||
/>
|
||||
CC
|
||||
<Input
|
||||
defaultValue={emailConfig.cc}
|
||||
defaultValue={messageOptions.cc}
|
||||
onChange={handleConfigChange}
|
||||
name='cc'
|
||||
/>
|
||||
Subject
|
||||
<Input
|
||||
defaultValue={emailConfig.subject}
|
||||
defaultValue={messageOptions.subject}
|
||||
onChange={handleConfigChange}
|
||||
name='subject'
|
||||
/>
|
||||
<CKEditor
|
||||
editor={ClassicEditor}
|
||||
data={emailConfig.html}
|
||||
data={messageOptions.html}
|
||||
onInit={editor => {
|
||||
// You can store the "editor" and use when it is needed.
|
||||
//You can store the "editor" and use when it is needed.
|
||||
console.log("Editor is ready to use!", editor);
|
||||
}}
|
||||
onChange={(event, editor) => {
|
||||
100
client/src/components/email-overlay/email-overlay.container.jsx
Normal file
100
client/src/components/email-overlay/email-overlay.container.jsx
Normal file
@@ -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>
|
||||
);
|
||||
});
|
||||
@@ -1,72 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user