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

SamuelTr13 · web-flow · commit bf345c8b96e9 · 2022-10-17T09:32:05.000-05:00
Modularized code using a typescript file to import and refactoring code using engineering best practices
diff --git a/src/app/components/FrontendTypes.ts b/src/app/components/FrontendTypes.ts
@@ -0,0 +1,75 @@
+import { SeriesPoint } from '@visx/shape/lib/types';
+
+// PerformanceVisx types
+
+export interface Series {
+    data: {
+      barStack: ActionObj[],
+    }
+    name: string
+  }
+
+  interface ActionObj {
+    name: string,
+    seriesName: string,
+  }
+
+export interface PerfData {
+  barStack: BarStackProp[],
+  componentData?: Record<string, unknown>,
+  maxTotalRender: number,
+}
+
+interface BarStackProp {
+  snapshotId: string,
+  route: string,
+  currentTab?: string,
+}
+
+// On-hover data for BarGraph/BarGraphComparison.tsx
+export interface TooltipData {
+  bar: SeriesPoint<snapshot>;
+  key: string;
+  index: number;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  color: string;
+}
+
+export interface snapshot {
+  snapshotId?: string;
+  children: [];
+  componentData: { actualDuration: number } | undefined;
+  name: string;
+  state: string;
+}
+
+export interface margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+interface BarGraphBase {
+  width: number,
+  height: number,
+  data: PerfData,
+  comparison: string | Series | [],
+}
+
+export interface BarGraphComparisonProps extends BarGraphBase {
+  setSeries: () => void,
+  series: number,
+  setAction: () => void,
+}
+
+export interface BarGraphProps extends BarGraphBase{
+  setRoute: () => void,
+  allRoutes: unknown,
+  filteredSnapshots: unknown,
+  snapshot: unknown,
+  setSnapshot: () => void
+}
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { BarStack } from '@visx/shape';
-import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
 import { AxisBottom, AxisLeft } from '@visx/axis';
@@ -11,46 +10,7 @@ import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { onHover, onHoverExit, save } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-
-/* TYPESCRIPT */
-
-interface margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface snapshot {
-  snapshotId?: string;
-  children: [];
-  componentData: any;
-  name: string;
-  state: string;
-}
-
-interface TooltipData {
-  bar: SeriesPoint<snapshot>;
-  key: string;
-  index: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  color: string;
-}
-
-interface BarGraphProps {
-    width: number,
-    height: number,
-    data: Record<string, unknown>,
-    comparison: unknown,
-    setRoute: () => void,
-    allRoutes: unknown,
-    filteredSnapshots: unknown,
-    snapshot: unknown,
-    setSnapshot: () => void
-  }
+import { snapshot, TooltipData, margin, BarGraphProps } from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {
@@ -68,7 +28,7 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraph = (props: BarGraphProps): unknown => {
+const BarGraph = (props: BarGraphProps): JSX.Element => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
     width,
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
+/* eslint-disable no-param-reassign */
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
-import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
 import { AxisBottom, AxisLeft } from '@visx/axis';
@@ -13,47 +13,13 @@ import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
+import {
+  onHover, onHoverExit, deleteSeries, setCurrentTabInApp,
+} from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-
-/* TYPESCRIPT */
-
-interface margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface snapshot {
-  snapshotId?: string;
-  children: [];
-  componentData: any;
-  name: string;
-  state: string;
-}
-
-// On-hover data.
-interface TooltipData {
-  bar: SeriesPoint<snapshot>;
-  key: string;
-  index: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  color: string;
-}
-
-interface BarGraphComparisonProps {
-  width: number,
-  height: number,
-  data: Record<string, unknown>,
-  comparison: string | [],
-  setSeries: () => void,
-  series: unknown,
-  setAction: () => void,
-}
+import {
+  snapshot, TooltipData, margin, BarGraphComparisonProps,
+} from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {
@@ -71,7 +37,7 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraphComparison = (props: BarGraphComparisonProps): unknown => {
+const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
     width, height, data, comparison, setSeries, series, setAction,
@@ -117,15 +83,15 @@ const BarGraphComparison = (props: BarGraphComparisonProps): unknown => {
   // We'll then use it in the renderingScale function and compare
   // with the render time of the current tab.
   // The max render time will determine the Y-axis's highest number.
-  const calculateMaxTotalRender = serie => {
-    const currentSeriesBarStacks = !comparison[serie]
+  const calculateMaxTotalRender = (serie: number): number => {
+    const currentSeriesBarStacks: number[] = !comparison[serie]
       ? []
       : comparison[serie].data.barStack;
     if (currentSeriesBarStacks.length === 0) return 0;
     let currentMax = -Infinity;
     for (let i = 0; i < currentSeriesBarStacks.length; i += 1) {
-      const renderTimes = Object.values(currentSeriesBarStacks[i]).slice(1);
-      const renderTotal = renderTimes.reduce((acc, curr) => acc + curr);
+      const renderTimes: number[] = Object.values(currentSeriesBarStacks[i]).slice(1);
+      const renderTotal: number = renderTimes.reduce((acc, curr) => acc + curr);
       if (renderTotal > currentMax) currentMax = renderTotal;
     }
     return currentMax;
diff --git a/src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx b/src/app/components/StateRoute/PerformanceVisx/BarGraphComparisonActions.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
-import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
 import { AxisBottom, AxisLeft } from '@visx/axis';
@@ -15,35 +14,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-
-/* TYPESCRIPT */
-
-interface margin {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-interface snapshot {
-  snapshotId?: string;
-  children: [];
-  componentData: any;
-  name: string;
-  state: string;
-}
-
-// On-hover data.
-interface TooltipData {
-  bar: SeriesPoint<snapshot>;
-  key: string;
-  index: number;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  color: string;
-}
+import { TooltipData, margin } from '../../FrontendTypes';
 
 /* DEFAULTS */
 const margin = {
@@ -343,7 +314,7 @@ const BarGraphComparisonActions = props => {
           </div>
           <div>
             {
-            `${tooltipData.bar.data[tooltipData.key]} ms`
+              `${tooltipData.bar.data[tooltipData.key]} ms`
             }
           </div>
           <div>
diff --git a/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx b/src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx
