Refactor NpsPoll to custom effect

[MAILPOET-1916]
This commit is contained in:
Rostislav Wolny
2019-03-21 15:32:15 +01:00
committed by M. Shull
parent 3dc67ac481
commit 1edfedbe01

View File

@@ -1,19 +1,13 @@
import React, { useState, useLayoutEffect } from 'react'; import React, { useLayoutEffect } from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import satismeter from 'satismeter-loader'; import satismeter from 'satismeter-loader';
import ReviewRequest from 'review_request.jsx'; import ReviewRequest from 'review_request.jsx';
import getTrackingData from 'analytics.js'; import getTrackingData from 'analytics.js';
const NpsPoll = () => { const useNpsPoll = () => {
const [pollShown, setPollShown] = useState(false); useLayoutEffect(() => {
const [modalShown, setModalShown] = useState(false); const showReviewRequestModal = () => {
function showReviewRequestModal() {
if (modalShown) {
return;
}
setModalShown(true);
MailPoet.Modal.popup({ MailPoet.Modal.popup({
width: 800, width: 800,
template: ReactDOMServer.renderToString( template: ReactDOMServer.renderToString(
@@ -30,9 +24,9 @@ const NpsPoll = () => {
.addEventListener('click', () => MailPoet.Modal.close()); .addEventListener('click', () => MailPoet.Modal.close());
}, },
}); });
} };
function callSatismeter(trackingData) { const callSatismeter = (trackingData) => {
const newUsersPollId = '6L479eVPXk7pBn6S'; const newUsersPollId = '6L479eVPXk7pBn6S';
const oldUsersPollId = 'k0aJAsQAWI2ERyGv'; const oldUsersPollId = 'k0aJAsQAWI2ERyGv';
satismeter({ satismeter({
@@ -61,25 +55,19 @@ const NpsPoll = () => {
}, },
}, },
}); });
} };
useLayoutEffect(() => { if (window.mailpoet_display_nps_poll) {
if (window.mailpoet_display_nps_poll && !pollShown) { getTrackingData().then(({ data }) => callSatismeter(data));
setPollShown(true);
getTrackingData().then(data => callSatismeter(data.data));
} }
}); }, []);
return null; return null;
}; };
const withNpsPoll = function withNpsPoll(Component) { const withNpsPoll = Component => (props) => {
return props => ( useNpsPoll();
<> return <Component {...props} />;
<NpsPoll />
<Component {...props} />
</>
);
}; };
export default withNpsPoll; export default withNpsPoll;