[js linting] use airbnb eslint settings (#796)

* add airbnb eslint settings and lint all the code

* fix linting erros

caravel/assets/javascripts/dashboard/components/GridLayout.jsx

@@ -1,108 +1,69 @@
+import $ from 'jquery';
 import React, { PropTypes } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
+import SliceCell from './SliceCell';
 
 require('../../../node_modules/react-grid-layout/css/styles.css');
 require('../../../node_modules/react-resizable/css/styles.css');
 
-const sliceCellPropTypes = {
-  slice: PropTypes.object.isRequired,
-  removeSlice: PropTypes.func.isRequired,
-  expandedSlices: PropTypes.object
-};
-
-const gridLayoutPropTypes = {
+const propTypes = {
   dashboard: PropTypes.object.isRequired,
   slices: PropTypes.arrayOf(PropTypes.object).isRequired,
-  posDict: PropTypes.object.isRequired
+  posDict: PropTypes.object.isRequired,
 };
 
-class SliceCell extends React.Component {
-  render() {
-    const slice = this.props.slice,
-          createMarkup = function () {
-            return { __html: slice.description_markeddown };
-          };
-
-    return (
-      <div>
-        <div className="chart-header">
-          <div className="row">
-            <div className="col-md-12 text-center header">
-              {slice.slice_name}
-            </div>
-            <div className="col-md-12 chart-controls">
-              <div className="pull-left">
-                <a title="Move chart" data-toggle="tooltip">
-                  <i className="fa fa-arrows drag"/>
-                </a>
-                <a className="refresh" title="Force refresh data" data-toggle="tooltip">
-                  <i className="fa fa-repeat"/>
-                </a>
-              </div>
-              <div className="pull-right">
-                {slice.description ?
-                  <a title="Toggle chart description">
-                    <i className="fa fa-info-circle slice_info" title={slice.description} data-toggle="tooltip"/>
-                  </a>
-                : ""}
-                <a href={slice.edit_url} title="Edit chart" data-toggle="tooltip">
-                  <i className="fa fa-pencil"/>
-                </a>
-                <a href={slice.slice_url} title="Explore chart" data-toggle="tooltip">
-                  <i className="fa fa-share"/>
-                </a>
-                <a className="remove-chart" title="Remove chart from dashboard" data-toggle="tooltip">
-                  <i className="fa fa-close" onClick={this.props.removeSlice.bind(null, slice.slice_id)}/>
-                </a>
-              </div>
-            </div>
-
-          </div>
-        </div>
-        <div
-          className="slice_description bs-callout bs-callout-default"
-          style={this.props.expandedSlices && this.props.expandedSlices[String(slice.slice_id)] ? {} : { display: "none" }}
-          dangerouslySetInnerHTML={createMarkup()}>
-        </div>
-        <div className="row chart-container">
-          <input type="hidden" value="false"/>
-          <div id={slice.token} className="token col-md-12">
-            <img src="/static/assets/images/loading.gif" className="loading" alt="loading"/>
-            <div className="slice_container" id={slice.token + "_con"}></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
 class GridLayout extends React.Component {
+  componentWillMount() {
+    const layout = [];
+
+    this.props.slices.forEach((slice, index) => {
+      let pos = this.props.posDict[slice.slice_id];
+      if (!pos) {
+        pos = {
+          col: (index * 4 + 1) % 12,
+          row: Math.floor((index) / 3) * 4,
+          size_x: 4,
+          size_y: 4,
+        };
+      }
+
+      layout.push({
+        i: String(slice.slice_id),
+        x: pos.col - 1,
+        y: pos.row,
+        w: pos.size_x,
+        minW: 2,
+        h: pos.size_y,
+      });
+    });
+
+    this.setState({
+      layout,
+      slices: this.props.slices,
+    });
+  }
+
+  onResizeStop(layout, oldItem, newItem) {
+    const newSlice = this.props.dashboard.getSlice(newItem.i);
+    if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
+      this.setState({ layout }, () => { newSlice.resize(); });
+    }
+  }
+
+  onDragStop(layout) {
+    this.setState({ layout });
+  }
+
   removeSlice(sliceId) {
-    $('[data-toggle="tooltip"]').tooltip("hide");
+    $('[data-toggle=tooltip]').tooltip('hide');
     this.setState({
       layout: this.state.layout.filter(function (reactPos) {
         return reactPos.i !== String(sliceId);
       }),
       slices: this.state.slices.filter(function (slice) {
         return slice.slice_id !== sliceId;
-      })
-    });
-  }
-
-  onResizeStop(layout, oldItem, newItem) {
-    if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
-      this.setState({
-        layout: layout
-      }, function () {
-        this.props.dashboard.getSlice(newItem.i).resize();
-      });
-    }
-  }
-
-  onDragStop(layout) {
-    this.setState({
-      layout: layout
+      }),
     });
   }
 
@@ -113,41 +74,11 @@ class GridLayout extends React.Component {
         col: reactPos.x + 1,
         row: reactPos.y,
         size_x: reactPos.w,
-        size_y: reactPos.h
+        size_y: reactPos.h,
       };
     });
   }
 
-  componentWillMount() {
-    var layout = [];
-
-    this.props.slices.forEach(function (slice, index) {
-      var pos = this.props.posDict[slice.slice_id];
-      if (!pos) {
-        pos = {
-          col: (index * 4 + 1) % 12,
-          row: Math.floor((index) / 3) * 4,
-          size_x: 4,
-          size_y: 4
-        };
-      }
-
-      layout.push({
-        i: String(slice.slice_id),
-        x: pos.col - 1,
-        y: pos.row,
-        w: pos.size_x,
-        minW: 2,
-        h: pos.size_y
-      });
-    }, this);
-
-    this.setState({
-      layout: layout,
-      slices: this.props.slices
-    });
-  }
-
   render() {
     return (
       <ResponsiveReactGridLayout
@@ -157,30 +88,35 @@ class GridLayout extends React.Component {
         onDragStop={this.onDragStop.bind(this)}
         cols={{ lg: 12, md: 12, sm: 10, xs: 8, xxs: 6 }}
         rowHeight={100}
-        autoSize={true}
+        autoSize
         margin={[20, 20]}
         useCSSTransforms={false}
-        draggableHandle=".drag">
-        {this.state.slices.map((slice) => {
-          return (
-            <div
-              id={'slice_' + slice.slice_id}
-              key={slice.slice_id}
-              data-slice-id={slice.slice_id}
-              className={"widget " + slice.viz_name}>
-              <SliceCell
-                slice={slice}
-                removeSlice={this.removeSlice.bind(this)}
-                expandedSlices={this.props.dashboard.metadata.expanded_slices}/>
-            </div>
-          );
-        })}
+        draggableHandle=".drag"
+      >
+        {
+          /* eslint arrow-body-style: 0 */
+          this.state.slices.map((slice) => {
+            return (
+              <div
+                id={'slice_' + slice.slice_id}
+                key={slice.slice_id}
+                data-slice-id={slice.slice_id}
+                className={`widget ${slice.viz_name}`}
+              >
+                <SliceCell
+                  slice={slice}
+                  removeSlice={(sliceId) => this.removeSlice(sliceId)}
+                  expandedSlices={this.props.dashboard.metadata.expanded_slices}
+                />
+              </div>
+            );
+          })
+        }
       </ResponsiveReactGridLayout>
     );
   }
 }
 
-SliceCell.propTypes = sliceCellPropTypes;
-GridLayout.propTypes = gridLayoutPropTypes;
+GridLayout.propTypes = propTypes;
 
 export default GridLayout;