ESLint rules

assets/js/src/listing/filters.jsx

@@ -1,102 +1,95 @@
-define([
+import React from 'react';
-  'react',
+import jQuery from 'jquery';
-  'jquery',
+import MailPoet from 'mailpoet';
-  'mailpoet',
+
-],
+const ListingFilters = React.createClass({
-(
+  handleFilterAction: function handleFilterAction() {
-  React,
+    const filters = {};
-  jQuery,
+    this.getAvailableFilters().forEach((filter, i) => {
-  MailPoet
+      filters[this[`filter-${i}`].name] = this[`filter-${i}`].value;
-) => {
+    });
-  const ListingFilters = React.createClass({
+    if (this.props.onBeforeSelectFilter) {
-    handleFilterAction: function handleFilterAction() {
+      this.props.onBeforeSelectFilter(filters);
-      const filters = {};
+    }
-      this.getAvailableFilters().forEach((filter, i) => {
+    return this.props.onSelectFilter(filters);
-        filters[this[`filter-${i}`].name] = this[`filter-${i}`].value;
+  },
-      });
+  handleEmptyTrash: function handleEmptyTrash() {
-      if (this.props.onBeforeSelectFilter) {
+    return this.props.onEmptyTrash();
-        this.props.onBeforeSelectFilter(filters);
+  },
-      }
+  getAvailableFilters: function getAvailableFilters() {
-      return this.props.onSelectFilter(filters);
+    const filters = this.props.filters;
-    },
+    return Object.keys(filters).filter(filter => !(
-    handleEmptyTrash: function handleEmptyTrash() {
+        filters[filter].length === 0
-      return this.props.onEmptyTrash();
+        || (
-    },
+          filters[filter].length === 1
-    getAvailableFilters: function getAvailableFilters() {
+          && !filters[filter][0].value
-      const filters = this.props.filters;
+        )
-      return Object.keys(filters).filter(filter => !(
+      ));
-          filters[filter].length === 0
+  },
-          || (
+  componentDidUpdate: function componentDidUpdate() {
-            filters[filter].length === 1
+    const selectedFilters = this.props.filter;
-            && !filters[filter][0].value
+    this.getAvailableFilters().forEach(
-          )
+      (filter, i) => {
-        ));
+        if (selectedFilters[filter] !== undefined && selectedFilters[filter]) {
-    },
+          jQuery(this[`filter-${i}`])
-    componentDidUpdate: function componentDidUpdate() {
+            .val(selectedFilters[filter])
-      const selectedFilters = this.props.filter;
+            .trigger('change');
-      this.getAvailableFilters().forEach(
-        (filter, i) => {
-          if (selectedFilters[filter] !== undefined && selectedFilters[filter]) {
-            jQuery(this[`filter-${i}`])
-              .val(selectedFilters[filter])
-              .trigger('change');
-          }
         }
-        );
-    },
-    render: function render() {
-      const filters = this.props.filters;
-      const availableFilters = this.getAvailableFilters()
-        .map((filter, i) => (
-          <select
-            ref={(c) => { this[`filter-${i}`] = c; }}
-            key={`filter-${i}`}
-            name={filter}
-          >
-            { filters[filter].map((option, j) => (
-              <option
-                value={option.value}
-                key={`filter-option-${j}`}
-              >{ option.label }</option>
-                )) }
-          </select>
-          ));
-
-      let button;
-
-      if (availableFilters.length > 0) {
-        button = (
-          <input
-            id="post-query-submit"
-            onClick={this.handleFilterAction}
-            type="submit"
-            defaultValue={MailPoet.I18n.t('filter')}
-            className="button"
-          />
-        );
       }
-
-      let emptyTrash;
-      if (this.props.group === 'trash') {
-        emptyTrash = (
-          <input
-            onClick={this.handleEmptyTrash}
-            type="submit"
-            value={MailPoet.I18n.t('emptyTrash')}
-            className="button"
-          />
-        );
-      }
-
-      return (
-        <div className="alignleft actions actions">
-          { availableFilters }
-          { button }
-          { emptyTrash }
-        </div>
       );
-    },
+  },
-  });
+  render: function render() {
+    const filters = this.props.filters;
+    const availableFilters = this.getAvailableFilters()
+      .map((filter, i) => (
+        <select
+          ref={(c) => { this[`filter-${i}`] = c; }}
+          key={`filter-${filter}`}
+          name={filter}
+        >
+          { filters[filter].map(option => (
+            <option
+              value={option.value}
+              key={`filter-option-${option.value}`}
+            >{ option.label }</option>
+              )) }
+        </select>
+        ));
 
-  return ListingFilters;
+    let button;
+
+    if (availableFilters.length > 0) {
+      button = (
+        <input
+          id="post-query-submit"
+          onClick={this.handleFilterAction}
+          type="submit"
+          defaultValue={MailPoet.I18n.t('filter')}
+          className="button"
+        />
+      );
+    }
+
+    let emptyTrash;
+    if (this.props.group === 'trash') {
+      emptyTrash = (
+        <input
+          onClick={this.handleEmptyTrash}
+          type="submit"
+          value={MailPoet.I18n.t('emptyTrash')}
+          className="button"
+        />
+      );
+    }
+
+    return (
+      <div className="alignleft actions actions">
+        { availableFilters }
+        { button }
+        { emptyTrash }
+      </div>
+    );
+  },
 });
+
+export default ListingFilters;

assets/js/src/listing/groups.jsx

@@ -1,41 +1,60 @@
-define(['react', 'classnames'], (React, classNames) => {
+import React from 'react';
-  const ListingGroups = React.createClass({
+import classNames from 'classnames';
-    handleSelect: function handleSelect(group) {
+import PropTypes from 'prop-types';
-      return this.props.onSelectGroup(group);
-    },
-    render: function render() {
-      const groups = this.props.groups.map((group, index) => {
-        if (group.name === 'trash' && group.count === 0) {
-          return false;
-        }
 
-        const classes = classNames(
+class ListingGroups extends React.Component {
-            { current: (group.name === this.props.group) }
+  constructor(props) {
-          );
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
 
-        return (
+  handleSelect(group) {
-          <li key={index}>
+    return this.props.onSelectGroup(group);
-            {(index > 0) ? ' |' : ''}
+  }
-            <a
+
-              href="javascript:;"
+  render() {
-              className={classes}
+    const groups = this.props.groups.map((group, index) => {
-              onClick={this.handleSelect.bind(this, group.name)}
+      if (group.name === 'trash' && group.count === 0) {
-            >
+        return false;
-              {group.label}
+      }
-              <span className="count">({ parseInt(group.count, 10).toLocaleString() })</span>
+
-            </a>
+      const classes = classNames(
-          </li>
+          { current: (group.name === this.props.group) }
         );
-      });
 
       return (
-        <ul className="subsubsub">
+        <li key={group.name}>
-          { groups }
+          {(index > 0) ? ' |' : ''}
-        </ul>
+          <a
+            href="javascript:;"
+            className={classes}
+            onClick={() => this.handleSelect(group.name)}
+          >
+            {group.label}
+            <span className="count">({ parseInt(group.count, 10).toLocaleString() })</span>
+          </a>
+        </li>
       );
-    },
+    });
-  });
 
-  return ListingGroups;
+    return (
+      <ul className="subsubsub">
+        { groups }
+      </ul>
+    );
+  }
 }
-);
+
+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}
         />
       );