eslint and typescript adjustments part1

Author: OzairGh

src/app/components/PerformanceVisx.tsx

@@ -54,9 +54,11 @@ const collectNodes = (snaps, componentName) => {
         } else {
           renderResult.push(renderTime);
         }
-        // compare the last pushed component Data from the array to the current one to see if there are differences
+        // compare the last pushed component Data from the array to
+        // the current one to see if there are differences
         if (x !== 0 && componentsResult.length !== 0) {
-          // needs to be stringified because values are hard to determine if true or false if in they're seen as objects
+          // needs to be stringified because values are hard to determine if
+          // true or false if in they're seen as objects
           if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
             newChange = true;
             const props = { [`snapshot${x}`]: { ...cur.componentData.props } };

src/backend/linkFiber.ts

@@ -12,7 +12,6 @@
 /* eslint-disable no-param-reassign */
 
 // import typescript types
-import { element } from 'prop-types';
 import {
   // tree
   Snapshot,
@@ -284,6 +283,7 @@ function createTree(
         };
       }
     } catch (error) {
+      console.log(error);
     }
   }
 
@@ -458,7 +458,7 @@ function createTree(
 
       while (pointer !== null) {
         if (pointer.stateNode !== null) {
-          rtid = `fromLinkFiber${rtidCounter++}`;
+          rtid = `fromLinkFiber${rtidCounter += 1}`;
           // rtid = rtidCounter++;
           recoilDomNode[currentFiber.elementType.name].push(rtid);
           // check if rtid is already present
@@ -496,7 +496,7 @@ function createTree(
         }
         currentFiber.child.stateNode.classList.add(rtid);
       }
-      rtidCounter++;
+      rtidCounter += 1;
     }
     // checking if tree fromSibling is true
     if (fromSibling) {

src/backend/masterState.ts

@@ -11,10 +11,12 @@ import {
   HookStates, // array of hook state items
 } from './types/backendTypes';
 
-// HookState is an array that contains a "component" for every single state change that occurs in the app
+// HookState is an array that contains a "component" for
+// every single state change that occurs in the app
 // Information on these components include ComponentData as well as state
 // For class components, there will be one "component" for each snapshot
-// For functional components that utilize Hooks, there will be one "component" for each setter/getter every time we have a new snapshot
+// For functional components that utilize Hooks, there will be one "component"
+// for each setter/getter every time we have a new snapshot
 let componentActionsRecord: HookStates = [];
 let index = 0;
 
@@ -30,19 +32,20 @@ export default {
 
     return index - 1;
   },
-  getRecordByIndex: (inputIndex: number): HookStateItem =>
-    componentActionsRecord[inputIndex],
-  // this is used for class components - inputIndex will always be a fixed number (coming in timeJump.ts)
-  getComponentByIndex: (inputIndex: number): any =>
+  getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
+  // this is used for class components -
+  /* inputIndex will always be a fixed number (coming in timeJump.ts) */
+  getComponentByIndex: (inputIndex: number): any => (
     componentActionsRecord[inputIndex]
       ? componentActionsRecord[inputIndex].component
-      : undefined,
+      : undefined),
   // this is used for react hooks - hooks will be passed in as an array from timeJump.ts
   getComponentByIndexHooks: (inputIndex: Array<number> = []): any => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {
-      if (componentActionsRecord[inputIndex[i]])
+      if (componentActionsRecord[inputIndex[i]]) {
         multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
+      }
     }
     return multiDispatch;
   },

src/backend/timeJump.ts

@@ -63,10 +63,10 @@ export default (origin, mode) => {
       }
     });
 
-    //REACT HOOKS
+    // REACT HOOKS
     // check if component states are set with hooks
