use mixins to render regular newsletters queue status & statistics

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

@@ -0,0 +1,152 @@
+import React from 'react'
+import MailPoet from 'mailpoet'
+import classNames from 'classnames'
+import jQuery from 'jquery'
+
+const _QueueMixin = {
+  pauseSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'pause',
+      data: newsletter.id
+    }).done(function() {
+      jQuery('#resume_'+newsletter.id).show();
+      jQuery('#pause_'+newsletter.id).hide();
+    });
+  },
+  resumeSending: function(newsletter) {
+    MailPoet.Ajax.post({
+      endpoint: 'sendingQueue',
+      action: 'resume',
+      data: newsletter.id
+    }).done(function() {
+      jQuery('#pause_'+newsletter.id).show();
+      jQuery('#resume_'+newsletter.id).hide();
+    });
+  },
+  renderQueueStatus: function(newsletter) {
+    if (!newsletter.queue) {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    } else {
+      if (newsletter.queue.status === 'scheduled') {
+        return (
+          <span>
+            { MailPoet.I18n.t('scheduledFor') } { MailPoet.Date.format(newsletter.queue.scheduled_at) }
+          </span>
+        )
+      }
+      const progressClasses = classNames(
+        'mailpoet_progress',
+        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
+      );
+
+      // calculate percentage done
+      const percentage = Math.round(
+        (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
+      );
+
+      let label;
+
+      if (newsletter.queue.status === 'completed') {
+        label = (
+          <span>
+            {
+              MailPoet.I18n.t('newsletterQueueCompleted')
+              .replace(
+                "%$1d",
+                newsletter.queue.count_processed - newsletter.queue.count_failed
+              )
+              .replace(
+                "%$2d",
+                newsletter.queue.count_total
+              )
+            }
+          </span>
+        );
+      } else {
+        label = (
+          <span>
+            { newsletter.queue.count_processed } / { newsletter.queue.count_total }
+            &nbsp;&nbsp;
+            <a
+              id={ 'resume_'+newsletter.id }
+              className="button"
+              style={{ display: (newsletter.queue.status === 'paused')
+                ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.resumeSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('resume')}</a>
+            <a
+              id={ 'pause_'+newsletter.id }
+              className="button mailpoet_pause"
+              style={{ display: (newsletter.queue.status === null)
+                  ? 'inline-block': 'none' }}
+              href="javascript:;"
+              onClick={ this.pauseSending.bind(null, newsletter) }
+            >{MailPoet.I18n.t('pause')}</a>
+          </span>
+        );
+      }
+
+      return (
+        <div>
+          <div className={ progressClasses }>
+              <span
+                className="mailpoet_progress_bar"
+                style={ { width: percentage + "%"} }
+              ></span>
+              <span className="mailpoet_progress_label">
+                { percentage + "%" }
+              </span>
+          </div>
+          <p style={{ textAlign:'center' }}>
+            { label }
+          </p>
+        </div>
+      );
+    }
+  },
+};
+
+const _StatisticsMixin = {
+  renderStatistics: function(newsletter) {
+    if (
+      newsletter.statistics
+      && newsletter.queue
+      && newsletter.queue.status !== 'scheduled'
+    ) {
+      const total_sent = ~~(newsletter.queue.count_processed);
+
+      let percentage_clicked = 0;
+      let percentage_opened = 0;
+      let percentage_unsubscribed = 0;
+
+      if (total_sent > 0) {
+        percentage_clicked = Math.round(
+          (~~(newsletter.statistics.clicked) * 100) / total_sent
+        );
+        percentage_opened = Math.round(
+          (~~(newsletter.statistics.opened) * 100) / total_sent
+        );
+        percentage_unsubscribed = Math.round(
+          (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
+        );
+      }
+
+      return (
+        <span>
+          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
+        </span>
+      );
+    } else {
+      return (
+        <span>{MailPoet.I18n.t('notSentYet')}</span>
+      );
+    }
+  }
+}
+
+export { _QueueMixin as QueueMixin };
+export { _StatisticsMixin as StatisticsMixin };

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

@@ -7,6 +7,8 @@ import MailPoet from 'mailpoet'
 import Listing from 'listing/listing.jsx'
 import ListingTabs from 'newsletters/listings/tabs.jsx'
 
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
 const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
 
 const columns = [
@@ -47,135 +49,7 @@ const newsletter_actions = [
 ];
 
 const NewsletterListNotificationHistory = React.createClass({
-  pauseSending: function(newsletter) {
+  mixins: [QueueMixin, StatisticsMixin],
-    MailPoet.Ajax.post({
-      endpoint: 'sendingQueue',
-      action: 'pause',
-      data: newsletter.id
-    }).done(function() {
-      jQuery('#resume_'+newsletter.id).show();
-      jQuery('#pause_'+newsletter.id).hide();
-    });
-  },
-  resumeSending: function(newsletter) {
-    MailPoet.Ajax.post({
-      endpoint: 'sendingQueue',
-      action: 'resume',
-      data: newsletter.id
-    }).done(function() {
-      jQuery('#pause_'+newsletter.id).show();
-      jQuery('#resume_'+newsletter.id).hide();
-    });
-  },
-  renderStatus: function(newsletter) {
-    if (!newsletter.queue) {
-      return (
-        <span>{MailPoet.I18n.t('notSentYet')}</span>
-      );
-    } else {
-      if (newsletter.queue.status === 'scheduled') {
-        return (
-          <span>{MailPoet.I18n.t('scheduledFor')}  { MailPoet.Date.format(newsletter.queue.scheduled_at) } </span>
-        )
-      }
-      const progressClasses = classNames(
-        'mailpoet_progress',
-        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
-      );
-
-      // calculate percentage done
-      const percentage = Math.round(
-        (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
-      );
-
-      let label;
-
-      if (newsletter.queue.status === 'completed') {
-        label = (
-          <span>
-            {
-              MailPoet.I18n.t('newsletterQueueCompleted')
-              .replace("%$1d", newsletter.queue.count_processed - newsletter.queue.count_failed)
-              .replace("%$2d", newsletter.queue.count_total)
-            }
-          </span>
-        );
-      } else {
-        label = (
-          <span>
-            { newsletter.queue.count_processed } / { newsletter.queue.count_total }
-            &nbsp;&nbsp;
-            <a
-              id={ 'resume_'+newsletter.id }
-              className="button"
-              style={{ display: (newsletter.queue.status === 'paused') ? 'inline-block': 'none' }}
-              href="javascript:;"
-              onClick={ this.resumeSending.bind(null, newsletter) }
-            >{MailPoet.I18n.t('resume')}</a>
-            <a
-              id={ 'pause_'+newsletter.id }
-              className="button mailpoet_pause"
-              style={{ display: (newsletter.queue.status === null) ? 'inline-block': 'none' }}
-              href="javascript:;"
-              onClick={ this.pauseSending.bind(null, newsletter) }
-            >{MailPoet.I18n.t('pause')}</a>
-          </span>
-        );
-      }
-
-      return (
-        <div>
-          <div className={ progressClasses }>
-              <span
-                className="mailpoet_progress_bar"
-                style={ { width: percentage + "%"} }
-              ></span>
-              <span className="mailpoet_progress_label">
-                { percentage + "%" }
-              </span>
-          </div>
-          <p style={{ textAlign:'center' }}>
-            { label }
-          </p>
-        </div>
-      );
-    }
-  },
-  renderStatistics: function(newsletter) {
-    if (mailpoet_tracking_enabled === false) {
-      return;
-    }
-
-    if (newsletter.statistics && newsletter.queue && newsletter.queue.status !== 'scheduled') {
-      const total_sent = ~~(newsletter.queue.count_processed);
-
-      let percentage_clicked = 0;
-      let percentage_opened = 0;
-      let percentage_unsubscribed = 0;
-
-      if (total_sent > 0) {
-        percentage_clicked = Math.round(
-          (~~(newsletter.statistics.clicked) * 100) / total_sent
-        );
-        percentage_opened = Math.round(
-          (~~(newsletter.statistics.opened) * 100) / total_sent
-        );
-        percentage_unsubscribed = Math.round(
-          (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
-        );
-      }
-
-      return (
-        <span>
-          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
-        </span>
-      );
-    } else {
-      return (
-        <span>{MailPoet.I18n.t('notSentYet')}</span>
-      );
-    }
-  },
   renderItem: function(newsletter, actions) {
     const rowClasses = classNames(
       'manage-column',
@@ -199,7 +73,7 @@ const NewsletterListNotificationHistory = React.createClass({
           { actions }
         </td>
         <td className="column" data-colname={ MailPoet.I18n.t('status') }>
-          { this.renderStatus(newsletter) }
+          { this.renderQueueStatus(newsletter) }
         </td>
         <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
           { segments }

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

@@ -7,6 +7,8 @@ import MailPoet from 'mailpoet'
 import Listing from 'listing/listing.jsx'
 import ListingTabs from 'newsletters/listings/tabs.jsx'
 
+import { QueueMixin, StatisticsMixin } from 'newsletters/listings/mixins.jsx'
+
 const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
 
 const messages = {
@@ -139,135 +141,7 @@ const newsletter_actions = [
 ];
 
 const NewsletterListStandard = React.createClass({
-  pauseSending: function(newsletter) {
+  mixins: [QueueMixin, StatisticsMixin],
-    MailPoet.Ajax.post({
-      endpoint: 'sendingQueue',
-      action: 'pause',
-      data: newsletter.id
-    }).done(function() {
-      jQuery('#resume_'+newsletter.id).show();
-      jQuery('#pause_'+newsletter.id).hide();
-    });
-  },
-  resumeSending: function(newsletter) {
-    MailPoet.Ajax.post({
-      endpoint: 'sendingQueue',
-      action: 'resume',
-      data: newsletter.id
-    }).done(function() {
-      jQuery('#pause_'+newsletter.id).show();
-      jQuery('#resume_'+newsletter.id).hide();
-    });
-  },
-  renderStatus: function(newsletter) {
-    if (!newsletter.queue) {
-      return (
-        <span>{MailPoet.I18n.t('notSentYet')}</span>
-      );
-    } else {
-      if (newsletter.queue.status === 'scheduled') {
-        return (
-          <span>{MailPoet.I18n.t('scheduledFor')}  { MailPoet.Date.format(newsletter.queue.scheduled_at) } </span>
-        )
-      }
-      const progressClasses = classNames(
-        'mailpoet_progress',
-        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed'}
-      );
-
-      // calculate percentage done
-      const percentage = Math.round(
-        (newsletter.queue.count_processed * 100) / (newsletter.queue.count_total)
-      );
-
-      let label;
-
-      if (newsletter.queue.status === 'completed') {
-        label = (
-          <span>
-            {
-              MailPoet.I18n.t('newsletterQueueCompleted')
-              .replace("%$1d", newsletter.queue.count_processed - newsletter.queue.count_failed)
-              .replace("%$2d", newsletter.queue.count_total)
-            }
-          </span>
-        );
-      } else {
-        label = (
-          <span>
-            { newsletter.queue.count_processed } / { newsletter.queue.count_total }
-            &nbsp;&nbsp;
-            <a
-              id={ 'resume_'+newsletter.id }
-              className="button"
-              style={{ display: (newsletter.queue.status === 'paused') ? 'inline-block': 'none' }}
-              href="javascript:;"
-              onClick={ this.resumeSending.bind(null, newsletter) }
-            >{MailPoet.I18n.t('resume')}</a>
-            <a
-              id={ 'pause_'+newsletter.id }
-              className="button mailpoet_pause"
-              style={{ display: (newsletter.queue.status === null) ? 'inline-block': 'none' }}
-              href="javascript:;"
-              onClick={ this.pauseSending.bind(null, newsletter) }
-            >{MailPoet.I18n.t('pause')}</a>
-          </span>
-        );
-      }
-
-      return (
-        <div>
-          <div className={ progressClasses }>
-              <span
-                className="mailpoet_progress_bar"
-                style={ { width: percentage + "%"} }
-              ></span>
-              <span className="mailpoet_progress_label">
-                { percentage + "%" }
-              </span>
-          </div>
-          <p style={{ textAlign:'center' }}>
-            { label }
-          </p>
-        </div>
-      );
-    }
-  },
-  renderStatistics: function(newsletter) {
-    if (mailpoet_tracking_enabled === false) {
-      return;
-    }
-
-    if (newsletter.statistics && newsletter.queue && newsletter.queue.status !== 'scheduled') {
-      const total_sent = ~~(newsletter.queue.count_processed);
-
-      let percentage_clicked = 0;
-      let percentage_opened = 0;
-      let percentage_unsubscribed = 0;
-
-      if (total_sent > 0) {
-        percentage_clicked = Math.round(
-          (~~(newsletter.statistics.clicked) * 100) / total_sent
-        );
-        percentage_opened = Math.round(
-          (~~(newsletter.statistics.opened) * 100) / total_sent
-        );
-        percentage_unsubscribed = Math.round(
-          (~~(newsletter.statistics.unsubscribed) * 100) / total_sent
-        );
-      }
-
-      return (
-        <span>
-          { percentage_opened }%, { percentage_clicked }%, { percentage_unsubscribed }%
-        </span>
-      );
-    } else {
-      return (
-        <span>{MailPoet.I18n.t('notSentYet')}</span>
-      );
-    }
-  },
   renderItem: function(newsletter, actions) {
     const rowClasses = classNames(
       'manage-column',
@@ -291,7 +165,7 @@ const NewsletterListStandard = React.createClass({
           { actions }
         </td>
         <td className="column" data-colname={ MailPoet.I18n.t('status') }>
-          { this.renderStatus(newsletter) }
+          { this.renderQueueStatus(newsletter) }
         </td>
         <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
           { segments }