Fix eslint6 react/prefer-stateless-function

[MAILPOET-1140]

.eslintrc.es6.json

@@ -31,7 +31,6 @@
     "react/jsx-boolean-value": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
-    "react/prefer-stateless-function": 0,
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,

assets/js/src/form/fields/date.jsx

@@ -5,97 +5,91 @@ define([
   React,
   Moment
 ) => {
-  class FormFieldDateYear extends React.Component {
+  function FormFieldDateYear(props) {
-    render() {
+    const yearsRange = 100;
-      const yearsRange = 100;
+    const years = [];
-      const years = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
-        years.push((
+      years.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
-        ));
+      ));
-      }
-
-      const currentYear = Moment().year();
-      for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
-        years.push((
-          <option
-            key={i}
-            value={i}
-          >{ i }</option>
-        ));
-      }
-      return (
-        <select
-          name={`${this.props.name}[year]`}
-          value={this.props.year}
-          onChange={this.props.onValueChange}
-        >
-          { years }
-        </select>
-      );
     }
+
+    const currentYear = Moment().year();
+    for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
+      years.push((
+        <option
+          key={i}
+          value={i}
+        >{ i }</option>
+      ));
+    }
+    return (
+      <select
+        name={`${props.name}[year]`}
+        value={props.year}
+        onChange={props.onValueChange}
+      >
+        { years }
+      </select>
+    );
   }
 
-  class FormFieldDateMonth extends React.Component {
+  function FormFieldDateMonth(props) {
-    render() {
+    const months = [];
-      const months = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
-        months.push((
+      months.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
-        ));
+      ));
-      }
-
-      for (let i = 1; i <= 12; i += 1) {
-        months.push((
-          <option
-            key={i}
-            value={i}
-          >{ this.props.monthNames[i - 1] }</option>
-        ));
-      }
-      return (
-        <select
-          name={`${this.props.name}[month]`}
-          value={this.props.month}
-          onChange={this.props.onValueChange}
-        >
-          { months }
-        </select>
-      );
     }
+
+    for (let i = 1; i <= 12; i += 1) {
+      months.push((
+        <option
+          key={i}
+          value={i}
+        >{ props.monthNames[i - 1] }</option>
+      ));
+    }
+    return (
+      <select
+        name={`${props.name}[month]`}
+        value={props.month}
+        onChange={props.onValueChange}
+      >
+        { months }
+      </select>
+    );
   }
 
-  class FormFieldDateDay extends React.Component {
+  function FormFieldDateDay(props) {
-    render() {
+    const days = [];
-      const days = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
-        days.push((
+      days.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
-        ));
+      ));
-      }
-
-      for (let i = 1; i <= 31; i += 1) {
-        days.push((
-          <option
-            key={i}
-            value={i}
-          >{ i }</option>
-        ));
-      }
-
-      return (
-        <select
-          name={`${this.props.name}[day]`}
-          value={this.props.day}
-          onChange={this.props.onValueChange}
-        >
-          { days }
-        </select>
-      );
     }
+
+    for (let i = 1; i <= 31; i += 1) {
+      days.push((
+        <option
+          key={i}
+          value={i}
+        >{ i }</option>
+      ));
+    }
+
+    return (
+      <select
+        name={`${props.name}[day]`}
+        value={props.day}
+        onChange={props.onValueChange}
+      >
+        { days }
+      </select>
+    );
   }
 
   class FormFieldDate extends React.Component {

assets/js/src/newsletters/badges/badge.jsx

@@ -2,36 +2,34 @@ import React from 'react';
 import classNames from 'classnames';
 import ReactTooltip from 'react-tooltip';
 
-class Badge extends React.Component {
+function Badge(props) {
-  render() {
+  const badgeClasses = classNames(
-    const badgeClasses = classNames(
+    'mailpoet_badge',
-      'mailpoet_badge',
+    props.type ? `mailpoet_badge_${props.type}` : ''
-      this.props.type ? `mailpoet_badge_${this.props.type}` : ''
+  );
-    );
 
-    const tooltip = this.props.tooltip ? this.props.tooltip.replace(/\n/g, '<br />') : false;
+  const tooltip = props.tooltip ? props.tooltip.replace(/\n/g, '<br />') : false;
-    // tooltip ID must be unique, defaults to tooltip text
+  // tooltip ID must be unique, defaults to tooltip text
-    const tooltipId = this.props.tooltipId || tooltip;
+  const tooltipId = props.tooltipId || tooltip;
 
-    return (
+  return (
-      <span>
+    <span>
-        <span
+      <span
-          className={badgeClasses}
+        className={badgeClasses}
-          data-tip={tooltip}
+        data-tip={tooltip}
-          data-for={tooltipId}
+        data-for={tooltipId}
-        >
+      >
-          {this.props.name}
+        {props.name}
-        </span>
-        { tooltip && (
-          <ReactTooltip
-            place="right"
-            multiline={true}
-            id={tooltipId}
-          />
-        ) }
       </span>
-    );
+      { tooltip && (
-  }
+        <ReactTooltip
+          place="right"
+          multiline={true}
+          id={tooltipId}
+        />
+      ) }
+    </span>
+  );
 }
 
 export default Badge;

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

@@ -278,7 +278,7 @@ define(
       },
       handleCheckboxChange: function (event) {
         const changeEvent = event;
-        changeEvent.target.value = this.refs.isScheduledInput.checked ? '1' : '0';
+        changeEvent.target.value = this.isScheduledInput.checked ? '1' : '0';
         return this.handleValueChange(changeEvent);
       },
       isScheduled: function () {

assets/js/src/newsletters/types/automatic_emails/breadcrumb.jsx

@@ -2,40 +2,38 @@ import Breadcrumb from 'newsletters/breadcrumb.jsx';
 import React from 'react';
 import MailPoet from 'mailpoet';
 
-class AutomaticEmailsBreadcrumb extends React.Component {
+function AutomaticEmailsBreadcrumb(props) {
-  render() {
+  const steps = [
-    const steps = [
+    {
-      {
+      name: 'type',
-        name: 'type',
+      label: MailPoet.I18n.t('selectType'),
-        label: MailPoet.I18n.t('selectType'),
+      link: '/new',
-        link: '/new',
+    },
-      },
+    {
-      {
+      name: 'events',
-        name: 'events',
+      label: MailPoet.I18n.t('events'),
-        label: MailPoet.I18n.t('events'),
+    },
-      },
+    {
-      {
+      name: 'conditions',
-        name: 'conditions',
+      label: MailPoet.I18n.t('conditions'),
-        label: MailPoet.I18n.t('conditions'),
+    },
-      },
+    {
-      {
+      name: 'template',
-        name: 'template',
+      label: MailPoet.I18n.t('template'),
-        label: MailPoet.I18n.t('template'),
+    },
-      },
+    {
-      {
+      name: 'editor',
-        name: 'editor',
+      label: MailPoet.I18n.t('designer'),
-        label: MailPoet.I18n.t('designer'),
+    },
-      },
+    {
-      {
+      name: 'send',
-        name: 'send',
+      label: MailPoet.I18n.t('send'),
-        label: MailPoet.I18n.t('send'),
+    },
-      },
+  ];
-    ];
 
-    return (
+  return (
-      <Breadcrumb step={this.props.step} steps={steps} />
+    <Breadcrumb step={props.step} steps={steps} />
-    );
+  );
-  }
 }
 
 module.exports = AutomaticEmailsBreadcrumb;