fixed most typescript errors on all component files in app

caitlinchan23 · caitlinchan23 · commit 52f9d4a32f49 · 2020-11-20T20:50:13.000-08:00
diff --git a/src/app/components/AtomsRelationshipLegend.tsx b/src/app/components/AtomsRelationshipLegend.tsx
@@ -7,11 +7,6 @@ import {
   
 } from '@visx/legend';
 
-// declare namespace React {
-//   type ReactNode = JSX.Element;
-// }
-
-
 const ordinalColorScale = scaleOrdinal({
   domain: ['Root', 'Selectors', 'Atoms', 'Components'],
   range: [ '#3BB78F', '#f0ece2', '#FED8B1', '#acdbdf'],
diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
@@ -1,4 +1,4 @@
-
+// @ts-nocheck
 import React, { useState } from 'react';
 import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
@@ -149,7 +149,7 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log(node);
+                            // console.log(node);
                             forceUpdate();
                           }}
                         />
diff --git a/src/app/components/Diff.tsx b/src/app/components/Diff.tsx
@@ -3,7 +3,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable react/require-default-props */
-// @ts-nocheck
 import React from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
diff --git a/src/app/components/DiffRoute.tsx b/src/app/components/DiffRoute.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,
diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 import Select from 'react-select';
 
diff --git a/src/app/components/ErrorHandler.tsx b/src/app/components/ErrorHandler.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 
 /* eslint-disable react/prop-types */
 /* eslint-disable semi */
diff --git a/src/app/components/History.tsx b/src/app/components/History.tsx
@@ -1,10 +1,8 @@
-// @ts-nocheck
 
 import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './legend';
-import { changeView, changeSlider } from '../actions/actions';
-
+// import { changeView, changeSlider } from '../actions/actions';
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
  */
@@ -79,6 +77,7 @@ function History(props: Record<string, unknown>) {
 
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
+    
     const hierarchy = d3.hierarchy(root);
     const tree = d3
       .tree()
@@ -152,12 +151,12 @@ function History(props: Record<string, unknown>) {
         d3.select(this).transition(90).duration(18).attr('r', 21);
       })
       .on('click', function (d: `Record<string, unknown>`) {
-        const index = parseInt(`${d.data.name}.${d.data.branch}`);
-        dispatch(changeSlider(index));
-        dispatch(changeView(index));
+        // const index = parseInt(`${d.data.name}.${d.data.branch}`);
+        // dispatch(changeSlider(index));
+        // dispatch(changeView(index));
       })
       // think about how I can convert this any to typescript