-      // if yes, grab all relevant components for this snapshot in numArr
-      // call dispatch on each component passing in the corresponding currState value
+    // if yes, grab all relevant components for this snapshot in numArr
+    // call dispatch on each component passing in the corresponding currState value
     if (target.state && target.state.hooksState) {
       const currState = target.state.hooksState;
       const numArr: Array<number> = [];

src/backend/tree.ts

@@ -7,8 +7,6 @@
 /* eslint-disable no-console */
 /* eslint-disable no-param-reassign */
 
-import { createGenerateClassName } from '@material-ui/styles';
-
 let copyInstances = 0;
 const circularComponentTable = new Set<Tree>();
 let componentNames = {};
@@ -83,14 +81,12 @@ class Tree {
   }
 
   // Returns a unique name ready to be used
-  checkForDuplicates(name: string) {
+  checkForDuplicates(name: string): string {
     // check for empty name
     if (name === '' && typeof this.rtid === 'string') {
       name = this.rtid.replace('fromLinkFiber', '');
     }
-    if (this.state === 'root') {
-      componentNames = {};
-    }
+    if (this.state === 'root') componentNames = {};
     // check for duplicate
     else if (componentNames[name] !== undefined) {
       const count = componentNames[name] + 1;

src/extension/background.js

@@ -22,11 +22,13 @@ function createTabObj(title) {
   // update tabsObj
   return {
     title,
-    // snapshots is an array of ALL state snapshots for stateful and stateless components the Reactime tab working on a specific user application
+    // snapshots is an array of ALL state snapshots for stateful and stateless
+    // components the Reactime tab working on a specific user application
     snapshots: [],
     // index here is the tab index that shows total amount of state changes
     index: 0,
-    //* this is our pointer so we know what the current state the user is checking (this accounts for time travel aka when user clicks jump on the UI)
+    //* this is our pointer so we know what the current state the user is checking
+    // (this accounts for time travel aka when user clicks jump on the UI)
     currLocation: null,
     // points to the node that will generate the next child set by newest node or jump
     currParent: 0,
@@ -54,16 +56,32 @@ function createTabObj(title) {
 class Node {
   constructor(obj, tabObj) {
     // continues the order of number of total state changes
-    this.index = tabObj.index++;
+    this.index = tabObj.index;
+    tabObj.index += 1;
     // continues the order of number of states changed from that parent
-    this.name = tabObj.currParent += 1;
+    tabObj.currParent += 1;
+    this.name = tabObj.currParent;
     // marks from what branch this node is originated
     this.branch = tabObj.currBranch;
     this.stateSnapshot = obj;
     this.children = [];
   }
 }
 
+function countCurrName(rootNode, name) {
+  if (rootNode.name > name) {
+    return 0;
+  }
+  if (rootNode.name === name) {
+    return 1;
+  }
+  let branch = 0;
+  rootNode.children.forEach(child => {
+    branch += countCurrName(child, name);
+  });
+  return branch;
+}
+
 // Adds a new node to the current location.
 // Invoked in the case 'recordSnap'.
 function sendToHierarchy(tabObj, newNode) {
@@ -79,23 +97,11 @@ function sendToHierarchy(tabObj, newNode) {
   }
 }
 
-function countCurrName(rootNode, name) {
-  if (rootNode.name > name) {
-    return 0;
-  }
-  if (rootNode.name === name) {
-    return 1;
-  }
-  let branch = 0;
-  rootNode.children.forEach(child => {
-    branch += countCurrName(child, name);
-  });
-  return branch;
-}
-
 // This function is used when time jumping to a previous state,
 // so that it runs recursively until it finds the correct index,
 // and updates the tabsObject to the node at that index.
+/* eslint no-param-reassign: ["error", { "props": false }] */
+
 function changeCurrLocation(tabObj, rootNode, index, name) {
   // index comes from the app's main reducer to locate the correct current location on tabObj
   // check if current node has the index wanted

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "./src/extension/build/bundles/",
     "module": "es6",
-    //"noImplicitAny": true,
+    // "noImplicitAny": true,
     "target": "es5",
     "jsx": "react",
     "removeComments": true,