ESLint rules

assets/js/src/listing/filters.jsx

@@ -1,14 +1,8 @@
-define([
-  'react',
-  'jquery',
-  'mailpoet',
-],
-(
-  React,
-  jQuery,
-  MailPoet
-) => {
-  const ListingFilters = React.createClass({
+import React from 'react';
+import jQuery from 'jquery';
+import MailPoet from 'mailpoet';
+
+const ListingFilters = React.createClass({
   handleFilterAction: function handleFilterAction() {
     const filters = {};
     this.getAvailableFilters().forEach((filter, i) => {
@@ -50,13 +44,13 @@ define([
       .map((filter, i) => (
         <select
           ref={(c) => { this[`filter-${i}`] = c; }}
-            key={`filter-${i}`}
+          key={`filter-${filter}`}
           name={filter}
         >
-            { filters[filter].map((option, j) => (
+          { filters[filter].map(option => (
             <option
               value={option.value}
-                key={`filter-option-${j}`}
+              key={`filter-option-${option.value}`}
             >{ option.label }</option>
               )) }
         </select>
@@ -96,7 +90,6 @@ define([
       </div>
     );
   },
-  });
-
-  return ListingFilters;
 });
+
+export default ListingFilters;

assets/js/src/listing/groups.jsx

@@ -1,9 +1,18 @@
-define(['react', 'classnames'], (React, classNames) => {
-  const ListingGroups = React.createClass({
-    handleSelect: function handleSelect(group) {
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+class ListingGroups extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(group) {
     return this.props.onSelectGroup(group);
-    },
-    render: function render() {
+  }
+
+  render() {
     const groups = this.props.groups.map((group, index) => {
       if (group.name === 'trash' && group.count === 0) {
         return false;
@@ -14,12 +23,12 @@ define(['react', 'classnames'], (React, classNames) => {
         );
 
       return (
-          <li key={index}>
+        <li key={group.name}>
           {(index > 0) ? ' |' : ''}
           <a
             href="javascript:;"
             className={classes}
-              onClick={this.handleSelect.bind(this, group.name)}
+            onClick={() => this.handleSelect(group.name)}
           >
             {group.label}
             <span className="count">({ parseInt(group.count, 10).toLocaleString() })</span>
@@ -33,9 +42,19 @@ define(['react', 'classnames'], (React, classNames) => {
         { groups }
       </ul>
     );
-    },
-  });
-
-  return ListingGroups;
+  }
 }
-);
+
+ListingGroups.propTypes = {
+  onSelectGroup: PropTypes.func.isRequired,
+  groups: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    count: PropTypes.number,
+  })).isRequired,
+  group: PropTypes.shape({
+    name: PropTypes.string,
+    count: PropTypes.number,
+  }).isRequired,
+};
+
+export default ListingGroups;

assets/js/src/listing/header.jsx

@@ -19,7 +19,7 @@ const ListingHeader = React.createClass({
         <ListingColumn
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
-          key={`column-${index}`}
+          key={`column-${column.name}`}
           column={renderColumn}
         />
       );