Added typescript for handleEvents

Author: yangbrian310

src/app/components/FrontendTypes.ts

@@ -21,7 +21,8 @@ export interface Series {
 
 export interface ActionObj {
     name: string,
-    seriesName: string,
+  seriesName: string,
+  currentTab: string,
   }
 
 export interface PerfData {
@@ -56,7 +57,7 @@ export interface snapshot {
   state: string;
 }
 
-export interface margin {
+export interface Margin {
   top: number;
   right: number;
   bottom: number;
@@ -71,9 +72,9 @@ export interface BarGraphBase {
 }
 
 export interface BarGraphComparisonProps extends BarGraphBase {
-  setSeries: (e: boolean) => void,
+  setSeries: (e: boolean | string) => void,
   series: number,
-  setAction: (e: boolean) => 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

@@ -18,12 +18,12 @@ import {
 } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import {
-  snapshot, TooltipData, margin, BarGraphComparisonProps, ActionObj, Series,
+  snapshot, TooltipData, Margin, BarGraphComparisonProps, ActionObj, Series,
 } from '../../FrontendTypes';
 import { BarStack } from '@visx/shape/lib/types';
 
 /* DEFAULTS */
-const margin: margin = {
+const margin: Margin = {
   top: 30, right: 30, bottom: 0, left: 50,
 };
 const axisColor = '#62d6fb';
@@ -139,8 +139,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 +155,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,7 +184,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
     });
     return data.barStack;
   }
-  
+
   const animateButton = (e: MouseEvent) => {
     e.preventDefault();
     const target = event.target as HTMLButtonElement;

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';