Fully implemented TS on container files

Author: yuanjackie1

src/app/components/Action.tsx

@@ -61,7 +61,7 @@ const Action = (props: ActionProps): JSX.Element => {
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in milliseconds
    */
-  const cleanTime = () => {
+    const cleanTime = ():string => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
@@ -87,7 +87,7 @@ const Action = (props: ActionProps): JSX.Element => {
     }
     return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
   };
-  const displayTime = cleanTime();
+  const displayTime: string = cleanTime();
 
   const optionsCursorTrueWithMargin = {
     followCursor: true,

src/app/components/FrontendTypes.ts

@@ -95,3 +95,37 @@ export interface BarGraphComparisonAction {
   series?: number;
   setAction: (e: boolean | string) => void;
 }
+
+interface StateContainerProps {
+  snapshot: Record<
+    number,
+    {
+      name?: string;
+      componentData?: Record<string, unknown>;
+      state?: Record<string, unknown>;
+      stateSnaphot?: Record<string, unknown>;
+      children?: unknown[];
+    }
+  >;
+  toggleActionContainer?: any;
+  webMetrics?: object;
+  hierarchy: Record<string, unknown>;
+  snapshots?: [];
+  viewIndex?: number;
+  currLocation?: object;
+}
+
+export interface TravelContainerProps {
+  snapshotsLength: number;
+}
+
+export interface Obj {
+  stateSnapshot: {
+    route: any;
+    children: any[];
+  };
+  name: number;
+  branch: number;
+  index: number;
+  children?: [];
+}

src/app/components/StateRoute/ComponentMap/LinkControls.tsx

@@ -35,7 +35,7 @@ type Props = {
 // use BFS to put all the nodes under snapShots(which is the tree node) into an array
 const nodeList = [];
 
-const collectNodes = (node) => {
+const collectNodes = (node): void => {
   nodeList.splice(0, nodeList.length);
   /* We used the .splice method here to ensure that nodeList
   did not accumulate with page refreshes */

src/app/containers/ActionContainer.tsx

@@ -8,6 +8,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 import RouteDescription from '../components/RouteDescription';
+import { Obj } from '../components/FrontendTypes';
 
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -22,20 +23,11 @@ function ActionContainer(props): JSX.Element {
   const { toggleActionContainer, actionView, setActionView } = props;
   const [recordingActions, setRecordingActions] = useState(true);
 
-  let actionsArr = [];
-  const hierarchyArr: any[] = [];
+  let actionsArr: JSX.Element[] = [];
+  const hierarchyArr: (number | {})[] = [];
 
   // function to traverse state from hierarchy and also getting information on display name and component name
-  const displayArray = (obj: {
-    stateSnapshot: {
-      route: any;
-      children: any[];
-    };
-    name: number;
-    branch: number;
-    index: number;
-    children?: [];
-  }) => {
+  const displayArray = (obj: Obj): void => {
     if (
       obj.stateSnapshot.children.length > 0 &&
       obj.stateSnapshot.children[0] &&
@@ -56,7 +48,7 @@ function ActionContainer(props): JSX.Element {
       hierarchyArr.push(newObj);
     }
     if (obj.children) {
-      obj.children.forEach((element) => {
+      obj.children.forEach((element): void => {
         displayArray(element);
       });
     }
@@ -67,7 +59,7 @@ function ActionContainer(props): JSX.Element {
   if (hierarchy) displayArray(hierarchy);
 
   // handles keyboard presses, function passes an event and index of each action-component
-  function handleOnKeyDown(e: KeyboardEvent, i: number) {
+  function handleOnKeyDown(e: KeyboardEvent, i: number): void {
     let currIndex = i;
     // up arrow key pressed
     if (e.key === 'ArrowUp') {
@@ -89,7 +81,9 @@ function ActionContainer(props): JSX.Element {
     }
   }
   // Sort by index.
-  hierarchyArr.sort((a, b) => a.index - b.index);
+
+  hierarchyArr.sort((a:Obj, b:Obj):number => a.index - b.index);
+
   actionsArr = hierarchyArr.map(
     (snapshot: {
       routePath: any;
@@ -128,7 +122,7 @@ function ActionContainer(props): JSX.Element {
   }, [setActionView]);
 
   // Function sends message to background.js which sends message to the content script
-  const toggleRecord = () => {
+  const toggleRecord = (): void => {
     port.postMessage({
       action: 'toggleRecord',
       tabId: currentTab,
@@ -142,7 +136,7 @@ function ActionContainer(props): JSX.Element {
     [route: string]: [];
   };
 
-  const routes = {};
+  const routes: {} = {};
   for (let i = 0; i < actionsArr.length; i += 1) {
     if (!routes.hasOwnProperty(actionsArr[i].props.routePath)) {
       routes[actionsArr[i].props.routePath] = [actionsArr[i]];

src/app/containers/ButtonsContainer.tsx

@@ -13,9 +13,9 @@ import { useStoreContext } from '../store';
 
 import Tutorial from '../components/Tutorial';
 
-function exportHandler(snapshots: []) {
+function exportHandler(snapshots: []): void {
   // create invisible download anchor link
-  const fileDownload = document.createElement('a');
+  const fileDownload:HTMLAnchorElement = document.createElement('a');
 
   // set file in anchor link
   fileDownload.href = URL.createObjectURL(

src/app/containers/ErrorContainer.tsx

@@ -5,7 +5,7 @@ import Loader from '../components/Loader';
 import ErrorMsg from '../components/ErrorMsg';
 import { useStoreContext } from '../store';
 
-function ErrorContainer(): any {
+function ErrorContainer(): JSX.Element  {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTitle, currentTab } = store;
   // hooks for error checks

src/app/containers/StateContainer.tsx

@@ -6,25 +6,7 @@ import React, { useState } from 'react';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 import StateRoute from '../components/StateRoute/StateRoute';
 import DiffRoute from '../components/DiffRoute';
-
-interface StateContainerProps {
-  snapshot: Record<
-    number,
-    {
-      name?: string;
-      componentData?: Record<string, unknown>;
-      state?: Record<string, unknown>;
-      stateSnaphot?: Record<string, unknown>;
-      children?: unknown[];
-    }
-  >;
-  toggleActionContainer?: any;
-  webMetrics?: object;
-  hierarchy: Record<string, unknown>;
-  snapshots?: [];
-  viewIndex?: number;
-  currLocation?: object;
-}
+import { StateContainerProps } from '../components/FrontendTypes';
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {

src/app/containers/TravelContainer.tsx

@@ -11,12 +11,16 @@ import {
   resetSlider,
 } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { TravelContainerProps } from '../components/FrontendTypes';
 
-const speeds = [
+const speeds: {
+  value: number;
+  label: string;
+}[] = [
   { value: 2000, label: '0.5x' },
   { value: 1000, label: '1.0x' },
   { value: 500, label: '2.0x' },
-];
+];  
 
 // start slider movement
 function play(
@@ -25,7 +29,7 @@ function play(
   dispatch: (a: any) => void,
   snapshotsLength: number,
   sliderIndex: number,
-) {
+): void {
   if (playing) {
     dispatch(pause());
   } else {
@@ -35,7 +39,7 @@ function play(
       dispatch(resetSlider());
       currentIndex = 0;
     }
-    const intervalId = setInterval(() => {
+    const intervalId: NodeJS.Timeout = setInterval(() => {
       if (currentIndex < snapshotsLength - 1) {
         dispatch(playForward());
         currentIndex += 1;
@@ -47,10 +51,6 @@ function play(
   }
 }
 
-interface TravelContainerProps {
-  snapshotsLength: number;
-}
-
 function TravelContainer(props: TravelContainerProps): JSX.Element {
   const { snapshotsLength } = props;
   const [selectedSpeed, setSpeed] = useState(speeds[1]);