Merge pull request #82 from oslabs-beta/rydang/eslint

eslint config compatibility with prettier

Author: rydang

.eslintrc

@@ -1,13 +1,16 @@
 {
   "extends": ["airbnb", "plugin:jest/recommended"],
   "root": true,
-	"plugins": ["jest"],
+  "plugins": ["jest"],
   "env": {
     "jest/globals": true,
     "browser": true,
-    "webextensions": true, 
+    "webextensions": true
   },
-	"globals": { 
-    "fetch": false,
+  "globals": {
+    "fetch": false
+  },
+  "rules": {
+    "arrow-parens": [2, "as-needed"]
   }
 }

package/tree.js

@@ -4,7 +4,9 @@ class Tree {
     // give it a special state = 'root'
     // a setState function that just calls the callback instantly
     if (!useStateInstead) {
-      this.component = (component === 'root') ? { state: 'root',  setState: (partial, callback) => callback() } : component;
+      this.component = component === 'root'
+        ? { state: 'root', setState: (partial, callback) => callback() }
+        : component;
     } else {
       this.state = component;
       this.name = name;
@@ -21,7 +23,9 @@ class Tree {
   // deep copies only the state of each component and creates a new tree
   getCopy(copy = new Tree('root', true)) {
     // copy state of children
-    copy.children = this.children.map(child => new Tree(child.component.state, true, child.component.constructor.name));
+    copy.children = this.children.map(
+      child => new Tree(child.component.state, true, child.component.constructor.name),
+    );
 
     // copy children's children recursively
     this.children.forEach((child, i) => child.getCopy(copy.children[i]));
@@ -31,15 +35,14 @@ class Tree {
   // print out the tree in the console
   print() {
     const children = ['children: '];
-    this.children.forEach((child) => {
+    this.children.forEach(child => {
       children.push(child.state || child.component.state);
     });
     if (this.name) console.log(this.name);
     if (children.length === 1) {
       console.log(this.state || this.component.state);
-    }
-    else console.log(this.state || this.component.state, ...children);
-    this.children.forEach((child) => {
+    } else console.log(this.state || this.component.state, ...children);
+    this.children.forEach(child => {
       child.print();
     });
   }

src/app/__tests__/MainContainer.test.js

@@ -38,12 +38,12 @@ global.chrome = chrome;
 let eventListener;
 const port = {
   onMessage: {
-    addListener: ((fn) => {
+    addListener: fn => {
       eventListener = fn;
-    }),
+    },
   },
   onDisconnect: {
-    addListener: () => { },
+    addListener: () => {},
   },
 };
 chrome.runtime.connect.returns(port);

src/app/components/Action.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { changeView, changeSlider } from '../actions/actions';
 
-const Action = (props) => {
+const Action = props => {
   const {
     selected, index, sliderIndex, dispatch,
   } = props;
@@ -18,7 +18,7 @@ const Action = (props) => {
       <div className="action-component-text">{index}</div>
       <button
         className="jump-button"
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           dispatch(changeSlider(index));
         }}

src/app/components/Chart.jsx

@@ -9,7 +9,6 @@ import * as d3 from 'd3';
 let root = {};
 let duration = 750;
 
-
 class Chart extends Component {
   componentDidMount() {
     const { snapshot } = this.props;
@@ -35,31 +34,42 @@ class Chart extends Component {
     duration = 0;
 
     const margin = {
-      top: 20, right: 120, bottom: 20, left: 120,
+      top: 20,
+      right: 120,
+      bottom: 20,
+      left: 120,
     };
     // const width = 600 - margin.right - margin.left;
     const height = 600 - margin.top - margin.bottom;
 
     let i = 0;
 
-    const tree = d3.layout.tree()
+    const tree = d3.layout
+      .tree()
       .nodeSize([20])
       .separation((a, b) => (a.parent === b.parent ? 3 : 1));
 
-    const diagonal = d3.svg.diagonal()
-      .projection(d => [d.y, d.x]);
+    const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
 
-    const svg = d3.select(this.refs.anchor).append('svg')
+    const svg = d3
+      .select(this.refs.anchor)
+      .append('svg')
       .attr('width', '100%')
       .attr('height', '100%')
       .attr('cursor', '-webkit-grab')
       .attr('preserveAspectRatio', 'xMinYMin slice')
-      .call(d3.behavior.zoom().on('zoom', () => svg.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`)))
+      .call(
+        d3.behavior
+          .zoom()
+          .on('zoom', () => svg.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`)),
+      )
       .append('g')
       .attr('transform', `translate(60,${height / 2})`);
 
     // Add tooltip div
-    const div = d3.select('body').append('div')
+    const div = d3
+      .select('body')
+      .append('div')
       .attr('class', 'tooltip')
       .style('opacity', 1e-6)
       .on('mouseover', tipMouseover)
@@ -74,32 +84,37 @@ class Chart extends Component {
       const links = tree.links(nodes);
 
       // Normalize for fixed-depth.
-      nodes.forEach((d) => { d.y = d.depth * 180; });
+      nodes.forEach(d => {
+        d.y = d.depth * 180;
+      });
 
       // Update the nodes…
-      const node = svg.selectAll('g.node')
-        .data(nodes, (d) => {
-          if (!d.id) {
-            i += 1;
-            d.id = i;
-          }
-          return d.id;
-        });
+      const node = svg.selectAll('g.node').data(nodes, d => {
+        if (!d.id) {
+          i += 1;
+          d.id = i;
+        }
+        return d.id;
+      });
 
       // Enter any new nodes at the parent's previous position.
-      const nodeEnter = node.enter().append('g')
+      const nodeEnter = node
+        .enter()
+        .append('g')
         .attr('class', 'node')
         .attr('transform', () => `translate(${source.y0},${source.x0})`)
         .on('click', click)
         .on('mouseover', mouseover)
         .on('mouseout', mouseout)
         .on('mousemove', d => mousemove(d));
 
-      nodeEnter.append('circle')
+      nodeEnter
+        .append('circle')
         .attr('r', 1e-6)
         .style('fill', d => (d._children ? 'lightsteelblue' : '#fff'));
 
-      nodeEnter.append('text')
+      nodeEnter
+        .append('text')
         .attr('x', d => (d.children || d._children ? -10 : 10))
         .attr('dy', '.35em')
         .attr('text-anchor', d => (d.children || d._children ? 'end' : 'start'))
@@ -108,48 +123,53 @@ class Chart extends Component {
         .style('fill-opacity', 1e-6);
 
       // Transition nodes to their new position.
-      const nodeUpdate = node.transition()
+      const nodeUpdate = node
+        .transition()
         .duration(duration)
         .attr('transform', d => `translate(${d.y},${d.x})`);
 
-      nodeUpdate.select('circle')
+      nodeUpdate
+        .select('circle')
         .attr('r', 7)
         .style('fill', d => (d._children ? '#A1C658' : '#D381C3'));
 
-      nodeUpdate.select('text')
-        .style('fill-opacity', 1);
+      nodeUpdate.select('text').style('fill-opacity', 1);
 
       // Transition exiting nodes to the parent's new position.
-      const nodeExit = node.exit().transition()
+      const nodeExit = node
+        .exit()
+        .transition()
         .duration(duration)
         .attr('transform', () => `translate(${source.y},${source.x})`)
         .remove();
 
-      nodeExit.select('circle')
-        .attr('r', 1e-6);
+      nodeExit.select('circle').attr('r', 1e-6);
 
-      nodeExit.select('text')
-        .style('fill-opacity', 1e-6);
+      nodeExit.select('text').style('fill-opacity', 1e-6);
 
       // Update the links…
-      const link = svg.selectAll('path.link')
-        .data(links, d => d.target.id);
+      const link = svg.selectAll('path.link').data(links, d => d.target.id);
 
       // Enter any new links at the parent's previous position.
-      link.enter().insert('path', 'g')
+      link
+        .enter()
+        .insert('path', 'g')
         .attr('class', 'link')
         .attr('d', () => {
           const o = { x: source.x0, y: source.y0 };
           return diagonal({ source: o, target: o });
         });
 
       // Transition links to their new position.
-      link.transition()
+      link
+        .transition()
         .duration(duration)
         .attr('d', diagonal);
 
       // Transition exiting nodes to the parent's new position.
-      link.exit().transition()
+      link
+        .exit()
+        .transition()
         .duration(duration)
         .attr('d', () => {
           const o = { x: source.x, y: source.y };
@@ -158,7 +178,7 @@ class Chart extends Component {
         .remove();
 
       // Stash the old positions for transition.
-      nodes.forEach((d) => {
+      nodes.forEach(d => {
         d.x0 = d.x;
         d.y0 = d.y;
       });
@@ -178,27 +198,31 @@ class Chart extends Component {
 
     // Show state on mouse over
     function mouseover() {
-      div.transition()
+      div
+        .transition()
         .duration(300)
         .style('display', 'block')
         .style('opacity', 1);
     }
 
     function mouseout() {
-      div.transition()
+      div
+        .transition()
         .duration(3000)
         .style('opacity', 1e-6)
         .style('display', 'none');
     }
 
     function tipMouseover() {
-      div.transition()
+      div
+        .transition()
         .duration(300)
         .style('opacity', 1);
     }
 
     function tipMouseout() {
-      div.transition()
+      div
+        .transition()
         .duration(3000)
         .style('opacity', 1e-6)
         .style('display', 'none');
@@ -223,9 +247,7 @@ class Chart extends Component {
 }
 
 Chart.propTypes = {
-  snapshot: PropTypes.arrayOf(
-    PropTypes.object,
-  ).isRequired,
+  snapshot: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default Chart;

src/app/components/Dropdown.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Select from 'react-select';
 import PropTypes from 'prop-types';
 
-const Dropdown = (props) => {
+const Dropdown = props => {
   const { speeds, setSpeed, selectedSpeed } = props;
   return (
     <Select

src/app/components/MainSlider.jsx

@@ -10,7 +10,7 @@ import { useStoreContext } from '../store';
 
 const { Handle } = Slider;
 
-const handle = (props) => {
+const handle = props => {
   const {
     value, dragging, index, ...restProps
   } = props;
@@ -37,7 +37,7 @@ function MainSlider({ snapshotsLength }) {
       min={0}
       max={snapshotsLength - 1}
       value={sliderIndex}
-      onChange={(index) => {
+      onChange={index => {
         const newIndex = index === -1 ? 0 : index;
         dispatch(changeSlider(newIndex));
         dispatch(pause());

src/app/components/SwitchApp.jsx

@@ -9,7 +9,7 @@ const SwitchAppDropdown = () => {
 
   const tabsArray = [];
 
-  Object.keys(tabs).forEach((tab) => {
+  Object.keys(tabs).forEach(tab => {
     tabsArray.push({ value: tab, label: tab });
   });
 
@@ -24,7 +24,7 @@ const SwitchAppDropdown = () => {
       classNamePrefix="react-select"
       value={currTab}
       // onChange={dispatch(setTab(loadApp))}
-      onChange={(e) => {
+      onChange={e => {
         dispatch(setTab(parseInt(e.value, 10)));
         // console.log(e)
       }}

src/app/components/Tree.jsx

@@ -15,7 +15,7 @@ const getItemString = (type, data) => {
   return null;
 };
 
-const Tree = (props) => {
+const Tree = props => {
   const { snapshot } = props;
   return (
     <React.Fragment>