Merge pull request #18 from oslabs-beta/louis/new-feature

Revised typescript, refactoring for best engineering practices

Author: llam722

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -1,10 +1,13 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/prop-types */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 // @ts-nocheck
+
 import React, { useState, useEffect } from 'react';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
@@ -32,6 +35,7 @@ export type LinkTypesProps = {
   height: number;
   margin?: { top: number; right: number; bottom: number; left: number };
   snapshots: Record<string, unknown>;
+  currentSnapshot?: Record<string, unknown>
 };
 
 export default function ComponentMap({
@@ -55,8 +59,8 @@ export default function ComponentMap({
   }, [dispatch]);
 
   // setting the margins for the Map to render in the tab window.
-  const innerWidth = totalWidth - margin.left - margin.right;
-  const innerHeight = totalHeight - margin.top - margin.bottom - 60;
+  const innerWidth: number = totalWidth - margin.left - margin.right;
+  const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
 
   let origin: { x: number; y: number };
   let sizeWidth: number;
@@ -122,9 +126,9 @@ export default function ComponentMap({
     overflowWrap: 'break-word',
   };
 
-  const formatRenderTime = time => {
-    time = time.toFixed(3);
-    return `${time} ms `;
+  const formatRenderTime = (time: number): string => {
+    const renderTime = time.toFixed(3);
+    return `${renderTime} ms `;
   };
 
   const formatProps = data => {
@@ -170,9 +174,9 @@ export default function ComponentMap({
     }
   };
   collectNodes(currentSnapshot);
-
+  // @ts
   // find the node that has been selected and use it as the root
-  const startNode = null;
+  let startNode = null;
   let rootNode;
   const findSelectedNode = () => {
     for (const node of nodeList) {
@@ -215,7 +219,7 @@ export default function ComponentMap({
         />
         <Group top={margin.top} left={margin.left}>
           <Tree
-            root={hierarchy(startNode || data, d => (d.isExpanded ? d.children : null))}
+            root={hierarchy(startNode, d => (d.isExpanded ? d.children : null))}
             size={[sizeWidth, sizeHeight]}
             separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
           >
@@ -332,7 +336,6 @@ export default function ComponentMap({
                               ? 'white'
                               : '#161521'
                         }
-                        z
                       >
                         {node.data.name}
                       </text>
@@ -374,7 +377,7 @@ export default function ComponentMap({
               State:
               {formatState(tooltipData.state)}
             </div>
-            <div style={scrollStyle}>
+            <div style={React.scrollStyle}>
               <div className="props">
                 Props:
                 {formatProps(tooltipData.componentData.props)}

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
 // Font size of the Controls label and Dropdowns
 const controlStyles = {
@@ -28,10 +29,10 @@ type Props = {
   setLinkType: (linkType: string) => void;
   setStepPercent: (percent: number) => void;
   setSelectedNode: (selectedNode: string) => void;
-  snapShots: [];
+  snapShots: Record<string, unknown>;
 };
 
-//use BFS to put all the nodes under snapShots(which is the tree node) into an array
+// use BFS to put all the nodes under snapShots(which is the tree node) into an array
 const nodeList = [];
 
 const collectNodes = node => {
@@ -41,10 +42,8 @@ const collectNodes = node => {
   nodeList.push(node);
   for (let i = 0; i < nodeList.length; i += 1) {
     const cur = nodeList[i];
-    if (cur.children && cur.children.length > 0) {
-      for (let child of cur.children) {
-        nodeList.push(child);
-      }
+    if (cur.children?.length > 0) {
+      cur.children.forEach(child => nodeList.push(child));
     }
   }
 };
@@ -59,15 +58,17 @@ export default function LinkControls({
   setStepPercent,
   setSelectedNode,
   snapShots,
-}: Props) {
+}: Props): JSX.Element {
   collectNodes(snapShots);
 
   return (
     <div style={controlStyles}>
 
       {/* Controls for the layout selection */}
       <label>Layout:</label>
-      &nbsp; {/*This is a non-breaking space - Prevents an automatic line break at this position */}
+      &nbsp;
+      {' '}
+      {/* This is a non-breaking space - Prevents an automatic line break at this position */}
       <select
         onClick={e => e.stopPropagation()}
         onChange={e => setLayout(e.target.value)}
@@ -108,12 +109,16 @@ export default function LinkControls({
 
       {/* Controls for the select selections. */}
       <label> Select:</label>
-      &nbsp; 
-      <input id='selectInput' list='nodeOptions' type='text' name="nodeOptions"
+      &nbsp;
+      <input
+        id="selectInput"
+        list="nodeOptions"
+        type="text"
+        name="nodeOptions"
         onChange={e => setSelectedNode(e.target.value)}
         style={dropDownStyle}
       />
-      <datalist id='nodeOptions'>
+      <datalist id="nodeOptions">
         {nodeList.map(node => (
           <option key={node.name} value={node.name}>{node.name}</option>
         ))}

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

@@ -202,7 +202,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   for (let i = 0; i < classname.length; i += 1) {
     classname[i].addEventListener('click', animateButton, false);
   }
-  const seriesList: ActionObj[][] = comparison.map((series: Series) => series.data.barStack);
+  const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
   const actionsList: ActionObj[] = seriesList.flat();
   const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
 

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -67,7 +67,7 @@ const collectNodes = (snaps, componentName) => {
         }
         break;
       }
-      if (cur.children && cur.children.length > 0) {
+      if (cur.children?.length > 0) {
         for (const child of cur.children) {
           snapshotList.push(child);
         }