-      .on('mouseout', function (d: any) {
+      .on('mouseout', function () {
         d3.select(this).transition().duration(300).attr('r', 14);
       });
 
diff --git a/src/app/components/LinkControls.tsx b/src/app/components/LinkControls.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 
 import React from 'react';
 // Font size of the Controls label and Dropdowns
diff --git a/src/app/components/MainSlider.tsx b/src/app/components/MainSlider.tsx
@@ -2,8 +2,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/prop-types */
-// @ts-nocheck
-
 import React from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
diff --git a/src/app/components/PerfView.tsx b/src/app/components/PerfView.tsx
@@ -39,7 +39,7 @@ const PerfView = (props: PerfViewProps) => {
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
-  console.log(snapshots)
+  // console.log(snapshots)
 
   // const performances = []  
   // snapshot = {
diff --git a/src/app/components/PerformanceVisx.tsx b/src/app/components/PerformanceVisx.tsx
@@ -6,14 +6,14 @@ import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
 import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
+// import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store'
 
-
 /* NOTES
 Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
 Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -51,6 +51,7 @@ interface BarStackProps {
 }
 
 interface snapshot {
+  snapshotId?: string;
   children: [];
   componentData: any;
   name: string;
@@ -93,7 +94,7 @@ const traverse = (snapshot, fetchData, data = {}) => {
   return data;
 };
 
-const getSnapshotIds = (obj, snapshotIds = []) => {
+const getSnapshotIds = (obj, snapshotIds = []):string[] => {
   snapshotIds.push(`${obj.name}.${obj.branch}`);
   if (obj.children) {
     obj.children.forEach(child => {
@@ -121,7 +122,9 @@ const PerformanceVisx = (props: BarStackProps) => {
   const {
     tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
   } = useTooltip<TooltipData>();
-
+  // console.log('tooltipData at line 125: ', tooltipData)
+  // console.log('tooltipTop at line 126: ', tooltipTop)
+  // console.log('tooltipLeft at line 127: ', tooltipLeft);
   let tooltipTimeout: number;
 
   const { containerRef, TooltipInPortal } = useTooltipInPortal();
@@ -130,6 +133,7 @@ const PerformanceVisx = (props: BarStackProps) => {
   const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
   const keys = Object.keys(data[0]).filter(d => d !== 'snapshotId');
   const allComponentStates = traverse(snapshots[0], 'getComponentType');
+  // console.log('snapshots:', snapshots);
   const allComponentRtids = traverse(snapshots[snapshots.length-1], 'getRtid');
 
   // create array of total render times for each snapshot
@@ -144,8 +148,10 @@ const PerformanceVisx = (props: BarStackProps) => {
 
   // data accessor (used to generate scales) and formatter (add units for on hover box)
   const getSnapshotId = (d: snapshot) => d.snapshotId;
-  const formatSnapshotId = id => `Snapshot ID: ${id}`;
-  const formatRenderTime = time => `${time} ms `;
+  
+  const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
+  
+  const formatRenderTime = (time) => `${time} ms `;
 
   // create visualization SCALES with cleaned data
   const snapshotIdScale = scaleBand<string>({
@@ -158,6 +164,7 @@ const PerformanceVisx = (props: BarStackProps) => {
     nice: true,
   });
 
+  // console.log('schemSet3: ', schemeSet3, 'typed: ', typeof schemeSet3);
   const colorScale = scaleOrdinal<string>({
     domain: keys,
     range: schemeSet3,
@@ -169,10 +176,10 @@ const PerformanceVisx = (props: BarStackProps) => {
   const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
   renderingScale.range([yMax, 0]);
-
+  // console.log('snapshotIdScale: ', snapshotIdScale);
+  // console.log('tooltipbar:', tooltipData);
   // if performance tab is too small it will not return VISX component
   return width < 10 ? null : (
-
     <div style={{ position: 'relative' }}>
       <svg ref={containerRef} width={width} height={height}>
         <rect
@@ -203,36 +210,40 @@ const PerformanceVisx = (props: BarStackProps) => {
             yScale={renderingScale}
             color={colorScale}
           >
-            {barStacks => barStacks.map(barStack => barStack.bars.map(((bar, idx) => (
-              <rect
-                key={`bar-stack-${barStack.index}-${bar.index}`}
-                x={bar.x}
-                y={bar.y}
-                height={bar.height === 0 ? idx + 1 : bar.height}
-                width={bar.width}
-                fill={bar.color}
-                /* TIP TOOL EVENT HANDLERS */
-                // Hides tool tip once cursor moves off the current rect
-                onMouseLeave={() => {
-                  dispatch(onHoverExit(allComponentRtids[bar.key]),
-                  tooltipTimeout = window.setTimeout(() => {
-                    hideTooltip()
-                  }, 300))
-                }}
-                    // Cursor position in window updates position of the tool tip
-                onMouseMove={event => {
-                  dispatch(onHover(allComponentRtids[bar.key]))
-                  if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                  const top = event.clientY - margin.top - bar.height;
-                  const left = bar.x + bar.width / 2;
-                  showTooltip({
-                    tooltipData: bar,
-                    tooltipTop: top,
-                    tooltipLeft: left,
-                  });
-                }}
-              />
-            ))))}
+            {barStacks => 
+              barStacks.map(barStack => 
+                barStack.bars.map(((bar, idx) => (
+                  <rect
+                    key={`bar-stack-${barStack.index}-${bar.index}`}
+                    x={bar.x}
+                    y={bar.y}
+                    height={bar.height === 0 ? idx + 1 : bar.height}
+                    width={bar.width}
+                    fill={bar.color}
+                    /* TIP TOOL EVENT HANDLERS */
+                    // Hides tool tip once cursor moves off the current rect
+                    onMouseLeave={() => {
+                      dispatch(onHoverExit(allComponentRtids[bar.key]),
+                      tooltipTimeout = window.setTimeout(() => {
+                        hideTooltip()
+                      }, 300))
+                    }}
+                        // Cursor position in window updates position of the tool tip
+                    onMouseMove={event => {
+                      dispatch(onHover(allComponentRtids[bar.key]))
+                      if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                      const top = event.clientY - margin.top - bar.height;
+                      const left = bar.x + bar.width / 2;
+                      showTooltip({
+                        tooltipData: bar,
+                        tooltipTop: top,
+                        tooltipLeft: left,
+                      });
+                    }}
+                  />
+                )))
+              )
+            }
           </BarStack>
         </Group>
         <AxisLeft
