Merge pull request #16 from oslabs-beta/brian/feature

Added Typescript to several event handler functions in BarGraphComparison.tsx

Author: llam722

src/app/components/FrontendTypes.ts

@@ -9,9 +9,20 @@ export interface Series {
     name: string
   }
 
+// interface Event {
+//     target: EventTarget
+// }
+
+// interface EventTarget {
+//   x: WithParentSizeProvidedProps,
+//   y: OptionalKeys,
+//   value?: idk
+//   }
+
 export interface ActionObj {
     name: string,
-    seriesName: string,
+  seriesName: string,
+  currentTab: string,
   }
 
 export interface PerfData {
@@ -46,7 +57,7 @@ export interface snapshot {
   state: string;
 }
 
-export interface margin {
+export interface Margin {
   top: number;
   right: number;
   bottom: number;
@@ -57,13 +68,13 @@ export interface BarGraphBase {
   width: number,
   height: number,
   data: PerfData,
-  comparison: Series[] | string,
+  comparison: Series[],
 }
 
 export interface BarGraphComparisonProps extends BarGraphBase {
-  setSeries: (e: boolean) => void,
+  setSeries: (e: boolean | string) => void,
   series: number,
-  setAction: () => void,
+  setAction: (e: boolean | string) => void,
 }
 
 export interface BarGraphProps extends BarGraphBase{

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

@@ -11,7 +11,7 @@ import { schemeSet3 } from 'd3-scale-chromatic';
 import { onHover, onHoverExit, save } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
-  snapshot, TooltipData, margin, BarGraphProps,
+  snapshot, TooltipData, Margin, BarGraphProps,
 } from '../../FrontendTypes';
 
 /* DEFAULTS */

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

@@ -1,4 +1,5 @@
 // @ts-nocheck
+/// <reference lib="dom" />
 /* eslint-disable no-param-reassign */
 import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
@@ -18,12 +19,12 @@ import {
 } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
-  snapshot, TooltipData, margin, BarGraphComparisonProps, ActionObj,
+  snapshot, TooltipData, Margin, BarGraphComparisonProps, ActionObj, Series,
 } from '../../FrontendTypes';
-import { BarStack } from '@visx/shape/lib/types';
+// import { BarStack as BarStacks } from '@visx/shape/lib/types';
 
 /* DEFAULTS */
-const margin: margin = {
+const margin: Margin = {
   top: 30, right: 30, bottom: 0, left: 50,
 };
 const axisColor = '#62d6fb';
@@ -70,7 +71,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   const getSnapshotId = (d: snapshot) => d.snapshotId;
   const formatSnapshotId = (id: string): string => `Snapshot ID: ${id}`;
   const formatRenderTime = (time: string): string => `${time} ms `;
-  const getCurrentTab = (storedSeries: Record<string, unknown>) => storedSeries.currentTab;
+  const getCurrentTab = (storedSeries: ActionObj) => storedSeries.currentTab;
 
   // create visualization SCALES with cleaned data
   // the domain array/xAxisPoints elements will place the bars along the x-axis
@@ -139,8 +140,11 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
 
   const handleSeriesChange = (event: Event) => {
     if (!event) return;
-    setSeries(event.target.value);
-    setAction(false);
+    const target = event.target as HTMLInputElement;
+    if (target) {
+      setSeries(target.value);
+      setAction(false);
+    }
   };
 
   const handleClose = () => {
@@ -152,9 +156,12 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
   };
 
   const handleActionChange = (event: Event) => {
-    if (!event.target.value) return;
-    setAction(event.target.value);
-    setSeries(false);
+    const target = event.target as HTMLInputElement;
+    if (!target.value) return;
+    if (target) {
+      setAction(target.value);
+      setSeries(false);
+    }
   };
 
   const picHandleClose = () => {
@@ -178,14 +185,18 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     });
     return data.barStack;
   }
+
   const animateButton = (e: MouseEvent) => {
     e.preventDefault();
-    e.target.classList.add('animate');
-    e.target.innerHTML = 'Deleted!';
-    setTimeout(() => {
-      e.target.innerHTML = 'Clear All Series';
-      e.target.classList.remove('animate');
-    }, 1000);
+    const target = (e.target as HTMLButtonElement);
+    if (target) {
+      target.classList.add('animate');
+      target.innerHTML = 'Deleted!';
+      setTimeout(() => {
+        target.innerHTML = 'Clear All Series';
+        target.classList.remove('animate');
+      }, 1000);
+    }
   };
   const classname = document.getElementsByClassName('delete-button');
   for (let i = 0; i < classname.length; i += 1) {

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

@@ -14,10 +14,10 @@ import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
-import { TooltipData, margin } from '../../FrontendTypes';
+import { TooltipData, Margin } from '../../FrontendTypes';
 
 /* DEFAULTS */
-const margin = {
+const margin: Margin = {
   top: 30, right: 30, bottom: 0, left: 50,
 };
 const axisColor = '#62d6fb';

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

@@ -2,7 +2,6 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable max-len */
-
 import React, { useState, useEffect } from 'react';
 import {
   MemoryRouter as Router,
@@ -131,10 +130,10 @@ const traverse = (snapshot, data, snapshots, currTotalRender: currNum = 0): void
 };
 
 // Retrieve snapshot series data from Chrome's local storage.
-const allStorage = () => {
+const allStorage = (): Series[] => {
   let values = localStorage.getItem('project');
-  values = values === null ? [] : JSON.parse(values);
-  return values;
+  const newValues: Series[] = values === null ? [] : JSON.parse(values);
+  return newValues;
 };
 
 // Gets snapshot Ids for the regular bar graph view.