Refactor into a function component

[MAILPOET-2192]
This commit is contained in:
Pavel Dohnal
2019-08-28 15:28:58 +02:00
committed by M. Shull
parent ca60de6d96
commit 8dba43b560

View File

@@ -43,7 +43,7 @@ const columns = [
}, },
]; ];
let newsletterActions = [ const newsletterActions = addStatsCTAAction([
{ {
name: 'view', name: 'view',
link: function link(newsletter) { link: function link(newsletter) {
@@ -57,20 +57,9 @@ let newsletterActions = [
{ {
name: 'trash', name: 'trash',
}, },
]; ]);
newsletterActions = addStatsCTAAction(newsletterActions);
class NewsletterListNotificationHistory extends React.Component { const renderItem = (newsletter, actions, meta) => {
static displayName = 'NewsletterListNotificationHistory';
static propTypes = {
location: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
match: PropTypes.shape({
params: PropTypes.object, // eslint-disable-line react/forbid-prop-types
}).isRequired,
};
renderItem = (newsletter, actions, meta) => {
const rowClasses = classNames( const rowClasses = classNames(
'manage-column', 'manage-column',
'column-primary', 'column-primary',
@@ -80,7 +69,7 @@ class NewsletterListNotificationHistory extends React.Component {
const segments = newsletter.segments.map((segment) => segment.name).join(', '); const segments = newsletter.segments.map((segment) => segment.name).join(', ');
return ( return (
<div> <>
<td className={rowClasses}> <td className={rowClasses}>
<strong> <strong>
<a <a
@@ -107,13 +96,12 @@ class NewsletterListNotificationHistory extends React.Component {
<td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}> <td className="column-date" data-colname={MailPoet.I18n.t('sentOn')}>
{ (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') } { (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet') }
</td> </td>
</div> </>
); );
}; };
render() { const NewsletterListNotificationHistory = (props) => (
return ( <>
<div>
<ListingHeading /> <ListingHeading />
<FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} /> <FeatureAnnouncement hasNews={window.mailpoet_feature_announcement_has_news} />
@@ -129,12 +117,12 @@ class NewsletterListNotificationHistory extends React.Component {
<Listing <Listing
limit={window.mailpoet_listing_per_page} limit={window.mailpoet_listing_per_page}
location={this.props.location} location={props.location}
params={this.props.match.params} params={props.match.params}
endpoint="newsletters" endpoint="newsletters"
type="notification_history" type="notification_history"
base_url="notification/history/:parent_id" base_url="notification/history/:parent_id"
onRenderItem={this.renderItem} onRenderItem={renderItem}
columns={columns} columns={columns}
item_actions={newsletterActions} item_actions={newsletterActions}
auto_refresh auto_refresh
@@ -142,9 +130,18 @@ class NewsletterListNotificationHistory extends React.Component {
sort_order="desc" sort_order="desc"
afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); }} afterGetItems={(state) => { checkMailerStatus(state); checkCronStatus(state); }}
/> />
</div> </>
); );
}
} NewsletterListNotificationHistory.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
match: PropTypes.shape({
params: PropTypes.shape({
id: PropTypes.string,
}),
}).isRequired,
};
export default NewsletterListNotificationHistory; export default NewsletterListNotificationHistory;