diff --git a/src/app/components/SwitchApp.tsx b/src/app/components/SwitchApp.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react';
diff --git a/src/app/components/Tree.tsx b/src/app/components/Tree.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* eslint-disable arrow-body-style */
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-explicit-any */
diff --git a/src/app/components/getLinkComponent.ts b/src/app/components/getLinkComponent.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 
 
 import {
diff --git a/src/app/components/legend.tsx b/src/app/components/legend.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import React from 'react';
 import { scaleOrdinal } from '@visx/scale';
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
@@ -10,10 +8,10 @@ const legendGlyphSize = 8;
 
 type snapHierarchy = {};
 //type snapHierarchy = {`Record<string, unknown>`};
-
-export default function LegendKey(props: snapHierarchy) {
+export default function LegendKey(props: any) {
   const { hierarchy } = props;
-
+  // console.log('this is the props' + JSON.stringify(Object.entries(props)))
+  // console.log('this is the props.hierarchy' + JSON.stringify(Object.entries(props.hierarchy)))
   // we are sifting through array of displayNames and sorting them into key value pairs in an object, based on the branch they are on:
   // { '.0': [1.0, 2.0, 3.0, 4.0], '.1': [1.1, 2.1, 3.1,...], '.2': [....]}
   // then we create an array, with each index being strings showing the range of the branch, see below:
@@ -24,7 +22,7 @@ export default function LegendKey(props: snapHierarchy) {
     for (let i = 0; i < snapshotIdsArray.length; i += 1) {
       const current = snapshotIdsArray[i];
       let key = current - Math.floor(current);
-      key = key.toFixed(2);
+      key = parseFloat(key.toFixed(2));
 
       if (current % 1 === 0) {
         key = current - Math.floor(current);
@@ -40,7 +38,8 @@ export default function LegendKey(props: snapHierarchy) {
     // now we convert the object to an array, each index being a string of the range of the branch
     // initializing array and new array with the values from resultRangeColor
     const branchesArr = [];
-    const arrValues = Object.values(resultRangeColor);
+    const arrValues : string[] = Object.values(resultRangeColor);
+
     //iterate through and values and combine them into a string of range for each branch
     for (let i = 0; i < arrValues.length; i += 1) {
       const len = arrValues[i].length;
@@ -118,7 +117,7 @@ export default function LegendKey(props: snapHierarchy) {
         </LegendOrdinal>
       </LegendVisual>
 
-      <style jsx>
+      <style >
         {`
           .legends {
             position: center;
@@ -142,13 +141,13 @@ function LegendVisual({
   children,
 }: {
   title: string;
-  children: React.ReactNode;
+  children: JSX.Element;
 }) {
   return (
     <div className="legend">
       <div className="title">{title}</div>
       {children}
-      <style jsx>
+      <style >
         {`
           .legend {
             position: absolute;
diff --git a/src/app/components/useForceUpdate.ts b/src/app/components/useForceUpdate.ts
@@ -1,8 +1,7 @@
-// @ts-nocheck
 import { useState } from 'react';
 
 // This function will force a change in state and cause a re-render of the component. The state information is irrelevant but an update is needed to force a re-render
 export default function useForceUpdate() {
-  const [setValue] = useState<number>(0);
+  const [setValue] = useState(0);
   return () => setValue((value) => value + 1);
 }
diff --git a/src/app/components/zoomFt.tsx b/src/app/components/zoomFt.tsx
@@ -1,5 +1,5 @@
-// @ts-nocheck
 /* eslint react/jsx-handler-names: "off" */
+// @ts-nocheck
 import React, { useState } from 'react';
 // import { interpolateRainbow } from 'd3-scale-chromatic';
 import { Zoom } from '@visx/zoom';
@@ -31,7 +31,7 @@ const initialTransform = {
 // };
 
 export default function ZoomI(props: any) {
-  const [showMiniMap, setShowMiniMap] = useState<boolean>(true);
+  const [showMiniMap, setShowMiniMap] = useState(true);
   // const { width, height, hierarchy, dispatch, sliderIndex, viewIndex } = props;
   const { width, height, hierarchy, dispatch, sliderIndex, viewIndex } = props;
   // const genenerator: GenPhyllotaxisFunction = genPhyllotaxis({

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// @ts-nocheck`
`2`	`1`	`import React from 'react';`
`3`	`2`	`import {`
`4`	`3`	`MemoryRouter as Router, Route, NavLink, Switch,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// @ts-nocheck`
`2`	`1`
`3`	`2`	`/* eslint-disable react/prop-types */`
`4`	`3`	`/* eslint-disable semi */`