add typescript to ComponentMap and History

Author: kevinfey

src/app/components/ComponentMap.tsx

@@ -4,20 +4,29 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/ban-types */
 
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
 
-const ComponentMap = (props) => {
+interface componentMapProps {
+  x: number;
+  y: number;
+  k: number;
+  setZoomState: any;
+  snapshots: [];
+  viewIndex: number;
+}
+
+const ComponentMap = (props: componentMapProps) => {
   //import props
-  const { viewIndex, snapshots ,x ,y, k, setZoomState} = props;
+  const { viewIndex, snapshots ,x , y, k, setZoomState} = props;
   let lastSnap: number | null = null;
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
 
   //external constants
   const width: number = 900;
   const height: number = 600;
-  let data = snapshots[lastSnap];
+  let data: Object = snapshots[lastSnap];
 
   useEffect(() => {
     document.getElementById('canvas').innerHTML = '_';

src/app/components/History.tsx

@@ -74,8 +74,8 @@ class History extends Component {
   maked3Tree(): void {
     this.removed3Tree();
 
-    const width = 800;
-    const height = 600;
+    const width : number = 800;
+    const height : number = 600;
     const svgContainer = d3
       .select(this.HistoryRef.current)
       .append('svg') // svgContainer is now pointing to svg

src/app/components/StateRoute.tsx

@@ -19,8 +19,7 @@ const History = require('./History').default;
 
 const ErrorHandler = require('./ErrorHandler').default;
 
-const NO_STATE_MSG =
-  'No state change detected. Trigger an event to change state';
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
 interface StateRouteProps {
@@ -44,6 +43,7 @@ const StateRoute = (props: StateRouteProps) => {
     y: 250,
     k: 0.75,
   });
+
   //Map
   const renderComponentMap = () => {
     if (hierarchy) {