Final docs (and comment/console log) cleanup

Author: haejinjo

src/app/__tests__/Chart_deprecated_.test.tsx

@@ -40,7 +40,7 @@ interface StateRouteProps {
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
 
-  let isRecoil = snapshot.AtomsRelationship ? true : false;
+  const isRecoil = snapshot.AtomsRelationship ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
   // component map zoom state
@@ -50,15 +50,14 @@ const StateRoute = (props: StateRouteProps) => {
     k: 1,
   });
 
-  //Map
+  // Map
   const renderComponentMap = () => {
     if (hierarchy) {
       return <ComponentMap viewIndex={viewIndex} snapshots={snapshots} x={x} y={y} k={k} setZoomState={setZoomState} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
-
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
   // if true involk render chart with hierarchy
@@ -69,9 +68,7 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">History graph will render on first state change</div>;
   };
 
-  const renderAtomsRelationship = () => {
-    return <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
-  };
+  const renderAtomsRelationship = () => <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
 
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
@@ -83,29 +80,15 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
-  let perfChart;
-  if (true) {
-
-    perfChart = (
-      <PerfView
-        viewIndex={viewIndex}
-        snapshots={snapshots}
-        setNoRenderData={setNoRenderData}
-        width={600}
-        height={1000}
-      />
-    );
-  }
-
-  //This will intermitently block Recoil PerfCharts from rendering
-  // else {
-  //   perfChart = (
-  //     <div className="no-data-message">
-  //       Application must be running in development mode in order to view
-  //       performance data
-  //     </div>
-  //   );
-  // }
+  const perfChart = (
+    <PerfView
+      viewIndex={viewIndex}
+      snapshots={snapshots}
+      setNoRenderData={setNoRenderData}
+      width={600}
+      height={1000}
+    />
+  );
 
   const renderPerfView = () => <ErrorHandler>{perfChart}</ErrorHandler>;
 
@@ -131,9 +114,12 @@ const StateRoute = (props: StateRouteProps) => {
           Map
         </NavLink>
 
-        {isRecoil && <NavLink className="router-link" activeClassName="is-active" to="/relationship">
-          Relationships
-        </NavLink>}
+        {isRecoil
+          && (
+            <NavLink className="router-link" activeClassName="is-active" to="/relationship">
+              Relationships
+            </NavLink>
+          )}
 
         <NavLink
           className="router-link"

src/app/components/StateRoute.tsx

@@ -9,7 +9,9 @@
 // eslint-disable-next-line import/newline-after-import
 const acorn = require('acorn');
 const jsx = require('acorn-jsx');
+
 const JSXParser = acorn.Parser.extend(jsx());
+
 /**
  * @method throttle
  * @param f A function to throttle
@@ -19,8 +21,8 @@ const JSXParser = acorn.Parser.extend(jsx());
  */
 export const throttle = (f: Function, t: number): Function => {
   // Initialize boolean flags for callback, throttledFunc
-  let isOnCooldown: boolean = false;
-  let isCallQueued: boolean = false;
+  let isOnCooldown = false;
+  let isCallQueued = false;
 
   // Wrap the passed-in function, f, in a callback function that "throttles"
   // (puts a limit on) the number of calls that can be made to function, f
@@ -67,7 +69,7 @@ export const throttle = (f: Function, t: number): Function => {
 /**
  * @method getHooksNames
  * @param elementType The fiber `type`, A stringified function of the component the Fiber whose hooks we want corresponds to
- * @returns An array of strings 
+ * @returns An array of strings
  */
 export const getHooksNames = (elementType: string): Array<string> => {
   // Initialize empty object to store the setters and getter
@@ -82,7 +84,7 @@ export const getHooksNames = (elementType: string): Array<string> => {
 
   // Begin search for hook names, only if ast has a body property.
   while (Object.hasOwnProperty.call(ast, 'body')) {
-    let tsCount: number = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
+    let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
     ast = ast.body;
 
     // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
@@ -91,7 +93,7 @@ export const getHooksNames = (elementType: string): Array<string> => {
      * Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
      * Iterate through AST of every function declaration
      * Check within each function declaration if there are hook declarations */
-    ast.forEach((functionDec) => {
+    ast.forEach(functionDec => {
       let body: any;
       if (functionDec.expression && functionDec.expression.body) body = functionDec.expression.body.body;
       else body = functionDec.body ? functionDec.body.body : [];

src/backend/__tests__/chromium.test.ts

@@ -14,8 +14,6 @@ import timeJumpStart from './timeJump';
 import {
   Snapshot, Mode, SnapshotNode, MsgData,
 } from './types/backendTypes';
-import { Interface } from 'readline';
-
 
 // * State snapshot object initialized here
 const snapShot: Snapshot = {
@@ -45,9 +43,9 @@ function getRouteURL(node: SnapshotNode): string {
 }
 
 // * Event listener for time-travel actions
-window.addEventListener('message', ({ data: { action, payload } } : MsgData) => {
+window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
-    case 'jumpToSnap':      
+    case 'jumpToSnap':
       timeJump(payload, true); // * This sets state with given payload
       // Get the pathname from payload and add new entry to browser history
       // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

src/backend/helpers.ts

@@ -249,7 +249,7 @@ function createTree(
       // We then store them along with the corresponding memoizedState.queue,
       // which includes the dispatch() function we use to change their state.
       const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
-      hooksStates.forEach((state) => {
+      hooksStates.forEach(state => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,
           state.component

src/backend/index.ts

@@ -8,14 +8,14 @@ import 'core-js';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   HookStateItem,
-  HookStates
+  HookStates,
 } from './types/backendTypes';
 
 const componentActionsRecord: HookStates = [];
-let index : number = 0;
+let index = 0;
 
 export default {
-  saveNew: (state, component) : number => {
+  saveNew: (state, component): number => {
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;