update linter to include hooks

Author: gpanciera

.eslintrc

@@ -1,11 +1,13 @@
 {
   "extends": ["airbnb", "plugin:jest/recommended"],
   "root": true,
-  "plugins": ["jest", "react"],
+  "plugins": ["jest", "react", "react-hooks"],
   "rules": {
     "arrow-parens": [2, "as-needed"],
     "import/no-unresolved": "off",
-    "import/extensions": "off"
+    "import/extensions": "off",
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
   },
   "env": {
     "es6": true,

src/app/components/PerfView.jsx

@@ -1,6 +1,8 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+/* eslint-disable arrow-body-style */
 /* eslint-disable no-plusplus */
 /* eslint-disable func-names */
-/* eslint-disable react/no-this-in-sfc */
 /* eslint-disable no-shadow */
 /* eslint-disable no-multi-spaces */
 /* eslint-disable newline-per-chained-call */
@@ -10,13 +12,11 @@
 // eslint-disable-next-line object-curly-newline
 /* eslint-disable comma-dangle */
 /* eslint-disable indent */
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable react/prop-types */
 /* eslint-disable no-console */
 
 import React, { useEffect, useState, useRef } from 'react';
 import * as d3 from 'd3';
-import { addNewSnapshots } from '../actions/actions';
+// import { addNewSnapshots } from '../actions/actions';
 
 // const windowRef = useRef(null);
 // const winWidth = null;

src/app/components/StateRoute.jsx

@@ -1,5 +1,6 @@
+/* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 
@@ -10,12 +11,7 @@ import PerfView from './PerfView';
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
-const StateRoute = ({
-  snapshot,
-  hierarchy,
-  snapshots,
-  viewIndex,
-}) => {
+const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
   // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart
   const renderChart = () => {
     if (hierarchy) {
@@ -32,9 +28,9 @@ const StateRoute = ({
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
-  const renderPerfView = () => {    
+  const renderPerfView = () => {
     if (hierarchy) {
-      return <PerfView  viewIndex={viewIndex} snapshots={snapshots} />; // ref={windowRef}
+      return <PerfView viewIndex={viewIndex} snapshots={snapshots} />; // ref={windowRef}
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };