cleeaned out the TS for History.tsx/StateRoute.tsx

Co-authored-by: Mark Teets <markteets@gmail.com>
Co-authored-by: Jasmine Noor <jasnoo@users.noreply.github.com>
Co-authored-by: Minzo Kim <minzo-kim@users.noreply.github.com>

Author: 4 people

src/app/components/StateRoute/History.tsx

@@ -5,18 +5,11 @@ import React, { useEffect } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
-
+import { DefaultMargin } from '../../components/FrontendTypes';
 import { changeView, changeSlider, setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
 
-interface defaultMargin {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-}
-
-const defaultMargin: defaultMargin = {
+const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
   right: 55,

src/app/components/StateRoute/StateRoute.tsx

@@ -14,33 +14,20 @@ import { changeView, changeSlider } from '../../actions/actions';
 import { useStoreContext } from '../../store';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetrics from '../WebMetrics';
+import { StateRouteProps } from '../../components/FrontendTypes'
 
 const History = require('./History').default;
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 
-export interface StateRouteProps {
-  snapshot: {
-    name?: string;
-    componentData?: object;
-    state?: string | object;
-    stateSnaphot?: object;
-    children?: any[];
-  };
-  hierarchy: any;
-  snapshots: [];
-  viewIndex: number;
-  webMetrics: object;
-  currLocation: object;
-}
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
 
   // Map
-  const renderComponentMap = () => {
+  const renderComponentMap = (): JSX.Element  => {
     if (hierarchy) {
       return (
         <ParentSize className='componentMapContainer'>
@@ -63,7 +50,7 @@ const StateRoute = (props: StateRouteProps) => {
   // if true, we invoke the D3 render chart with hierarchy
   // by invoking History component, and passing in all the props required to render D3 elements and perform timeJump from clicking of node
   // otherwise we send an alert to the user that no state was found.
-  const renderHistory = () => {
+  const renderHistory = (): JSX.Element  => {
     if (hierarchy) {
       return (
         <ParentSize>