Refactor emails list heading to respect DRY [MAILPOET-1408]

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router';
+import MailPoet from 'mailpoet';
+
+const ListingHeading = () => (
+  <h1 className="title">
+    {MailPoet.I18n.t('pageTitle')}
+    <Link
+      className="page-title-action"
+      to="/new"
+      onClick={() => MailPoet.trackEvent(
+          'Emails > Add New',
+          { 'MailPoet Free version': window.mailpoet_version }
+      )}
+      data-automation-id="new_email"
+    >
+      {MailPoet.I18n.t('new')}
+    </Link>
+  </h1>
+);
+
+
+module.exports = ListingHeading;

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

@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
+import ListingHeading from 'newsletters/listings/heading.jsx';
 
 import { MailerMixin } from 'newsletters/listings/mixins.jsx';
 
@@ -310,19 +311,7 @@ const NewsletterListNotification = React.createClass({
   render: function render() {
     return (
       <div>
-        <h1 className="title">
+        <ListingHeading />
-          { MailPoet.I18n.t('pageTitle') }
-          <Link
-            className="page-title-action"
-            to="/new"
-            onClick={() => MailPoet.trackEvent('Emails > Add New',
-                { 'MailPoet Free version': window.mailpoet_version }
-            )}
-            data-automation-id="new_email"
-          >
-            { MailPoet.I18n.t('new') }
-          </Link>
-        </h1>
 
         <ListingTabs tab="notification" />
 

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

@@ -6,6 +6,7 @@ import Hooks from 'wp-js-hooks';
 
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
+import ListingHeading from 'newsletters/listings/heading.jsx';
 
 import {
   QueueMixin,
@@ -97,19 +98,7 @@ const NewsletterListNotificationHistory = React.createClass({
   render: function render() {
     return (
       <div>
-        <h1 className="title">
+        <ListingHeading />
-          { MailPoet.I18n.t('pageTitle') }
-          <Link
-              className="page-title-action"
-              to="/new"
-              onClick={() => MailPoet.trackEvent('Emails > Add New',
-                  { 'MailPoet Free version': window.mailpoet_version }
-              )}
-              data-automation-id="new_email"
-          >
-            { MailPoet.I18n.t('new') }
-          </Link>
-        </h1>
 
         <ListingTabs tab="notification" />
 

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router';
 import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
@@ -7,6 +6,7 @@ import Hooks from 'wp-js-hooks';
 
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
+import ListingHeading from 'newsletters/listings/heading.jsx';
 
 import {
   QueueMixin,
@@ -214,19 +214,7 @@ const NewsletterListStandard = React.createClass({
   render: function render() {
     return (
       <div>
-        <h1 className="title">
+        <ListingHeading />
-          { MailPoet.I18n.t('pageTitle') }
-          <Link
-            className="page-title-action"
-            to="/new"
-            onClick={() => MailPoet.trackEvent('Emails > Add New',
-              { 'MailPoet Free version': window.mailpoet_version }
-            )}
-            data-automation-id="new_email"
-          >
-            { MailPoet.I18n.t('new') }
-          </Link>
-        </h1>
 
         <ListingTabs tab="standard" />
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router';
 
 import Listing from 'listing/listing.jsx';
 import ListingTabs from 'newsletters/listings/tabs.jsx';
+import ListingHeading from 'newsletters/listings/heading.jsx';
 
 import { StatisticsMixin, MailerMixin } from 'newsletters/listings/mixins.jsx';
 
@@ -293,19 +293,7 @@ const NewsletterListWelcome = React.createClass({
   render: function render() {
     return (
       <div>
-        <h1 className="title">
+        <ListingHeading />
-          { MailPoet.I18n.t('pageTitle') }
-          <Link
-              className="page-title-action"
-              to="/new"
-              onClick={() => MailPoet.trackEvent('Emails > Add New',
-                  { 'MailPoet Free version': window.mailpoet_version }
-              )}
-              data-automation-id="new_email"
-          >
-            { MailPoet.I18n.t('new') }
-          </Link>
-        </h1>
 
         <ListingTabs tab="welcome" />