Refactor into a function component

[MAILPOET-2192]

assets/js/src/newsletters/listings/notification_history.jsx

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