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,14 +5,13 @@ define([
   React,
   Moment
 ) => {
-  class FormFieldDateYear extends React.Component {
+  function FormFieldDateYear(props) {
-    render() {
     const yearsRange = 100;
     const years = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
       years.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
       ));
     }
 
@@ -27,23 +26,21 @@ define([
     }
     return (
       <select
-          name={`${this.props.name}[year]`}
+        name={`${props.name}[year]`}
-          value={this.props.year}
+        value={props.year}
-          onChange={this.props.onValueChange}
+        onChange={props.onValueChange}
       >
         { years }
       </select>
     );
   }
-  }
 
-  class FormFieldDateMonth extends React.Component {
+  function FormFieldDateMonth(props) {
-    render() {
     const months = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
       months.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
       ));
     }
 
@@ -52,28 +49,26 @@ define([
         <option
           key={i}
           value={i}
-          >{ this.props.monthNames[i - 1] }</option>
+        >{ props.monthNames[i - 1] }</option>
       ));
     }
     return (
       <select
-          name={`${this.props.name}[month]`}
+        name={`${props.name}[month]`}
-          value={this.props.month}
+        value={props.month}
-          onChange={this.props.onValueChange}
+        onChange={props.onValueChange}
       >
         { months }
       </select>
     );
   }
-  }
 
-  class FormFieldDateDay extends React.Component {
+  function FormFieldDateDay(props) {
-    render() {
     const days = [];
 
-      if (this.props.placeholder !== undefined) {
+    if (props.placeholder !== undefined) {
       days.push((
-          <option value="" key={0}>{ this.props.placeholder }</option>
+        <option value="" key={0}>{ props.placeholder }</option>
       ));
     }
 
@@ -88,15 +83,14 @@ define([
 
     return (
       <select
-          name={`${this.props.name}[day]`}
+        name={`${props.name}[day]`}
-          value={this.props.day}
+        value={props.day}
-          onChange={this.props.onValueChange}
+        onChange={props.onValueChange}
       >
         { days }
       </select>
     );
   }
-  }
 
   class FormFieldDate extends React.Component {
     constructor(props) {

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

@@ -2,16 +2,15 @@ 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(
     'mailpoet_badge',
-      this.props.type ? `mailpoet_badge_${this.props.type}` : ''
+    props.type ? `mailpoet_badge_${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
-    const tooltipId = this.props.tooltipId || tooltip;
+  const tooltipId = props.tooltipId || tooltip;
 
   return (
     <span>
@@ -20,7 +19,7 @@ class Badge extends React.Component {
         data-tip={tooltip}
         data-for={tooltipId}
       >
-          {this.props.name}
+        {props.name}
       </span>
       { tooltip && (
         <ReactTooltip
@@ -31,7 +30,6 @@ class Badge extends React.Component {
       ) }
     </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,8 +2,7 @@ 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 = [
     {
       name: 'type',
@@ -33,9 +32,8 @@ class AutomaticEmailsBreadcrumb extends React.Component {
   ];
 
   return (
-      <Breadcrumb step={this.props.step} steps={steps} />
+    <Breadcrumb step={props.step} steps={steps} />
   );
-  }
 }
 
 module.exports = AutomaticEmailsBreadcrumb;