From b00b42e4ca18de96459c6d5a12f7d9d72bbdcdaf Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Fri, 8 Jun 2018 14:09:19 +0200
Subject: [PATCH] Refactor emails list heading to respect DRY [MAILPOET-1408]

---
 .../js/src/newsletters/listings/heading.jsx   | 23 +++++++++++++++++++
 .../src/newsletters/listings/notification.jsx | 15 ++----------
 .../listings/notification_history.jsx         | 15 ++----------
 .../js/src/newsletters/listings/standard.jsx  | 16 ++-----------
 .../js/src/newsletters/listings/welcome.jsx   | 16 ++-----------
 5 files changed, 31 insertions(+), 54 deletions(-)
 create mode 100644 assets/js/src/newsletters/listings/heading.jsx

diff --git a/assets/js/src/newsletters/listings/heading.jsx b/assets/js/src/newsletters/listings/heading.jsx
new file mode 100644
index 0000000000..0577e96b1b
--- /dev/null
+++ b/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;
diff --git a/assets/js/src/newsletters/listings/notification.jsx b/assets/js/src/newsletters/listings/notification.jsx
index 9e321d2a59..7a87ba1513 100644
--- a/assets/js/src/newsletters/listings/notification.jsx
+++ b/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">
-          { 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>
+        <ListingHeading />
 
         <ListingTabs tab="notification" />
 
diff --git a/assets/js/src/newsletters/listings/notification_history.jsx b/assets/js/src/newsletters/listings/notification_history.jsx
index 855394672f..1ff132d206 100644
--- a/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/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">
-          { 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>
+        <ListingHeading />
 
         <ListingTabs tab="notification" />
 
diff --git a/assets/js/src/newsletters/listings/standard.jsx b/assets/js/src/newsletters/listings/standard.jsx
index 906336789f..4254a49a59 100644
--- a/assets/js/src/newsletters/listings/standard.jsx
+++ b/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">
-          { 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>
+        <ListingHeading />
 
         <ListingTabs tab="standard" />
 
diff --git a/assets/js/src/newsletters/listings/welcome.jsx b/assets/js/src/newsletters/listings/welcome.jsx
index f50672129d..6d8684412e 100644
--- a/assets/js/src/newsletters/listings/welcome.jsx
+++ b/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">
-          { 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>
+        <ListingHeading />
 
         <ListingTabs tab="welcome" />