diff --git a/mailpoet/assets/js/src/newsletters/sending-status.jsx b/mailpoet/assets/js/src/newsletters/sending-status.jsx index a4d675deab..e00b412688 100644 --- a/mailpoet/assets/js/src/newsletters/sending-status.jsx +++ b/mailpoet/assets/js/src/newsletters/sending-status.jsx @@ -1,6 +1,6 @@ import classnames from 'classnames'; import { Link, useLocation, useParams } from 'react-router-dom'; -import { memo, useEffect, useState } from 'react'; +import { memo, useEffect, useState, useRef } from 'react'; import PropTypes from 'prop-types'; import { __, _x } from '@wordpress/i18n'; @@ -45,6 +45,8 @@ function SendingStatus() { sent: false, }); + const refreshRef = useRef(null); + useEffect(() => { MailPoet.Ajax.post({ api_version: window.mailpoet_api_version, @@ -74,7 +76,11 @@ function SendingStatus() { )} - + ); } @@ -85,27 +91,28 @@ const compareProps = (prev, next) => prev.location.pathname === next.location.pathname && prev.params.id === next.params.id; -const onRenderItem = (item) => ( +const onRenderItem = (item, refreshRef) => (
- +
); const SendingStatusListing = memo( - ({ location, params }) => ( + ({ location, params, refreshRef }) => ( onRenderItem(item, refreshRef)} getListingItemKey={(item) => `${item.taskId}-${item.subscriberId}`} columns={columns} messages={messages} auto_refresh sort_by="failed" sort_order="desc" + refreshRef={refreshRef} afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); @@ -121,6 +128,7 @@ SendingStatusListing.propTypes = { params: PropTypes.shape({ id: PropTypes.string.isRequired, }).isRequired, + refreshRef: PropTypes.shape({ current: PropTypes.func }), }; function StatsLink({ @@ -154,6 +162,7 @@ function ListingItem({ subscriberId, lastName, firstName, + refreshRef = null, error = '', }) { const resend = () => { @@ -163,7 +172,7 @@ function ListingItem({ action: 'resend', data: { taskId, subscriberId }, }) - .done(() => window.mailpoet_listing.forceUpdate()) + .done(() => refreshRef?.current && refreshRef.current()) .fail((res) => MailPoet.Notice.showApiErrorNotice(res)); }; @@ -250,6 +259,7 @@ ListingItem.propTypes = { firstName: PropTypes.string.isRequired, processed: PropTypes.number.isRequired, subscriberId: PropTypes.number.isRequired, + refreshRef: PropTypes.shape({ current: PropTypes.func }), }; ListingItem.displayName = 'ListingItem'; SendingStatus.displayName = 'SendingStatus';